Designer’s Ultimate Spacing Guide: From Design Tokens to Final Design

Designer’s Ultimate Spacing Guide: From Design Tokens to Final Design

Great spacing is the heartbeat of a clear, user-friendly design. It organizes information and guides people’s eyes and clicks with ease. Grids and spacing methods act as the framework that holds everything together, bringing structure, rhythm, and flow to your layouts. When you use them well, they simplify tough choices like where to place text or how big a button should be, and they create a design that feels natural and intentional. 

Master these tools, and you’ll cut through the clutter, building interfaces that are easy to navigate and a joy to use, every single time.

In this article

1. Why spacing matters

Space in design keeps your text easy to read, your buttons simple to tap, and your layouts clear instead of crowded. I’ve watched users ditch apps in seconds when the spacing was too tight, and trust me, it’s a big deal. Good spacing isn’t just for show; it builds an experience that feels smooth and natural.

I once designed a mobile app where the button padding was a measly 4px. Clicks plummeted. Then, I nudged it up to full-width, and suddenly, users couldn’t stop tapping. 

The takeaway? Even your pixels deserve a little space to shine.

2. Benefits of proper spacing in UI design

When spacing works, your design clicks—literally and figuratively.

Here’s why I swear by it:

  1. Visual hierarchy: The arrangement of elements to emphasize importance, drawing attention to key areas. Spacing, like spacing-8 for buttons or spacing-16 for sections, highlights important elements, guiding user focus.
  2. Readability: The ease of reading text without strain. Line height at 1.3–1.6x font size, using spacing-16 or spacing-20, makes text clear and comfortable to read.
  3. Consistency: Uniform spacing across a design for a cohesive look. Using 4pt or 8pt grid steps, such as spacing-4 and spacing-12, ensures layouts feel predictable and harmonious.
  4. Increased engagement: Creating an inviting, uncluttered interface that encourages users to stay. Whitespace with spacing-24 or gaps with spacing-8 reduces visual noise, keeping users interested.
  5. Accessibility: Ensuring designs are usable for all, including those with motor or visual challenges. 48px tap targets with spacing-8 or spacing-12 improve touch accuracy and readability.

These advantages make spacing essential for effective designs.

3. Grid Systems: Your spacing superpower

The 4pt and 8pt grid systems are my go-to tricks for perfect spacing in design. They make layouts clean, consistent, and easy to scale. I’ve used these grids for years to turn messy drafts into designs that feel just right. Big names like Google’s Material Design and Apple’s Human Interface Guidelines love them too. Here’s why they’re so great, plus my step-by-step guide to using them.

Why use 4-point grid system?

The 4pt grid is all about precision. It’s built on 4px steps, which makes it really flexible. You can cut it down to 2px for small tweaks or bump it up to 8px, 12px, or 16px for more space. This keeps everything lined up perfectly, with no strange gaps like 5px or 7px messing things up. I turn to it when I need tight, detailed spacing, like in mobile apps or busy forms.

Google Material Design team uses it because it works so well. I saw its magic on a mobile app redesign once. The original had random 6px and 10px spacings, and it felt off. Switching to a 4pt grid with 4px, 8px, and 12px steps made everything fit together. Text looked neat, buttons balanced out, and the difference was clear right away. It’s ideal for keeping things sharp and controlled, no matter the screen.

How to implement 4-point grid system?

Here’s my step-by-step:

  • Tool setup: In Figma, I switch on the 4px grid and set nudges to 4px.
  • Add tokens: Create Figma variables like spacing-4 for 4px, spacing-8 for 8px, and spacing-12 for 12px.
  • Snap it: Every element locks to that grid: text, icons, boxes. I apply spacing-4 or spacing-8 to stay tight and neat.
  • Scale it: Think spacing-4 for small padding, spacing-8 for medium gaps, spacing-12 for big breaks.
  • Team sync: I share the grid plan and tokens so devs can follow along without a hitch.

It works perfectly on high-res screens too. Everything stays crisp and clear.

Why use 8-point grid system?

The 8pt grid is the bolder version of the 4pt system. It uses 8px steps, which makes it quick and roomy. I love it for bigger layouts like dashboards, landing pages, or anything made for touch. The larger jumps, like 8px, 16px, and 24px, create a flow that feels natural and easy to use. Apple’s Human Interface Guidelines back it because it matches how people tap and swipe, especially on screens where fingers need space.

