Using designtoken.md with Figma Skills & MCP

Generate your token system on designtoken.md

Head to the designtoken.md generator and configure your design system:

• Pick your brand colors and let the generator build full color scales
• Configure typography: font families, sizes, and weights
• Set spacing and border-radius values
• Switch to the designtoken.md tab in the output panel
• Copy the output or download the file

Download as W3C Design Token JSON or CSS custom properties

The generator lets you export your tokens in multiple formats. For Figma MCP integration, choose one:

• W3C JSON format — Structured token data that Figma Variables can import directly
• CSS custom properties — `:root` variables that map directly to Figma's variable system
• designtoken.md — The full markdown reference for documentation and skill usage

All three formats contain the same values — pick the export format that works best with your Figma workflow.

Import tokens into Figma as Variables

In Figma, use the Variables panel to import your exported tokens:

• Open Assets → Variables in your Figma file
• Use Tokens Studio plugin (or manual import) to load your JSON or CSS
• Map exported token names to Figma's variable structure (colors, typography, spacing, radii)
• Your designtoken.md values are now live in Figma as Variables

This single import creates the source of truth for every skill and MCP agent that reads from Figma's get_variables API.

Let Figma MCP agents access your tokens

Once imported, Figma MCP agents can now read your designtoken.md-sourced variables:

• Figma MCP's get_variables call returns your full token system
• Agents like design-system-auditor analyze YOUR tokens, not generic defaults
• Skills that modify components respect your imported variable structure
• Every new design decision flows from your source tokens

Your designtoken.md system becomes the constraint layer that shapes every future agent interaction in Figma.

Build with designtoken.md-sourced tokens

Figma skills that use get_variables or use_figma now operate on YOUR token system:

• design-system-auditor — Validates that your Figma library uses the imported tokens consistently
• generate-library — Creates components using your exact color, typography, and spacing values
• color-harmony — Analyzes your imported color scales for accessibility and contrast
• create-design-system-rules — Generates constraints that reference your imported variables

Every skill sees the same token values, creating a unified design language across all your Figma workflows.

The bigger picture: One token system, four layers

designtoken.md powers an end-to-end design intelligence pipeline:

Generate the source of truth
Colors, typography, spacing, radii
Export as W3C, CSS, or markdown

Serve tokens to agents on the canvas
get_variables returns your system
Agents read what you defined

Validate tokens at runtime
Enforce constraints
Resolve design decisions

Orchestrate the workflow
Install reusable token sets
Compose multi-agent tasks

One token system sourced from designtoken.md, consumed by four different intelligence layers. That's the vision.