From figma
Extracts design tokens (colors, spacing, typography) and variables from Figma files via MCP server, generating CSS Custom Properties, TypeScript/JS objects, JSON, Tailwind config, and Style Dictionary formats for design systems.
How this skill is triggered — by the user, by Claude, or both
Slash command
/figma:figma-extract-tokensThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
figma:figma-extract-tokens - Extract design tokens and variables from Figma files
figma:figma-extract-tokens - Extract design tokens and variables from Figma files
Extract design tokens (colors, spacing, typography, etc.) from Figma files and generate token files in various formats (CSS Custom Properties, TypeScript, JSON, Style Dictionary, Tailwind config).
You are tasked with extracting design tokens and variables from a Figma file using the Figma MCP server. This command analyzes Figma variables and variable collections to generate structured token files for your design system.
Connects to the Figma Desktop MCP server to access Figma variables API. Extracts all variable types (colors, numbers, strings, booleans) and organizes them into primitive and semantic token hierarchies. Supports multiple output formats and theming variations.
Access the Figma File:
Extract Variables:
Analyze Token Structure:
Generate Token Files:
Provide Documentation:
/**
* Design Tokens - Extracted from Figma
* File: [Figma file name]
* Generated: [date]
*/
:root {
/* Colors - Primitives */
--color-blue-500: #3b82f6;
--color-gray-900: #111827;
/* Colors - Semantic */
--color-primary: var(--color-blue-500);
--color-text: var(--color-gray-900);
/* Spacing */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
/* Typography */
--font-family-base: 'Inter', sans-serif;
--font-size-body: 1rem;
--line-height-body: 1.5;
}
/**
* Design Tokens - Extracted from Figma
* File: [Figma file name]
* Generated: [date]
*/
export const tokens = {
colors: {
primitives: {
blue500: '#3b82f6',
gray900: '#111827',
},
semantic: {
primary: '#3b82f6',
text: '#111827',
},
},
spacing: {
xs: '0.25rem',
sm: '0.5rem',
md: '1rem',
},
typography: {
fontFamily: {
base: "'Inter', sans-serif",
},
fontSize: {
body: '1rem',
},
lineHeight: {
body: 1.5,
},
},
} as const;
export type Tokens = typeof tokens;
{
"color": {
"primitive": {
"blue": {
"500": { "value": "#3b82f6" }
},
"gray": {
"900": { "value": "#111827" }
}
},
"semantic": {
"primary": { "value": "{color.primitive.blue.500}" },
"text": { "value": "{color.primitive.gray.900}" }
}
},
"spacing": {
"xs": { "value": "0.25rem" },
"sm": { "value": "0.5rem" },
"md": { "value": "1rem" }
}
}
Token Naming:
Token Organization:
Token Values:
Maintenance:
After extracting tokens, also provide:
Token Documentation:
Integration Guide:
Validation:
npx claudepluginhub thebushidocollective/han --plugin figmaExport Figma variables to design token files in DTCG, CSS custom properties, Tailwind v4/v3, SCSS, TypeScript, JSON, Style Dictionary, or Tokens Studio. Works on any Figma plan via Plugin API.
Extracts design tokens including colors, typography, and spacing from Figma files via REST API. Converts to CSS custom properties, JSON, or Tailwind config for design-to-code pipelines.
Syncs design tokens between code and Figma using Variables API or Tokens Studio plugin. Use when establishing Figma-to-code workflows, exporting Figma tokens, or setting up design-development handoff.