I used it on a tablet dashboard once when I was new on product design. The first version had tight 10px gaps, and users couldn’t tap buttons easily. Switching to an 8pt grid with 8px padding and 16px margins gave everything room to breathe. Clicks improved, and complaints stopped. It’s less about tiny details and more about clear, confident spacing that works anywhere.

How to implement 8-point grid system?​

Here’s my step-by-step:

  • Tool setup: In Figma, I switch on the 8px grid and set nudges to 8px.
  • Add tokens: I set Figma variables like spacing-8 for 8px, spacing-16 for 16px, and spacing-24 for 24px. 
  • Snap it: Every element locks to that grid: buttons, cards, sections. I use spacing-8 or spacing-16 to keep it clean.
  • Scale it: Think spacing-8 for small padding, spacing-16 for medium gaps, spacing-24 for big breaks.
  • Team sync: I share the grid plan and tokens so devs can keep up without a struggle.

It fits touchscreens like a glove. Designs look sharp and feel right on any device.

Why use Fibonacci grid system?

The Fibonacci grid focuses on natural proportions. It uses steps based on the Fibonacci sequence—2px, 3px, 5px, 8px, 13px, 21px—creating a visually pleasing rhythm. This keeps elements spaced harmoniously, avoiding abrupt jumps like 4px to 10px. I choose it for organic layouts, like in creative websites or editorial designs.
Designers at companies like Airbnb use it because it mimics nature’s balance. I once redesigned a landing page with uneven 6px and 12px gaps; it felt off. Switching to a Fibonacci grid with 5px, 8px, and 13px steps made everything flow naturally. Text felt balanced, sections harmonized, and the design looked polished instantly. It’s ideal for artistic, dynamic layouts across screens.

How to implement Fibonacci grid system?

Here’s my step-by-step:

  • Tool setup: In Figma, I switch on a custom grid with Fibonacci steps, like 5px or 8px, and set nudges to match.
  • Add tokens: I set Figma variables like spacing-2 for 2px, spacing-5 for 5px, and spacing-8 for 8px.
  • Snap it: Every element locks to that grid: buttons, cards, text. I use spacing-5 or spacing-8 to keep it balanced and natural.
  • Scale it: Think spacing-2 for small padding, spacing-8 for medium gaps, spacing-13 for larger breaks.
  • Team sync: I share the grid plan and tokens so devs can keep up without a struggle.

It works perfectly on high-res screens too. Everything stays crisp and clear.

Grid types for effective spacing

Grids enhance the 4pt and 8pt grid systems, ensuring consistent, structured spacing in UI/UX design. They organize layouts, maintain visual harmony, and adapt to devices and content, aligning with spacing principles for content density and platform needs. The main types—Fixed, Fluid, and Adaptive—each offer unique spacing benefits, supporting clean, scalable designs with 4pt and 8pt steps.

Image Source

  • Fixed grid: A rigid grid with set pixel widths, such as 4px or 8px steps, maintaining precise spacing like 8px gaps or 16px margins. It uses fixed pixel values for consistent, simple layouts, ideal for desktops or static designs, but lacks flexibility for varying screens.
  • Fluid grid: A flexible grid that adjusts spacing, such as 16px gaps, based on screen size using percentages or relative units. It ensures adaptability for responsive designs, suiting websites or apps, but may lose exact precision on smaller devices.
  • Adaptive grid: A grid that changes spacing, like 8px to 12px gaps, at specific breakpoints. It balances precision and flexibility, maintaining consistent layouts across device sizes, such as phones, tablets, and desktops, for complex designs.

These grid types work seamlessly with the 4pt and 8pt systems, supporting clean, effective spacing that meets content, platform, and user needs in UI/UX designs.

4. Design tokens and Figma variables: The building blocks

Design tokens are simple values like 4px or 16px for spacing. Figma variables make them reusable and super quick to update. I used to fix spacing on every screen one by one, which took forever. Now, I change one variable, and it’s done. It’s a huge win for keeping designs clean and fast. 

Here’s how I do it with the 4pt grid, step by step, with all the details.

Naming conventions

I use names that click fast. Size-based ones like spacing-4 or spacing-12 are my go-to. They’re simple to read: spacing-8 means 8px, no questions. I also use names like padding-button or margin-section when it’s tied to something specific, like a button’s inside space. I never go crazy with names like tiny-space-love. That’s just confusing.

