Building Consistency with Color, Typography, Effects, and Styles in Figma

Why styles matter (and what “reusable decisions” means)

In Figma, a style is a saved design decision you can apply repeatedly: a specific color, a text format, or an effect like a shadow. Instead of choosing new values every time (a “one-off”), you apply a style so your UI stays consistent and changes are easy later.

• Consistency: the same blue is always the same blue; headings look like headings everywhere.
• Speed: you stop re-picking values and start applying decisions.
• Easy updates: change the style once, and every layer using it updates.

Plan your style system: color, type, effects

Color groups you’ll create

Use a small, practical set of color styles that cover most UI needs:

• Primary: main brand/action color (buttons, links, active states).
• Secondary: supporting accent color (chips, highlights, secondary actions).
• Neutral: grays for text, borders, surfaces, backgrounds.
• Semantic: meaning-based colors (success, warning, error, info).

Text groups you’ll create

Text styles should map to roles, not specific screens:

• Headings: H1/H2/H3 (or Title/Large/Medium).
• Body: default paragraph text, secondary body.
• Labels: small UI text (button labels, field labels, captions).

Effect groups you’ll create

Effects are usually subtle and reused across components:

• Shadows: elevation levels (e.g., card shadow, modal shadow).
• Blurs: background blur for overlays, frosted panels (if needed).

Naming conventions that stay readable

A good name tells you what the style is for and where it belongs. Use slashes to create groups in the Styles panel.

Continue in our app.

• Listen to the audio with the screen off.
• Earn a certificate upon completion.
• Over 5000 courses for you to explore!

Or continue reading below...

Download the app

Recommended naming patterns

• Colors: Color/Primary/500, Color/Neutral/100, Color/Semantic/Error/500
• Text: Type/Heading/H2, Type/Body/Regular, Type/Label/Small
• Effects: Effect/Shadow/01, Effect/Shadow/02, Effect/Blur/Overlay

Tips for beginners:

• Use role-based names (Primary, Neutral, Error) more than “Blue” or “Gray”.
• If you use numbers (like 100–900), keep them consistent: lower = lighter, higher = darker.
• Keep the set small at first; you can add later without breaking anything.

Local styles vs library styles (beginner-friendly)

Local styles

Local styles live inside the current Figma file. They’re perfect when:

• You’re learning or prototyping.
• You’re working on a single project file.
• You don’t need to share styles across multiple files yet.

Library styles

Library styles are styles published from a “source” file and reused in other files via a library. Use them when:

• You have multiple files (e.g., marketing site + app) that must match.
• More than one person needs the same styles.
• You want a single place to update brand colors/type and push changes.

Simple rule: start with local while learning; move to a library when you feel the pain of copying styles between files.

Step-by-step: create color styles

You’ll create styles by setting a color on an object, then saving it as a style.

1) Create a small “Style Guide” frame

• Create a new frame named Style Guide.
• Inside it, make sections: Colors, Typography, Effects.

2) Build color swatches

• Create a small rectangle (e.g., 64×64) for a swatch.
• Duplicate it into rows for Primary, Secondary, Neutral, Semantic.
• Add a text label next to each swatch (e.g., Color/Primary/500) so you can visually verify usage.

3) Save each swatch fill as a color style

• Select a swatch rectangle.
• In the right panel under Fill, click the style icon (four dots) and choose Create style.
• Name it using your convention (example: Color/Primary/500).
• Repeat for the rest (Primary, Secondary, Neutral, Semantic).

Suggested starter set (example)

Keep semantic colors for meaning (errors/success), not decoration.

Step-by-step: create text styles

1) Place type samples in the Style Guide

• Create text layers for each role: Heading, Body, Label.
• Write sample content like “Heading H2”, “Body Regular”, “Label Small”.

2) Define each text style and save it

• Select a text layer.
• Set its font family, size, weight, line height, and letter spacing.
• In the right panel for text, click the style icon (four dots) and choose Create style.
• Name it (example: Type/Body/Regular).

Practical starter set (example)

Tip: avoid creating separate text styles just to change color. Color should usually be a color style applied to the text fill.

Step-by-step: create effect styles (shadows, blurs)

1) Create effect samples

