Skip to main content

N1-04 · Tokens in Figma — day-to-day workflow

Context​

You know what tokens are and what they are for. Now you need to use them in Figma — your daily work environment.

This tutorial walks through the full flow: how tokens arrive in Figma, how to apply them to fills, paddings, and text, and what to do when the right token seems not to exist.

How tokens arrive in Figma​

Tokens are not created in Figma. They are generated by the engine and delivered to Figma in JSON format. The Tokens Studio plugin reads those files and converts them into native Figma Variables.

The flow always goes in this direction — never the other way:

engine (config) → JSON files → Tokens Studio → Figma Variables

When a token changes in the system (for example, the brand's primary color), the JSON file is regenerated. Tokens Studio updates the Variables. Every component using that token updates automatically.

Part 1 — Loading tokens​

What you need​

  • Figma with the design file open
  • Tokens Studio for Figma plugin installed
  • Access to the theme JSON file (provided by the DS team or System Designer)

1.1 — Opening Tokens Studio​

Open the plugin via Plugins → Tokens Studio for Figma.

[PRINT N1-04-01]
Figma Plugins menu open, with "Tokens Studio for Figma" highlighted.

1.2 — Loading the JSON file​

On the Tokens Studio home screen, click Settings (gear icon) → Add New Storage → Local/URL.

Paste the path or URL of the theme JSON file — for example, aplica_joy-light-positive.json.

[PRINT N1-04-02]
Tokens Studio panel open on the Settings tab, with the storage configuration field filled in.

1.3 — Syncing native Figma Variables​

After loading the JSON:

  1. In the Sets tab, select the theme set (e.g., aplica_joy-light-positive)
  2. Click the Figma Variables icon (diamond icon with arrows)
  3. Select Create/Update Variables

The plugin will create Variable collections organized by layer. The process takes a few seconds.

[PRINT N1-04-03]
Tokens Studio with set selected and "Create/Update Variables" action highlighted.

1.4 — Confirming the created collections​

After syncing, open Figma Variables via the Assets panel (diamond icon in the right sidebar). You will see automatically created collections.

The main collections are:

  • semantic — all interface tokens (the layer you will use)
  • foundation — the short aliases (bg.primary, txt.body)
  • brand, mode, surface — internal layers (do not use directly in components)

[PRINT N1-04-04]
Figma Variables panel with collections created by Tokens Studio. "foundation" collection expanded showing some aliases.

Part 2 — Applying tokens to color​

2.1 — Applying a color token to a fill​

Create a rectangle. In the properties panel on the right, click the fill color (the colored square).

In the color window, switch to the Libraries tab or click the diamond icon (Variables) — the interface varies slightly depending on the Figma version.

[PRINT N1-04-05]
Color selection window with the Variables icon (diamond) visible and highlighted, before opening the variable picker.

Click the Variables icon. The variable picker appears. Navigate to the foundation → bg collection to see background aliases.

[PRINT N1-04-06]
Variable picker showing the foundation → bg collection expanded, with background options listed.

After selecting foundation.bg.primary, the rectangle's fill takes on the token's color. A diamond icon appears next to the color value in the panel, indicating it is bound to a variable.

[PRINT N1-04-07]
Rectangle with fill bound to a variable — diamond icon and token name visible in the Fill panel.

2.2 — Using color tokens for text (the txtOn pair)​

Create text on top of the rectangle. The text color token must be the matching pair for the background.

Rule: if the background uses foundation.bg.primary, the text should use foundation.txt.on-primary — not foundation.txt.body.

[PRINT N1-04-08]
Variable picker open for the text fill, foundation → txt collection, with "on-primary" highlighted as the correct choice for text on bg.primary.

Part 3 — Applying tokens to spacing​

3.1 — Padding via Auto Layout​

Select a frame with Auto Layout. In the properties panel, click the diamond icon next to the horizontal or vertical padding field.

[PRINT N1-04-09]
Frame with Auto Layout selected, properties panel showing padding fields with the variable icon highlighted.

Click the diamond. The variable picker opens. Navigate to foundation → spacing (or semantic → dimension depending on how the theme was configured).

[PRINT N1-04-10]
Variable picker for padding with foundation → spacing collection expanded and size options visible.

After binding, the padding field shows the diamond icon and the value corresponding to the token.

[PRINT N1-04-11]
Frame with padding bound to a variable — diamond icon and token name visible in the Auto Layout panel.

Part 4 — Applying typography styles​

Composite typography styles are applied differently — not as individual variables, but as Figma Text Styles.

Select a text element. In the properties panel, click the name of the current style (where the font name appears) to open the style picker.

[PRINT N1-04-12]
Text Styles picker open with the system's style groups visible: Heading, Display, Content, Action, Code.

After selecting the style, the element's typography automatically adopts the correct family, size, weight, and line height.

Part 5 — Switching modes (light/dark)​

With variables bound, switching between light and dark is instant.

Select the frame or page containing the component. In the properties panel, locate the Layer or Frame section. Click Change variable mode (button with diamond/arrow icon).

[PRINT N1-04-13]
Variable Mode picker in the properties panel, with Light and Dark options visible.

[PRINT N1-04-14]
The same component displayed in Light Mode (left) and Dark Mode (right) — identical layout, colors adapted automatically.

Part 6 — What to do when the right token doesn't exist​

Sometimes you look for a token and can't find exactly what you need. There is a correct order for resolving this:

Step 1 — Look in Foundation before Semantic​

Foundation has simple aliases (bg.primary, txt.body). Before going to Semantic, check whether the shortcut already exists.

Step 2 — If it's not in Foundation, look in Semantic​

Semantic has all tokens. Use the variable picker and navigate the semantic collection. The token name describes its purpose: semantic.color.interface.function.primary.normal.background.

Step 3 — If it's not in Semantic, talk to the System Designer​

The token you need may not exist yet. This is valuable information — it means the system needs to grow in that area.

Never do this:

  • Use a loose hex in place of the missing token
  • Create a variable in Figma manually
  • Use a token from another layer (Brand, Mode, or Surface) directly

Creating a loose hex or a manual variable is the equivalent of breaking the system's contract. On the next update, that value will be left behind while everything around it changes.

[PRINT N1-04-15]
Comparison in the Fill panel: on the left, a loose hex without binding (wrong); on the right, a bound variable with token name (correct).

Try it yourself​

You need to create a simple informational banner in Figma:

┌─────────────────────────────────────────────┐
│  ℹ  Your request is under review.           │
└─────────────────────────────────────────────┘

Using only what you learned in this tutorial:

  1. Create a frame with Auto Layout
  2. Apply the correct background token for an informational banner (hint: feedback.info)
  3. Apply the correct text token for text on that background
  4. Set horizontal and vertical padding with spacing tokens
  5. Apply the correct typography style for the text (not Heading or Display)
  6. Switch to Dark Mode — the banner should adapt without any edits

Expected result:

  • Background: semantic.color.interface.feedback.info.default.background or foundation.bg.feedback.info
  • Text: the txtOn corresponding to the background level used
  • Padding: spacing.small (24px) horizontal, spacing.micro (8px) vertical
  • Typography: style from the Content group (e.g., body_small or label)
  • Dark mode: both colors switch automatically without manual editing

Checkpoint​

By the end of this tutorial you should know:

  • How tokens arrive in Figma (engine → JSON → Tokens Studio → Variables)
  • How to open the variable picker from a color or spacing field
  • The difference between the Foundation collection (shortcuts) and Semantic (complete)
  • How to use the bg + txtOn pair correctly
  • How to bind spacing tokens to padding fields in Auto Layout
  • How to apply composite typography styles
  • How to switch between Light and Dark Mode using Variable Modes
  • What to do (and what never to do) when the right token doesn't exist

Next step​

N1-05 · Accessibility by design

You can now apply tokens in Figma with confidence. The next tutorial explains why using the correct token pairs is not just consistency — it is what guarantees automatic accessibility for every user.

Consolidated list of required screenshots​

IDWhereWhat to capturePriority
N1-04-01Part 1.1Plugins menu → Tokens Studio highlightedHigh
N1-04-02Part 1.2Tokens Studio → Settings → Add New StorageHigh
N1-04-03Part 1.3Tokens Studio → Sets tab → Create/Update Variables actionHigh
N1-04-04Part 1.4Figma Variables with created collections, foundation expandedHigh
N1-04-05Part 2.1Color window with Variables icon highlightedHigh
N1-04-06Part 2.1Variable picker, foundation → bg expandedHigh
N1-04-07Part 2.1Fill panel with diamond icon + token nameHigh
N1-04-08Part 2.2Variable picker for text, foundation → txt, on-primary highlightedHigh
N1-04-09Part 3.1Auto Layout frame, padding field with variable iconMedium
N1-04-10Part 3.1Variable picker, foundation → spacing expandedMedium
N1-04-11Part 3.1Auto Layout panel with padding bound to variableMedium
N1-04-12Part 4Text Styles picker with Heading/Display/Content/Action/Code groupsHigh
N1-04-13Part 5Variable Mode picker with Light/Dark optionsHigh
N1-04-14Part 5Component side by side in Light and Dark ModeHigh
N1-04-15Part 6Comparison: loose hex vs bound variable in Fill panelHigh

Total: 15 screenshots. 12 high priority, 3 medium.

References​