I stick to one style across the board. If I start with spacing-4, I don’t switch to gap-big later. On a website redesign, my team had names like space-10px and padding-small. It was a mess. We switched to spacing-4, spacing-8, spacing-12, and kept it clean. Devs turned them into CSS variables like —spacing-12 without any hiccups. Good names make life easier for everyone.

Defining Figma variables

I create my spacing tokens in Figma’s Variables panel. First, I click “Create variable,” choose “Number” as the type, type the name, and set the value in pixels. I stick to the 4pt grid, using steps like 4px, 8px, 12px, and so on. This keeps spacing neat and easy to scale.

The image below shows how I set this up: I start with primitive tokens like spacing-04 at 4px, spacing-08 at 8px, and so on, under the “Primitives” mode. Then, I use these to build component-based tokens, or semantic tokens, like stack-md or box-lg for cards, under “Components (Semantics)” mode. Now my spacing tokens are ready to create reusable, meaningful spacing for layouts.

On a mobile app project, I used spacing tokens across 30 screens. When the client wanted more room, I bumped stack-md from 12px to 16px. Every card and modal updated in a flash. I also add descriptions in Figma, like “Use stack-md or stack-sm for card padding,” so my team knows what’s what. It’s all about saving time down the road.

Testing

I test to make sure my spacing is spot-on. Here’s my detailed process:

  1. Screen check: I try different spacing sizes on various devices. I use spacing-4 on small phone screens, spacing-8 on mid-size tablets, and spacing-12 on desktops. It needs to look good everywhere. I also check zooms like 100% and 150% to catch blurry spots or tight areas. On a tablet app, spacing-4 felt too cramped for button padding. I switched to spacing-8, and it looked perfect.
  2. User input: I show the design to users and watch how they use it. If they pause or miss a button, I tweak the spacing. In a prototype, a button with spacing-8 padding got ignored because it was hard to tap. I switched to spacing-12, and users tapped easily. I ask questions like “Does this feel right?” or “Is it easy to read?” Their feedback guides me.
  3. Layout check: I zoom out to 25% to see the whole design. If it looks clean and balanced, I know it’s ready. If sections look crowded or gaps feel off, I adjust. For example, spacing-16 between sections looked tight at 25%. I tried spacing-20, and it flowed better.
  4. Dev sync: I test with developers too. I export my tokens as JSON, and they use them in code, like –spacing-12 for CSS. On a web project, spacing-16 showed up as 15px in the browser. We found a typo, fixed it, and synced back to 16px. Testing catches those small mistakes early.

Testing with design tokens and the 4pt grid makes spacing sharp and simple. It cuts extra work, keeps designs clear, and makes updates easy. Try it, and you’ll see how fast it get

5. Types of spacing in UI design

Padding

Internal space within an element.

Margin

External space around an element.

Inset Spacing

Internal space in nested elements.

Kerning

Space between specific letter pairs.

Line Height

Vertical space between text lines

Tracking

Internal space in nested elements.

Leading

Precise vertical space between
text lines.

Grid Gap

Space between grid columns
or rows.

Whitespace

Empty areas for focus.

6. Spacing best practices

Spacing is essential for user-friendly, attractive designs. Follow these guidelines for consistency and usability, using the 4pt and 8pt grid systems and design tokens effectively.

  • Use consistent grid steps: Stick to 4px or 8px steps, like spacing-8 for padding or spacing-16 for gaps, to maintain rhythm and avoid odd values like 7px.
  • Balance density and whitespace: Use spacing-4 or spacing-8 for dense layouts, and spacing-16 or spacing-24 for open spaces, matching content and platform needs.
  • Prioritize accessibility: Ensure 48px tap targets with spacing-8 or spacing-12, and set line height to 1.4–1.6x font size with spacing-16 for readability.
  • Align with platform guidelines: Follow iOS’s 8pt grid with spacing-8, spacing-16, spacing-24, or Android’s 4pt grid with spacing-4, spacing-8, spacing-12.
  • Test across devices: Check spacing-4 on phones, spacing-8 on tablets, and spacing-16 on desktops using fixed, fluid, or adaptive grids.
  • Sync with development: Share tokens like spacing-8 as —spacing-8 in CSS, ensuring consistent spacing with developers.

Wrapping up

