code-to-figmalisted

# Code-to-Figma Skill > **This skill is maintained upstream in [kylebrodeur/code-to-figma](https://github.com/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 <pattern>` | Parse component(s) → `.figma.json` per file | | `scan --watch` | Re-scan on save | | `scan -t <path>` | Custom Tailwind config path | | `scan --validate` | Validate generated JSON | | `plugin-output` | Bundle `.figma.json` files → `plugin-data.json` | | `read --file-key <key>` | Read components from Figma REST API (read-only) | ### Config (`.code-to-figma.json`) ```json { "figmaFileKey": "YOUR_FILE_KEY", "figmaAccessToken": "YOUR_ACCESS_TOKE