How to Implement Design Tokens in Figma and Sketch for Seamless Dev Collaboration

Token Implementation in Design Tools

Building on the theoretical part of the series, this article shows how to apply Design Tokens in design tools and collaborate with developers.

Token Types and Tool‑Specific Strategies

Tokens are divided into style, component, template, and file tokens. Because Figma and Sketch have different capabilities, separate implementation plans are provided.

1. Style Token

The core task is to find suitable carriers for each style token type. Style tokens include Paint, Typography, Layer Style, Dimension, and Transition tokens.

Paint Token

Paint tokens consist of color and gradient tokens.

In Figma, color style is used for both color and gradient tokens, but aliases are not supported, so each color style must point to a concrete value.

In Sketch, color variable serves as the carrier for color tokens, requiring enumeration of all solid colors without duplication. Gradient tokens use preset , which does not support color variable references, so values must be entered manually.

Typography Token

Typography tokens are composite tokens containing font family, size, weight, letter spacing, and line height.

Both Figma and Sketch use text style as the carrier.

Sketch’s text style includes additional properties (text color, text alignment) compared to Figma.

Layer Style Token

Layer style tokens combine Paint, Stroke, Shadow, and Blur tokens.

Figma lacks a native layer style concept, so designers must manually combine paint, stroke, and effect to emulate it. Shadow and blur tokens use effect as the carrier; stroke tokens are not currently supported.

Sketch supports packing paint, stroke, shadow, and blur into a layer style carrier.

Dimension Token

In Figma, layout grid is used as the carrier; the grid size corresponds to the base unit of the spatial system.

Sketch does not currently support dimension tokens.

Transition Token

Transition tokens may include duration, delay, and cubic‑bezier timing function.

Both Sketch and Figma lack native support for storing reusable transition tokens. Designers are advised to document them and provide parameters for CSS, iOS, and Android.

Handling Multiple Modes

Designers often need to produce assets for light, dark, high‑contrast, sub‑brand, or domain‑specific modes. The recommended approach is to keep separate style libraries for each mode and decouple them from component libraries.

In Figma, swapping the light mode style library with the dark mode library generates a dark mode component library.

In Sketch, using swap color libraries with a prepared dark mode variable library achieves the same result.

Alternative methods include using puzzle tokens or symbol swapper to generate dark mode assets from light mode sources.

Handling Multiple Business Needs

When a sub‑business requires styles not present in the base library, a separate business style library can be created, following the same naming conventions to avoid conflicts. Once multiple businesses adopt the style, it can be merged back.

For overrides, the business library can redefine existing tokens using identical names, allowing designers to communicate replacement decisions clearly to developers.

Component Token

Component management aims to align design logic with code logic while maintaining designer efficiency.

Main Component & Instance

A Main component is the source; an Instance is a copy used in designs.

Component Set

A component set contains multiple variants of a component. Typically, one component corresponds to one component token, but developers may treat variants as separate components, so designers may split them accordingly.

Property and Variant

Properties distinguish variants within a component set. Figma supports four property types: variant, boolean, instance swap, and text.

Boolean property: toggles visibility (true/false).

Instance swap property: replaces instances.

Text property: modifies text.

Naming Conventions for Properties and Values

Follow Design Token naming rules and ensure consistency, e.g., use the same part of speech, Arabic numerals, avoid actual parameter values, use "Show XX" for booleans, "XX Only" for exclusive elements, "On XX" for contextual usage, "+ XX" for additions, and "XX + XX" for composites.

Sorting Properties and Values

Properties can be ordered spatially (top‑to‑bottom, left‑to‑right) or logically (size before color). Values can be sorted by numeric scale (S, M, L) or usage frequency (default, pressed, focused).

Converting Variant Property to Boolean Property

If a variant property has only two values, rename them to "True"/"False" so the UI shows a switch instead of a dropdown. Ensure the conversion does not lose meaning.

Internal Composition

Component internal layers, properties, and values should mirror code structures. Example code snippets illustrate how a FormGroup component is composed.

<code><span>FormGroup/index.js</span>
<span>&lt;FormGroup&gt;</span>
    <span>&lt;Input label="Email Address" type="email" required /&gt;</span>
<span>&lt;/FormGroup&gt;</span>

<span>Input/index.js</span>
<span>&lt;div id={id} className={classes} {...attributes}&gt;</span>
    {label && (<span>&lt;Label htmlFor={id} {...labelProps}&gt;{label}&lt;/Label&gt;</span>)}
    {children}
<span>&lt;/div&gt;</span></code>

Internal Interaction

Interactive components (e.g., switches) can be created to prototype behavior.

Responsive Design

Use auto layout and resizing constraints for components that need to adapt to size changes, focusing on directions that actually vary in practice.

Collaboration with Development

After managing design tokens in the design tool, hand them off to developers. Both Sketch and Figma support native developer handoff. For custom workflows, export token files via plugins.

Exporting Token Files

Sketch : Only color variables can be exported natively; use the Design Token Sketch Plugin for other types.

Figma : No native export; use third‑party plugins such as "figma Token".

Exporting Component and Template Tokens

Provide design guidelines, specifications, and component property documentation to developers. Component property docs are crucial for tokenizing components.

Version Management of Token Files

Use semantic versioning

[Major].[Minor].[Patch]

. Maintain a changelog with sections for new features, modifications, and deprecated items.

<code>Design Token Documentation Update ([date]):
🎉  What’s New
• ...
• ...
🛠  What’s Modified
• Bug fix for ...
⚰️  What’s Moved to Graveyard
• ...</code>

The recommendations may need adaptation to specific team contexts.

Design tokens are a means to achieve more scientific and efficient design processes.

References

Design Tokens Community Group. (2022). Design Tokens Format Module.

Thomas Lowry. Typography systems in Figma.

Ale Muñoz. (2018). Do more with Data: Building a Data Supplier plugin for Sketch.

Lukas Oppermann. (2021). Building better products with a design token pipeline.

Nathan Curtis. (2016). Tokens in Design Systems.

John Choura. Stack mirroring: Designing for code and coding for design.

Computer Hope. (2021). What is a Boolean?

Facebook Inc. Components and Props – React.

Hoffman, C. (2021). What Is an API, and How Do Developers Use Them?