Spacing may not steal the spotlight, but it saves designs from looking like a cluttered mess—believe me, I’ve seen that chaos! It’s key to clear, user-friendly UI/UX designs. Use the 4pt and 8pt grids with tokens like spacing-4, spacing-8, and spacing-16 for consistent spacing. Master types like padding, margin, and whitespace, and follow best practices for accessibility and development sync.

Ready to level up your next project? Try adjusting one spacing-12 gap—your users will notice the difference!

Open for new opportunities and collaboration! Whether it’s a professional collaboration or just a friendly chat, I’m all ears.

Linkedin
Twitter
Dribbble
Behance

Figma Local Styles vs. Variables: Which One You Should Use

Figma Local Styles vs. Variables: Which One You Should Use

Alright, let’s talk Figma, specifically Local Styles and Variables. These two are my go-to for keeping designs crisp and my sanity out of the gutter, but they’re no clones—one’s old-school grit, the other’s next-level glow. I’ve burned too many hours tweaking layers to call them anything but essentials. They look like twins, but trust me, their vibes couldn’t be more different.

Grab a coffee, I’m unpacking why I blend these lifesavers like a pro.

In this article

1. What are Figma local styles?

My trusty design sidekick

Local Styles are my go-to when I need reusable design magic defined right in my Figma file. They’re all about composite properties, bundling up multiple values into one package.

Properties I can style

  • Color: Reusable fills, strokes, and effects because I’d rather lock in my brand vibe than play hex code whack-a-mole across 50 buttons.
  • Text: Font families, sizes, weights, line heights, and more, prepped and ready so I don’t accidentally pitch a client with Papyrus vibes.
  • Effect: Shadows, blurs, and other flair, saved and ready to make my layers pop. (Yes, I’m that designer who overdoes drop shadows.)
  • Grid & layout: Standardized grids and layouts for responsive design, because eyeballing a 12-column system is how nightmares start.
I can cram a style with everything from font size to a sassy color pop—like a text setup that’s basically a design Happy Meal: fast, tasty, and zero cleanup.

I’ve learned to live with

  • Static nature: These champs don’t flex—like that cluttered artboard I’ve been “fixing” since 2023. No Modes here, so switching between light and dark themes? Total fantasy.
  • File-specific trouble: They’re glued to their home file, total homebodies. I can publish them to a team library, but that takes effort, and I’m not always caffeinated enough for it.
  • No aliasing allowed: They’re solo players—no linking to other styles or chatting with Variables. It’s every style on its own, living that independent design life.

My go-to examples

  • A gradient color style (blue-to-purple) that screams “I’ve got taste.”
  • A “Heading 1” style, Roboto, 42px, bold because ain’t nobody got time to nudge sliders all day.
  • A shadow effect I eyeballed into “pro” territory (and I’m not sorry).

When I call my sidekick

I turn to these when I’m keeping it chill or too buried in a nested component mess to reinvent the wheel. They’re my shortcut to static, no-drama consistency—perfect for those “client needs it by lunch” panic moments.

2. What are Figma variables?

Image credit: Figma

My shiny new design crush

Variables are my sparkly obsession since Figma dropped them at Config 2023—like a design crush I can’t stop swooning over. Forget composite properties; these babies are single-value rockstars (think hex codes, numbers, strings, or yes/no drama queens), built for flexibility and design tokens glory.

My variable superpowers

  • Color: A single hue like #007AFF that flips to #66B2FF in dark mode—because I’m too cool to tweak every fill manually.
  • Number: Spacing or sizes (16px padding) that keep my grids tighter than my deadline panic.
  • String: Text snippets for prototyping—like placeholder labels that say “Insert witty copy here.”
  • Boolean: On/off switches for visibility, because toggling layers like a DJ is my new flex.

I can set one value—like a sleek #FF0000 red—and watch it strut its stuff across my file. It’s like handing my design a VIP pass: simple, standout, and ready to remix.

The crush-worthy perks

  • Modes magic: They shapeshift with Modes—light mode, dark mode, brand mode, you name it—faster than I can say “client revision.”
  • Aliasing awesomeness: They link up like design BFFs—button-fill can piggyback on primary-color, and I’m just over here cackling at my own genius.
  • Scoping smarts: I can tell them where to shine—like scoping a number to padding only, keeping my chaos contained.
  • Prototyping tricks: With conditional logic and math powers, I’m calculating spacing or toggling visibility like I secretly aced coding bootcamp.

