> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sitecopilot.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](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](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.

## Workflow (summary)

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

## Notes

* 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.