Utility: Export Tokens
Export the design tokens (variables) from a Figma file as CSS custom properties, Tailwind config, or JSON.
Purpose
The export tokens utility pulls design tokens (variables) out of a Figma file and converts them into a code-ready format. Use it when you want Figma colors, spacing, and type values in code, or when you have a Figma URL and want its tokens.
Not for a full inventory of the whole design system — see /design:system-overview.
Usage
/design:export-tokensProvide a Figma file key or URL, and optionally a format (css, tailwind, or json; defaults to css).
What It Does
- Identifies the Figma file, extracting the file key from a URL if needed
- Calls
figma_get_variableswith the file key and requested export format - Presents the exported tokens to the user
- Optionally saves the output to a file (
tokens.css,tailwind.tokens.json, ortokens.json, matching the format)
Output
The exported tokens displayed to the user and optionally saved to a file.
MCP Tools Used
figma_get_variables— Fetch design tokens (variables) from a Figma file, in CSS, Tailwind, or JSON format
Utility: Design Review
Create a Figma Slides deck summarizing a component's design journey — research, contract, options, prototype, and test results.
Utility: System Overview
Summarize a Figma file's design system — components, styles, token collections and modes, and page structure — in one structured overview.