My go-to examples

  • primary-color: #007AFF (light) to #66B2FF (dark) theme-switching swagger in one click.
  • spacing-base: 16px because consistent margins are my love language.
  • is-visible: A boolean flipping layers on and off, making me feel like a prototype puppet master.

When I go full variables

I reach for these when I’m dreaming big—think scalable design systems, slick theme swaps, or impressing devs with tokenization that screams “I get it.” They’re my shiny ticket to dynamic, future-proof designs—especially when “static” just won’t cut it.

3. Local styles vs. variables

Time to pit my trusty Local Styles sidekick against my shiny Variables crush in a no-holds-barred design showdown. I’m throwing every pro term I’ve got into this table—Composite Properties, Modes, Aliasing, the works—because I’m here to flex. Here’s how they stack up when I’m knee-deep in Figma chaos:

4. My button saga

Local styles vs. variables

Here’s where my trusty Local Styles sidekick and shiny Variables crush duke it out over a primary button—because every designer’s got a button story, right? Let’s see how they flex their powers in my Figma sandbox.

My sidekick’s button game

I craft a “Primary Button” Local Style with:

  • A gradient fill—because composite properties let me go full “fancy pants.”
  • A chunky shadow—stacked effects are my comfort zone.
  • A 2px border—just enough edge to feel sassy.
  • It’s a one-click wonder across my buttons—gorgeous until dark mode crashes the party. No Modes means I’m stuck duplicating styles like a sleep-deprived intern, begging for mercy.

My crush’s button glow-up

I define:

  • primary-color: #007AFF (light) to #66B2FF (dark)—Modes for the win.
  • shadow-size: 8px—scoped to keep it tidy.
    border-width: 2px—simple and sleek.

My button’s fill taps primary-color, shadow leans on shadow-size, and border’s locked in. One Modes toggle, and it’s a dark-mode dream. Aliasing kicks in if I tweak primary-color—pure design crush magic.

The button verdict

My sidekick’s a static champ for quick wins, but my crush steals the show with dynamic flair. It’s like choosing between a reliable sketchbook and a tablet that does the sketching for me—both have their moments.

5. When I pick my poison (or play both sides)

Deciding between my local styles sidekick and variables crush is like picking a favorite artboard—tough, but I’ve got my rules. Here’s when I call each to the rescue or sneakily blend them.

My sidekick’s sweet spots

  • Composite properties like gradients or shadow stacks—my crush can’t touch these yet (early 2025, I’m waiting).
  • Small gigs where I’m dodging design systems—no need to overthink a one-off mockup.
    Deep in a nested component mess—I’m too frazzled to rethink my flow.

My crush’s claim to fame

  • Big design systems with design tokens—red-500, button-fill, you name it.
  • Modes for light/dark swaps or responsive tweaks.
  • Devs begging for tokenization—I look like a handoff hero.

My blend move

Why choose? I blend like a pro:

  • Variables for basics—primary-color, spacing-base.
  • Local styles for flair—a gradient tied to primary-color with a manual nudge.
  • It’s my design cheat code—sidekick grit meets crush sparkle.

6. My migration drama

Figma’s not forcing my local styles and variables to pick sides—they’re coexisting like awkward roommates. But I’ve got a migration soap opera brewing and some starry-eyed dreams about where this is all headed.

My conversion chaos

  • Convert: Simple local styles (like solid colors) jump ship to variables—instant tokenization swagger.
  • Keep: Composite properties like gradients cling to my local styles—my variables isn’t ready to steal that spotlight yet.
  • Blend: Variables take the lead, local styles toss in the extras—design peace treaty signed.

The future I’m drooling over

Local styles are a steady pal, but variables are stealing the show tomorrow. Variables are beefing up—typography modes, gradient goodies, and prototyping tricks that’ll make me ditch my static security blanket. Design tokens are my dev-handoff love language, and I’m living for it.

My blend move

Why choose? I blend like a pro:

  • Variables for basics—primary-color, spacing-base.
  • Local styles for flair—a gradient tied to primary-color with a manual nudge.
  • It’s my design cheat code—sidekick grit meets crush sparkle.

My final take: Local styles, variables, or chaos?

Local styles are my cozy blanket—think composite properties like gradients and shadows when I’m feeling retro. My variables crush? A rocket ship—modes and design tokens blasting my designs to the future. Starting fresh, I’m all-in on variables—they’re slick, scalable, and make me look like a genius. But I’ll sneak in styles for the stuff variables can’t nail yet (gradients, I’m staring at you). Figma’s too chill to force a breakup, so I blend because I’m a design magpie hoarding the best of both. 

