Figma Design Tokens

This page explains how to extract design tokens from Figma and produce the JSON token file used to generate a Tailwind config for Sitecopilot themes.

Tools & Plugins

Design Tokens plugin (export JSON): https://github.com/lukasoppermann/design-tokens#design-tokens
Install the plugin in Figma. It generates a single JSON file containing your color, spacing, typography, and other tokens.
Tailwind config generator: a small tool that consumes the tokens JSON and outputs a tailwind.config.js. Example usage (local tool):

generate_tailwindconfig.exe onyxbox-tokens.json

FireJet (export HTML + Tailwind code): https://www.figma.com/community/plugin/1087200717679287673/firejet-export-figma-design-to-code-tailwind-react-vue-svelte-html-typescript
Use the HTML + Tailwind export to generate the theme code and assets.

Open the Figma desktop app (required — the web app can be buggy for exports). Download: https://www.figma.com/downloads/.
Install the Design Tokens plugin and export your tokens to your-theme-tokens.json.
Run the Tailwind config generator against the token file. This produces tailwind.config.js and a report listing problematic variables.
Fix the problematic variables inside Figma (see the report for variable names). Re-export tokens and regenerate until the report is clean.
Use FireJet to export the HTML + Tailwind source for your Figma frames (select HTML TAILWIND in the plugin). Adjust advanced export settings as needed.
Package the generated HTML/CSS and assets; integrate into Sitecopilot theme (see Theming & Template Engine pages).

The token file is canonical — keep it under version control for repeatable builds.
The generator may report variables that reference unsupported formats; fix those in Figma (use plain color values, numbers for spacing, named font families).
We provide three base Figma models compatible with this token system; each model accepts a token set and produces a themed variant of the site template.