Import design tokens from any codebase into Figma as variables. Scans a project for colors, typography, spacing, corner radius, shadows, and opacity tokens — then creates Figma variable collections via figma-console MCP. Works with CSS, Tailwind, shadcn/ui, SwiftUI,
Installs just this skill. Get the whole plugin for auto-invocation.
⚡ How it fires
How this skill gets triggered: by you, by Claude, or both.
Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/figma-import
👁️ Context preview
The summary Claude sees to decide when to auto-load this skill.
Import design tokens from any codebase into Figma as variables. Scans a project for colors, typography, spacing, corner radius, shadows, and opacity tokens — then creates Figma variable collections via figma-console MCP. Works with CSS, Tailwind, shadcn/ui, SwiftUI,
---name: figma-import
description: "Import design tokens from any codebase into Figma as variables. Scans a project for colors, typography, spacing, corner radius, shadows, and opacity tokens — then creates Figma variable collections via figma-console MCP. Works with CSS, Tailwind, shadcn/ui, SwiftUI, Kotlin/Compose, Sass, Less, and design token JSON files. Use when user says 'import tokens to Figma', 'sync tokens to Figma', 'create Figma variables from code', 'push tokens to Figma', or 'figma import'."
---# Figma Import — Code Tokens to Figma Variables
You import design tokens from a codebase into Figma as organized variable collections. You support any project type — web, iOS, Android, cross-platform.
## Prerequisites
Before starting, verify:
1. **figma-console MCP is connected** — run `figma_get_status` to check. If it fails, tell the user: "The Figma desktop plugin bridge needs to be running (localhost:9222). Open Figma desktop and start the Console MCP plugin."
2. **A Figma file is open** — the variables will be created in the currently active file.
3. **VPN is off** — if connections fail, ask the user if their VPN is on (common cause).
## Workflow
### Phase 1: Detect & Scan
1. **Detect the project stack** by checking files in the working directory:
| Signal Files | Stack | Token Sources |
|---|---|---|
| `Package.swift`, `*.xcodeproj` | SwiftUI/iOS | Color extensions, Asset.xcassets, Font definitions, hardcoded padding/radius values |
5. **Ask the user to confirm** before pushing to Figma:
- "These 32 tokens will be created as Figma variables. Want me to proceed?"
- "Should I organize them as one collection ('Design Tokens') or separate collections per category ('Colors', 'Spacing', etc.)?"
- "Does this project have light/dark modes? If so, I'll create mode variants."
### Phase 3: Push to Figma
6. **Check for existing variables** — run `figma_get_variables` first. If collections with the same names exist, warn the user: "A 'Colors' collection already exists. Should I skip it, merge into it, or create a new one?"
7. **Create variables in Figma** using the batch tools:
**For a fresh setup (no existing collections):**
Use `figma_setup_design_tokens` for each collection (up to 100 tokens per call):
```
figma_setup_design_tokens({
collectionName: "Colors",
modes: ["Default"], // or ["Light", "Dark"] if modes detected
| Typography (families) | Font family names | STRING |
| Corner Radius | Border radius values | FLOAT |
| Shadows | Shadow values | STRING (Figma can't natively store shadow composites as variables) |
| Opacity | Opacity values | FLOAT |
8. **If more than 100 tokens in a category**, split into multiple batch calls of 100 each.
9. **Take a screenshot** after creating variables to verify they appear correctly:
- Run `figma_get_variables` to confirm creation
- Report the results: "Created 32 variables across 4 collections: Colors (14), Spacing (10), Typography (5), Corner Radius (3)"
### Phase 4: Summary
10. **Report what was created:**
```
Import complete:
- Colors: 14 variables in "Colors" collection
- Spacing: 10 variables in "Spacing" collection
- Typography: 5 variables in "Typography" collection
- Corner Radius: 3 variables in "Corner Radius" collection
Total: 32 variables created
Source: Example iOS app (/path/to/project/ios/)
Target: [Figma file name]
```
11. **Suggest next steps:**
- "Want me to generate a visual documentation page in Figma showing all the tokens?" (Phase 5)
- "Run `/figma-extract` to verify the variables by exporting them back"
- "You can now bind these variables to your Figma components"
### Phase 5: Generate Documentation (Optional)
If the user wants a visual reference page in Figma:
12. **Create a "Design Tokens" page** in the current file using `figma_execute`:
- Check if the page already exists to avoid duplicates
- Use `await figma.setCurrentPageAsync(page)` (not `figma.currentPage = page`)
- Use `await figma.getNodeByIdAsync(id)` (not `figma.getNodeById(id)`)
13. **Look up variable IDs** before building visuals. Run `figma_get_variables` to get the variable IDs for each collection. You need these to bind fills and values to the actual variables (not hardcoded hex).
14. **Build sections** inside a main frame with auto-layout (vertical, 48px gap, 60px padding):
- **Colors** — Circle swatches (48×48) in a wrap grid with name, hex value, and usage context below each
- **Spacing** — Horizontal bars at proportional widths with label (name), value (Xpt), and visual bar
- **Corner Radius** — Rounded rectangles at increasing sizes showing each radius value
- **Opacity** — Squares with black fill at each opacity level, labeled with name and percentage
- **Typography** — Text samples at each font size with weight name and usage context
15. **Bind variables to every visual element (critical).** The doc page is a living reference — every visual must use the actual Figma variable, not a hardcoded value. When a variable changes, the doc updates automatically.
**Principle:** If a variable exists for a value, bind it. No hardcoded hex, px, or pt values on elements that represent tokens.
17. **Take a screenshot** of the completed page to verify it renders correctly and variables are bound (hovering a swatch in Figma should show the variable name, not a raw hex).
## Token Naming Conventions
When naming tokens, follow these rules:
1. **Use the original name when available** — if the code defines `$color-primary`, name it `colors/primary`
2. **For unnamed values (hardcoded)**, infer a semantic name from context:
- A padding of `8` used everywhere → `spacing/sm`
- A corner radius of `12` on cards → `radius/card`
- A color used on checkboxes → `colors/checkbox`
3. **Group with forward slashes** — Figma displays these as folders: `colors/primary`, `colors/secondary`
4. **Use lowercase kebab-case** — `spacing/button-padding`, not `spacing/ButtonPadding`
5. **For SwiftUI system colors** (`.blue`, `.red`, `.green`), use the resolved hex value and name them `colors/system-blue`, `colors/system-red`, etc. Look up the standard iOS system color hex values.
## Handling Edge Cases
- **SwiftUI semantic colors** (`.primary`, `.secondary`, `.tertiary`): These adapt to light/dark automatically. Create two modes in Figma with the resolved light and dark values.
- **SwiftUI system colors** (`.blue`, `.red`): Look up the standard iOS 17+ hex values for both appearances.
- **Tailwind arbitrary values** (`text-[#1a1a2e]`): Skip these — they're one-offs, not tokens.
- **Duplicate values**: If the same hex color appears with different names, keep both — they represent different semantic roles.
- **No tokens found**: If a scan returns very few tokens, tell the user: "This project doesn't have many centralized tokens. Want me to scan all view files for hardcoded values instead? This will find more tokens but they may be less organized."
## Important Notes
- **Never modify source code** — this skill only reads from code and writes to Figma.
- **Always confirm before creating** — show the user what will be created and get approval.
- **Batch for performance** — always use `figma_setup_design_tokens` or `figma_batch_create_variables`, never create variables one at a time.
- **Colors must be hex** — the Figma MCP only accepts hex format for COLOR variables.
- **Figma Enterprise not required** — the figma-console MCP (plugin bridge) works on any Figma plan, unlike the REST API which requires Enterprise for variables.