You? Styles loyalist, variables stan, or chaotic?

Advanced Token Design – How to Build Scalable Systems

Advanced Token Design – How to Build Scalable Systems

Design tokens are the backbone of modern design systems. They encapsulate decisions about colors, typography, spacing, and more into reusable variables, acting as the connective tissue between design and development. Tokens ensure consistency, enable scalability, and simplify collaboration. Having worked with design systems for years, I can confidently say that mastering design tokens is essential for creating efficient, cohesive design systems—whether you’re working on a single brand or managing a suite of them.

Here’s a detailed guide to help you become a pro in design tokens:.

In this article

1. Understanding design tokens

What are design tokens?

Design tokens are variables that store reusable design decisions such as colors, typography, and spacing. Think of them as the DNA of your design system, translating abstract concepts into a format developers can directly implement. Instead of specifying a hex value like #FF5733 over and over, you reference a token like Primary-Button-Background. This approach centralizes your design decisions, ensuring consistency and ease of maintenance.

Image credits : Figma

Why use design tokens?

Design tokens bring immense value to design systems by promoting consistency, scalability, and efficiency.

Here’s why I always advocate for design tokens:

  • Consistency: They ensure every aspect of your design remains uniform across platforms.
  • Efficiency: Tokens minimize redundant work for both designers and developers.
  • Scalability: Easily adapt to new themes, brands, or platforms.
  • Accessibility: Maintain consistent accessibility standards without extra effort.

2. Design token architecture

Setting up variables in Figma

Figma’s variables are a great way to start organizing your tokens, though they aren’t tokens in themselves. The key is aligning these variables with your design intent to translate them into functional design tokens that developers can use.

https://help.figma.com/hc/en-us/articles/18490793776023-Update-1-Tokens-variables-and-styles

Token types

Global tokens

Global tokens serve as the foundational(Primitive) values within a design system. They are context-neutral and include core attributes such as typography settings, color palettes, and animation values. These tokens act as the building blocks for the system, directly usable or inherited by other types of tokens to maintain consistency.

Semantic(Alias) tokens

Semantic tokens are tied to specific contexts or abstractions. By providing meaningful names that convey their intended purpose, they help clarify the role of each token within the design system. Alias tokens are particularly useful for values that are reused across multiple scenarios, making them effective for maintaining a unified design language.

Component-specific tokens

Component-specific tokens encapsulate all the values associated with a particular component. While they often inherit from alias tokens, they are named explicitly to support precise application by engineering teams. This clarity allows for seamless implementation and fine-grained control during the development of individual components.

3. Anatomy and organization of design tokens

Effectively managing design tokens requires a clear understanding of their structure and how they fit into your design system. Design tokens are not just variables—they’re the foundation for maintaining consistency, flexibility, and efficiency in design and development workflows. Let’s break down their anatomy and explore best practices for their organization.

Key components of a design token

A design token is composed of essential elements that make it both human-readable and machine-usable:

  1. Naming convention:
    The name is the unique identifier of a token, such as Primary-Button-Background. It should be descriptive and follow a consistent naming convention to ensure clarity and predictability. A good naming strategy uses hierarchical, context-rich structures like:
    • global.primary.color.background
    • component.button.color.background
  2. Value:
    The value is the actual data or property the token represents, such as #FF5733 for a color or 16px for a font size. The value should be context-independent when stored at a global level and adapted through aliases or semantic tokens when applied in specific use cases.
  3. Category:
    Each token is assigned a category, such as color, typography, or spacing, which groups similar tokens together. Categories improve discoverability and provide logical organization for easier management.
  4. Context (or Metadata):

    Metadata includes supplementary details about the token, such as where and how it’s used. This might include:

    • Accessibility notes (e.g., WCAG contrast compliance).

    • Associated components (e.g., used in the Button component).

    • Mode variations (e.g., light or dark mode).

Organizing tokens: A hierarchical approach

