Corex UI
Pagination
Next SSG
LLMs

# Figma Guide

In this guide, we’ll learn how to work with Figma and Corex UI Design Tokens using the Tokens Studio plugin.

Tokens Studio for Figma is the bridge between your Figma designs and the design tokens generated by Corex UI.
It allows two-way synchronization between your token files and your design styles — keeping design and code perfectly aligned.

You can learn more about the plugin in the Official Tokens Studio documentation .

# Tokens File

You can find the Figma-compatible tokens file inside the Corex UI GitHub repository in the @corex-ui/design package:

https://github.com/corex-ui/corex-ui/blob/main/packages/design/tokens/tokens.json

This file follows the Tokens Studio schema, with organized groups for colors, typography, spacing, radii, and themes.

If you are using Tokens Studio Pro you can also find the multi files tokens
https://github.com/corex-ui/corex-ui/blob/main/packages/design/tokens/multi

# Installation

  1. Install Tokens Studio for Figma from the Figma Community .
  2. Open or create a new Figma design file.
  3. Launch the plugin via
    Right-click → Plugins → Tokens Studio.

# Connect Your Token File

There are two main ways to connect your Corex UI tokens:

# Option 1 — Local JSON File (Manual)

  1. Open Tokens Studio inside Figma.
  2. Go to the Settings tab.
  3. Choose Storage Type → File.
  4. Click Load from File and select your downloaded tokens-figma.json.
  5. Your tokens will now appear in the left panel, grouped by category (color, typography, spacing, etc.).

# Option 2 — GitHub Sync (Recommended)

If your tokens are stored in a GitHub repository (e.g., your design system or Corex UI fork):

  1. In Tokens Studio, go to Settings → Storage → GitHub.
  2. Connect your GitHub account.
  3. Enter the repository URL (for example: https://github.com/user/my-corex-ui).
  4. Set the file path:
    packages/design/tokens/tokens.json
  5. Click Connect.
    Tokens Studio will now stay in sync with your remote token file automatically.

Import Result

# Apply Tokens in Figma

Once your tokens are loaded, you can:

  • Apply color tokens to fills, strokes, or text.
  • Apply typography tokens to text layers.
  • Use spacing and radius tokens in auto-layouts.
  • Use themes to switch between light and dark or brand variations.

You can also link tokens to Figma styles:

  1. Go to the Sync tab in Tokens Studio.
  2. Click Link Figma Styles.
  3. Select which groups to link (e.g., Colors, Typography).
  4. Tokens Studio will automatically create or update your styles.

# Export Back to Code

After editing your tokens in Tokens Studio:

  1. Open Settings → Storage.
  2. Click Push Changes (if using GitHub sync).
  3. Your JSON file will be updated in your repository — ready to use in your Corex UI or Style Dictionary build.

# Tips

Two-Way Sync
Tokens Studio can both read and write tokens — perfect for design + dev collaboration.

Best Practice
Always store your tokens in GitHub rather than local files — it allows design updates to flow automatically to your build pipeline.

Now your workflow between Corex UI, Figma, and Tokens Studio is fully connected and production-ready