Code To Figma

Code-to-Figma Skill

> This skill is maintained upstream in kylebrodeur/code-to-figma. > Install the authoritative version with: > ``bash > npx skills add kylebrodeur/code-to-figma > `` > The upstream skill contains the complete command reference, supported patterns, troubleshooting, and plugin setup. After install it loads automatically alongside ux-collab.

---

Quick Reference

Workflow

1. code-to-figma scan src/components/Button.tsx
   → .figma/Button.figma.json

2. code-to-figma plugin-output -i .figma -o plugin-data.json
   → plugin-data.json  (all components bundled)

3. Figma Desktop → Plugins → Development → Import plugin from manifest…
   → select packages/plugin/manifest.json from the code-to-figma repo

4. Plugin UI → Load file → plugin-data.json → check components → Build selected
   → Frames appear on page "code-to-figma"

Commands

| Command | Purpose | |---------|---------| | init | Create .code-to-figma.json config | | scan | Parse component(s) → .figma.json per file | | scan --watch | Re-scan on save | | scan -t | Custom Tailwind config path | | scan --validate | Validate generated JSON | | plugin-output | Bundle .figma.json files → plugin-data.json | | read --file-key | Read components from Figma REST API (read-only) |

Config (.code-to-figma.json)

{
  "figmaFileKey": "YOUR_FILE_KEY",
  "figmaAccessToken": "YOUR_ACCESS_TOKEN",
  "componentGlob": "src/components/**/*.tsx",
  "tokenMapping": {
    "--color-primary": "primary/500",
    "--color-secondary": "secondary/500"
  },
  "outputDir": ".figma",
  "framework": "react",
  "styling": "tailwind",
  "parserOptions": {
    "extractVariantsFromProps": true,
    "detectClassNameUtilities": true,
    "extractSpacing": true
  }
}

Integration with ux-collab

Add to .ux-collab.md:

codeToFigma:
  enabled: true
  cliCommand: "npx @kylebrodeur/code-to-figma"
  onBuild: true

During the SYNC phase: scan built components → plugin-output → import in Figma Desktop.

Figma Desktop Plugin Setup (one-time)

The plugin ships as source in the code-to-figma repo — it is not on the Figma Community marketplace.

1. Clone or download kylebrodeur/code-to-figma
2. Open Figma Desktop (plugin API unavailable in browser)
3. Plugins → Development → Import plugin from manifest…
4. Select packages/plugin/manifest.json from the repo
5. Plugin appears under Plugins → Development → code-to-figma

Figma MCP (optional — design system read)

To read tokens/components from Figma files during the SPECIFY/VERIFY phases, configure the Figma MCP:

// .mcp.json
{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@figma/mcp"],
      "env": { "FIGMA_API_KEY": "your-api-key" }
    }
  }
}

Requires Figma Pro. See [figma-integration.md](../ux-collab/figma-integration.md) for available tools.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: kylebrodeur
• Source: kylebrodeur/ux-collab
• License: MIT
• Homepage: https://github.com/kylebrodeur/ux-collab

Install and usage instructions live in the source repository linked above.