Figma Styles and Design Tokens
Styles and design tokens store your design decisions — colors, fonts, spacing, shadows — in one place. Instead of remembering that your primary button is #3A86FF or that body text is 16px Inter Regular, you define these once and apply them everywhere. Changing them later becomes a one-click update across the entire file.
What Are Styles?
A style in Figma is a saved set of design properties. Figma supports four types of styles:
Four Types of Styles
STYLE TYPE WHAT IT SAVES EXAMPLE
Color Style A fill or stroke color Primary Blue #3A86FF
Text Style Font, size, weight, Heading/H1 — Inter Bold 32px
line height
Effect Style Shadow or blur settings Card Shadow — 0 4px 12px rgba(0,0,0,0.1)
Grid Style Layout grid settings 12-column grid, 24px gutter
Creating Color Styles
- Select a shape with the color you want to save.
- In the Fill section of the Design Panel, click the four-dot icon.
- Click + to create a new style.
- Name the style using a clear hierarchy, such as Brand/Primary or Neutral/Gray-500.
- Click Create Style.
Color Style Library Example
COLOR STYLES +------------------------------------+ | Brand | | Primary #3A86FF [■] | | Secondary #FFBE0B [■] | | Accent #FB5607 [■] | | Neutral | | Gray-900 #111827 [■] | | Gray-500 #6B7280 [■] | | Gray-100 #F3F4F6 [■] | | Semantic | | Success #10B981 [■] | | Warning #F59E0B [■] | | Error #EF4444 [■] | +------------------------------------+
Applying a Color Style
Select any shape. In the Fill section, click the four-dot icon. The Styles menu opens. Click any color style to apply it. The shape now references that style — if the style color changes later, this shape updates automatically.
Creating Text Styles
- Add a text element and set it to the desired font, size, weight, and line height.
- Select the text and click the four-dot icon in the text section of the Design Panel.
- Click + and name the style (e.g., Heading/H2 or Body/Regular).
Text Style Scale Diagram
TEXT STYLES — TYPE SCALE +--------------------------------------------------+ | Display — Inter Black 64px / 72px line height | | H1 — Inter Bold 40px / 48px | | H2 — Inter Bold 32px / 40px | | H3 — Inter SemiBold 24px / 32px | | H4 — Inter SemiBold 20px / 28px | | Body/LG — Inter Regular 18px / 28px | | Body/MD — Inter Regular 16px / 24px | | Body/SM — Inter Regular 14px / 20px | | Caption — Inter Regular 12px / 16px | | Label — Inter Medium 12px / 16px, +0.8 spacing| +--------------------------------------------------+
Effect Styles — Shadows and Blurs
An effect style saves shadow or blur settings so you reuse them consistently across cards, modals, and dropdowns.
Creating an Effect Style
- Select a shape. In the Design Panel, click + next to Effects.
- An inner or drop shadow is added. Click the sun icon to edit its values (offset X, offset Y, blur, spread, color).
- Click the four-dot icon at the top of the Effects section and click + to save it as a style.
Shadow Elevation System
ELEVATION SHADOW VALUES USE ON Low 0 1px 3px rgba(0,0,0,0.12) Buttons, tags Medium 0 4px 12px rgba(0,0,0,0.12) Cards, dropdowns High 0 12px 32px rgba(0,0,0,0.16) Modals, sidebars Highest 0 24px 48px rgba(0,0,0,0.20) Full-screen overlays
Grid Styles
A layout grid divides a frame into columns, rows, or a grid of cells. It helps you align elements consistently across screens.
Applying a Layout Grid
- Select a frame.
- In the Design Panel, click + next to Layout Grid.
- Choose between Columns, Rows, or Grid.
- Set the count, gutter (gap between columns), margin (space from frame edges), and color.
Common Grid Setups
SCREEN COLUMNS GUTTER MARGIN Mobile (390px) 4 16px 16px Tablet (768px) 8 24px 32px Desktop (1440px) 12 24px 80px
Save your grid as a Grid Style so the same grid applies to every screen in one click.
What Are Design Tokens?
Design tokens are the naming layer on top of styles. A token is a named value: color.primary.500 = #3A86FF. Tokens make your design values shareable with developers who use them directly in code.
Style vs. Token Comparison
FIGMA STYLE DESIGN TOKEN (for code) Color Style: Primary color.brand.primary: #3A86FF Text Style: Body/MD font.size.body.md: 16px Effect: Card Shadow shadow.card: 0 4px 12px rgba(0,0,0,0.12) Spacing: — spacing.4: 16px
Styles live inside Figma. Tokens exist in both Figma and code — they are the bridge between design and engineering.
Figma Variables (Token Implementation)
Figma Variables are the built-in way to create design tokens directly in Figma. You define a variable collection with named values, then bind those variables to fills, text sizes, spacing, and more.
Variable Collection Example
COLLECTION: Colors Variable Name Value (Light Mode) Value (Dark Mode) bg/surface #FFFFFF #1A1A2E bg/surface-raised #F9FAFB #252545 text/primary #111827 #F9FAFB text/secondary #6B7280 #9CA3AF brand/primary #3A86FF #3A86FF
Variables support Modes — light mode and dark mode values in one variable. Switch the mode and the entire design updates. This is covered in detail in the Variables and Responsive Design topic.
Updating a Style Globally
To update a color or text style across the entire file:
- Open the Assets Panel (Ctrl/Cmd + Alt + O).
- Go to the Styles section and find the style you want to change.
- Right-click it and choose Edit Style.
- Change the color or font settings.
- Every element using that style updates instantly throughout the file.
Shared Library — Publishing Styles
Styles defined in one Figma file can be shared with other files through a Team Library. This means one central file holds all brand colors, fonts, and shadows, and every other file in the team connects to it. Updating the library file pushes updates to all connected files.
- In the main library file, click the Figma menu → Libraries.
- Toggle on Publish styles and components.
- In other files, go to the Assets Panel → click the book icon → enable the shared library.