Tokens are most effective when organized hierarchically. This structure allows you to define global values and then refine them as needed for components, themes, or modes. A hierarchical JSON structure might look like this:

					{
  "global": {
    "color": {
      "primary": "#FF5733",
      "secondary": "#33FF57"
    },
    "typography": {
      "fontSize": {
        "small": "12px",
        "medium": "16px",
        "large": "24px"
      },
      "lineHeight": {
        "default": "1.5"
      }
    },
    "spacing": {
      "small": "8px",
      "medium": "16px",
      "large": "24px"
    }
  },
  "component": {
    "button": {
      "color": {
        "background": "global.color.primary",
        "text": "global.color.secondary"
      },
      "padding": "global.spacing.medium"
    }
  }
}

4. Modes, collections, and themes

The flexibility of a design system often relies on how well it can adapt to different contexts, preferences, or brand identities. Modes, collections, and themes work together to ensure your design tokens provide the necessary adaptability and scalability.

Modes

Modes enable your design system to switch between user preferences or environmental conditions, such as light and dark themes or high-contrast settings for accessibility. By leveraging tokens for mode-specific values, you can create seamless transitions between these variations without duplicating efforts. For example, you might have a token for Background-Color with values that vary depending on the mode (e.g., light mode: #FFFFFF, dark mode: #121212).

Incorporating modes into your token structure not only improves user experience but also streamlines future expansions, such as introducing new modes or customizing for different devices. With modes, your system stays agile and adaptable to changing user needs.

Token collections

Token collections group related tokens into logical sets, simplifying updates and enhancing modularity.

For instance:

  • Color tokens collection: Includes all tokens related to color palettes, like primary, secondary, or gradient tokens.
  • Typography tokens collection: Houses font sizes, weights, and line heights.
  • Spacing tokens collection: Contains padding, margin, and layout spacings.
Colors
Corner Radius
Elevation
Logo
Size
Spacing
Stroke
Typography

This modular approach makes it easier to identify and update specific areas of your design system without affecting unrelated parts. Additionally, token collections can be reused across multiple themes or brands, ensuring consistency while reducing redundancy.

Themes

Image: https://help.figma.com/hc/en-us/articles/18490793776023-Update-1-Tokens-variables-and-styles

Themes integrate token values and modes into a cohesive visual identity tailored to a specific purpose, brand, or product line. A theme could define a brand’s personality through its colors, typography, and component styles, while also accommodating mode variations like light and dark.

Themes work by applying a combination of token collections and mode-specific values to create a distinct look and feel. For example:

  • Brand A’s light theme: Combines light mode tokens with a unique brand color palette.
  • Brand A’s dark theme: Adapts the light theme’s structure with dark mode values.
  • Brand B’s themes: Reuses shared token collections like typography while applying different branding colors.

Centralizing your themes within the token architecture ensures easy updates, scalability, and the ability to support multi-brand systems effectively. Themes act as the final layer of abstraction, delivering a polished and consistent user experience that aligns with your goals.

5. Best practices for advanced theming

Theming can make or break the usability and scalability of a design system. Over the years, I’ve found that a well-executed theming strategy saves time, reduces frustration, and creates a cohesive user experience across platforms. 

Here are my go-to tips for advanced theming, based on lessons learned from real-world projects.

1. Centralize theme management:​

When I manage themes, I ensure there’s always a single source of truth. This could be a JSON file, a design tool like Figma or a specialized token management tool like Token Studio. Centralization makes updating tokens a breeze and ensures everyone—from designers to developers—works with the same set of values. It’s incredible how much confusion you can avoid by having one clear reference point.

2. Document theme structures:

I’ve learned that clear, detailed documentation is a game-changer. When I document themes, I focus on:

  • Breaking down the structure (e.g., base tokens, mode-specific overrides, and component-level tokens).
  • Showing practical examples of how themes are applied.
  • Highlighting naming conventions and guidelines for expanding themes.

I always aim to create documentation that not only aligns the team but also serves as a helpful onboarding resource for new members.

3. Implement early:​

I can’t stress this enough—think about theming early in your project. I’ve been in situations where themes were an afterthought, and the result was expensive and time-consuming refactoring. By considering themes from the beginning, you set the foundation for a scalable system that grows with your product.

4. Test thoroughly:

I test themes across different platforms, devices, and user settings to catch inconsistencies. For example, switching between light and dark modes might reveal contrast issues, or certain token values might not translate well across screen sizes.

I recommend a mix of automated and manual testing. Automated tools are great for catching structural inconsistencies, but manual testing helps ensure a polished, human-centric design.

5. Collaborate:

Theming isn’t a one-person job. I always make it a point to work closely with both designers and developers. For example, when defining token naming conventions, I involve both teams to ensure clarity and usability. Regular check-ins, shared workshops, and annotated examples have helped bridge gaps between design intent and development execution.

Additional insights

  • Dynamic theming:
    When building apps that support live theme switching (like a dark mode toggle), I prioritize performance. Lazy-loading assets or using optimized runtime solutions ensures that theme switching feels seamless for the end-user.
  • Multi-brand flexibility:
    Managing multiple brands? I’ve found that creating a base set of global tokens with brand-specific overrides simplifies the process. This approach allows me to introduce new brands quickly without disrupting the core system.
  • Accessibility:
    Accessibility has always been a priority for me. I test themes with accessibility tools to ensure compliance with standards like WCAG 2.1. This includes checking color contrast and usability for various modes and themes.

6. Figma as the source of truth

Figma is my go-to for managing design tokens effectively, acting as a central source of truth. By leveraging features like variables and Dev Mode, I can streamline the design-to-development workflow:

  • Variables: Organize tokens into clear collections (e.g., Global, Theme-Specific, Component Variables) to mirror the token structure developers use.
  • Dev mode: Developers can inspect elements, view token details, and export CSS or JSON directly, ensuring precise implementation.
  • Annotations: Add notes to clarify token usage (e.g., “This uses the Primary-Button-Background token for light mode”).
  • Collaboration tools: Mention Figma’s commenting and sharing features to enhance real-time collaboration between designers and developers.
  • Version control: Highlight Figma’s ability to maintain version history, which helps track changes in tokens and designs over time.
  • Live prototypes: Briefly touch on how tokens in Figma directly affect live prototypes, making it easier to test design decisions in context.

7. Managing design tokens

1. Token storage

For simple setups, I use JSON to define tokens clearly and ensure compatibility across platforms. A basic structure might look like this:

					{
  "colors": {
    "primary": "#FF5733",
    "secondary": "#33FF57"
  },
  "spacing": {
    "small": "4px",
    "medium": "8px"
  }
}

I sync Figma with tools like Variables Pro | Swap, Import & Export Variables and Export/Import Variables by exporting variables as JSON, transforming them into platform-specific formats. Clear guidelines—like naming conventions (Global.Primary-Color) and documentation—keep token updates structured and collaborative.

2. Version control

Git isn’t just for code; it’s perfect for managing design tokens too. Committing changes to tokens ensures you can track every alteration, allowing for rollbacks if needed and fostering collaboration. I maintain a changelog to document changes, making it easy for teams to stay aligned.

					# Changelog  

## v1.2.0  
- Updated `Primary-Button-Background` to `#FF4500` for better contrast.  

## v1.1.0  
- Added `Secondary-Text-Color` token for UI consistency.

3. Challenges and solutions

Managing tokens effectively comes with its own set of challenges.

Here’s how I address them:

Inconsistency:
  • Solution: Schedule regular audits or implement automated checks to catch inconsistencies. Use tools that can scan your codebase or design files for outdated or misused tokens.
  • Over-complexity:
    Avoid token sprawl by focusing on tokens that genuinely offer value. Use semantic tokens to simplify and reduce the number of tokens needed. Regularly review and prune tokens that don’t contribute significantly to the design system.
  • Adoption issues:
    Educate your team through workshops or documentation on how tokens streamline work, ensuring everyone understands their benefits and correct usage. Early involvement of all stakeholders can promote buy-in.
  • Performance:
    Optimize by minimizing the number of tokens where possible. Consider lazy loading for tokens used in less common scenarios to avoid loading unnecessary data.
  • Conflicts:
    Use version control systems like Git to manage conflicts. Employ clear, hierarchical naming conventions (Brand-Primary-Color vs. Component-Button-Background) to differentiate tokens at a glance. Also, maintain strict versioning to track changes across environments.

Wrap up

My final piece of advice? Start simple. Focus on high-value tokens that have the greatest impact, and grow your system iteratively. A thoughtful, well-maintained token strategy can save time, reduce errors, and keep your designs consistent—no matter how complex things get.

What’s been your experience with design tokens? I’d love to hear about your challenges, successes, or any tips you’ve picked up along the way.

Open for new opportunities and collaboration! Whether it’s a professional collaboration or just a friendly chat, I’m all ears.

Linkedin
Twitter
Dribbble
Behance