• Add a rectangle labeled “Shadow 01”, “Shadow 02”, etc.
• Use a neutral fill (like Color/Neutral/0) so the shadow is visible.

2) Save a shadow as an effect style

• Select the sample rectangle.
• In the right panel, add an Effect (e.g., Drop shadow).
• Adjust blur, y-offset, spread, and opacity to a subtle level.
• Click the style icon next to Effects and choose Create style.
• Name it (example: Effect/Shadow/01).

3) Save a blur as an effect style (optional)

• Create an overlay rectangle.
• Add Background blur (or Layer blur depending on your need).
• Save it as Effect/Blur/Overlay.

Beginner tip: keep shadows consistent by using only 2–3 levels (e.g., 01 for cards, 02 for modals). Too many shadow styles makes the UI feel messy.

Build a Style Guide frame that displays all styles

Your Style Guide frame should be a quick visual reference and a working test area.

Suggested layout

• Colors section: swatches in a grid with labels showing the style name.
• Typography section: a vertical list of text samples, each using a text style.
• Effects section: small cards showing each shadow/blur style applied.

Make sure every sample is actually using the saved style (not just matching values). You can verify by selecting a layer and checking that the Fill/Text/Effect shows a style name rather than a raw value.

Refactor the previous login screen: replace one-off values with styles

Now you’ll update your existing login screen so it uses styles everywhere. The goal is that almost no layer uses “custom” fills or text formatting.

Step-by-step refactor checklist

1) Refactor background and surfaces

• Select the screen background layer and apply a neutral style (example: Color/Neutral/50).
• Select the login card/surface and apply Color/Neutral/0.
• If the card has a shadow, apply Effect/Shadow/01 instead of a custom shadow.

2) Refactor headings and body text

• Select the screen title (e.g., “Log in”). Apply Type/Heading/H2.
• Select helper text (e.g., “Welcome back…”). Apply Type/Body/Regular.
• Apply text fill color styles: primary text might be Color/Neutral/900, secondary text Color/Neutral/600.

3) Refactor form labels and inputs

• Select field labels (“Email”, “Password”). Apply Type/Label/Medium.
• Apply label color using a neutral style (often Color/Neutral/600 or Color/Neutral/900 depending on hierarchy).
• Select input borders and apply a border color style (example: Color/Neutral/200).
• Select placeholder text and apply a text style (often Type/Body/Regular) plus a lighter neutral color style (example: Color/Neutral/600).

4) Refactor buttons and links

• Select the primary button fill and apply Color/Primary/500.
• Select the button label and apply Type/Label/Medium (or a dedicated button label style if you prefer), and set its fill to Color/Neutral/0.
• Select links (e.g., “Forgot password?”) and apply Color/Primary/500 for the text fill, with a consistent text style like Type/Body/Regular or Type/Label/Medium depending on size.

5) Refactor semantic states (if present)

• If you have an error message under a field, apply Color/Semantic/Error/500 to the text fill.
• If you show success states, use Color/Semantic/Success/500.

Practical tip: refactor in passes (first all text styles, then all text colors, then fills/borders, then effects). This reduces missed layers.

Mini QA routine: audit a screen for style usage

This quick audit helps you catch “almost consistent” screens where a few layers still use custom values.

QA pass 1: check text styles

• Select each text layer (or multi-select groups of text layers).
• In the Text section, confirm a named style appears (e.g., Type/Body/Regular) rather than manual font settings.
• If you see mixed styles in a selection, fix outliers one by one.

QA pass 2: check color styles

• Select key UI elements: background, card, button, input border, link, primary text, secondary text.
• In Fill/Stroke, confirm each uses a named color style (e.g., Color/Neutral/50) rather than a raw hex value.
• Pay special attention to “close but not exact” grays (common inconsistency).

QA pass 3: check effects

• Select surfaces with shadows (cards, modals, dropdowns).
• In Effects, confirm a named effect style is applied (e.g., Effect/Shadow/01).
• Remove duplicate shadows that differ slightly; pick one elevation level.

QA pass 4: spot-check with a simple rule

Try to make this statement true: “If I change Primary/500 or Body/Regular, the whole screen updates correctly.” If not, find the layers that are still using one-off values and convert them to styles.