Skip to main content

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.

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

​
Workflow (summary)

  1. Open the Figma desktop app (required — the web app can be buggy for exports). Download: 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.