███████╗██╗ ██████╗ ███╗   ███╗ █████╗
██╔════╝██║██╔════╝ ████╗ ████║██╔══██╗
█████╗  ██║██║  ███╗██╔████╔██║███████║
██╔══╝  ██║██║   ██║██║╚██╔╝██║██╔══██║
██║     ██║╚██████╔╝██║ ╚═╝ ██║██║  ██║
╚═╝     ╚═╝ ╚═════╝ ╚═╝     ╚═╝╚═╝  ╚═╝

# Add remote Figma MCP server to Claude Code
claude mcp add --transport http figma \
  https://mcp.figma.com/v1/mcp \
  -H "X-Figma-Token: ${FIGMA_ACCESS_TOKEN}"

{
  "mcpServers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/v1/mcp",
      "headers": {
        "X-Figma-Token": "${FIGMA_ACCESS_TOKEN}"
      }
    }
  }
}

claude mcp add figma -- npx -y figma-developer-mcp \
  --figma-api-key=${FIGMA_ACCESS_TOKEN} \
  --stdio

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=${FIGMA_ACCESS_TOKEN}",
        "--stdio"
      ]
    }
  }
}

npm install axios  # or use fetch

const FIGMA_TOKEN = process.env.FIGMA_ACCESS_TOKEN!;
const FILE_KEY = "your-file-key"; // from figma.com/design/{fileKey}/...

// Get file structure
const file = await fetch(`https://api.figma.com/v1/files/${FILE_KEY}`, {
  headers: { "X-Figma-Token": FIGMA_TOKEN },
}).then((r) => r.json());

// Get specific node
const nodeId = "1:23"; // from URL param node-id=1-23
const nodes = await fetch(
  `https://api.figma.com/v1/files/${FILE_KEY}/nodes?ids=${nodeId}`,
  { headers: { "X-Figma-Token": FIGMA_TOKEN } }
).then((r) => r.json());

// Export node as PNG
const images = await fetch(
  `https://api.figma.com/v1/images/${FILE_KEY}?ids=${nodeId}&format=png&scale=2`,
  { headers: { "X-Figma-Token": FIGMA_TOKEN } }
).then((r) => r.json());

console.log(images.images[nodeId]); // URL to the exported PNG

# Required
FIGMA_ACCESS_TOKEN=figd_...         # Personal access token from Figma settings

# Optional for automation scripts
FIGMA_FILE_KEY=...                  # Default file key for automation
FIGMA_TEAM_ID=...                   # Team ID for shared library access

Implement the Figma design at URL or node: $ARGUMENTS

1. Use the Figma MCP tool `get_design_context` with the file key and node ID extracted from $ARGUMENTS
2. Use `get_screenshot` to see the visual
3. Generate a TypeScript React component that matches the design exactly:
   - Use Tailwind CSS for styling
   - Extract all colors as CSS variables or Tailwind tokens
   - Make it responsive
   - Add proper TypeScript props interface
4. Write the component to the appropriate file in `src/components/`
5. Create a Storybook story for it
6. Report the component code and any design tokens used

// Button.figma.tsx — Code Connect definition
import figma from "@figma/code-connect";
import { Button } from "./Button";

figma.connect(Button, "https://www.figma.com/design/[FILE_KEY]?node-id=[NODE_ID]", {
  props: {
    variant: figma.enum("Variant", {
      Primary: "primary",
      Secondary: "secondary",
      Destructive: "destructive",
    }),
    disabled: figma.boolean("Disabled"),
    label: figma.string("Label"),
  },
  example: ({ variant, disabled, label }) => (
    <Button variant={variant} disabled={disabled}>{label}</Button>
  ),
});

# Publish Code Connect mappings to Figma
npx figma connect publish

# .github/workflows/design-tokens.yml
name: Sync Figma Tokens
on:
  schedule:
    - cron: "0 9 * * 1"   # Every Monday morning
  workflow_dispatch:

jobs:
  sync:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '22' }
      - name: Fetch design tokens
        env:
          FIGMA_ACCESS_TOKEN: ${{ secrets.FIGMA_ACCESS_TOKEN }}
          FIGMA_FILE_KEY: ${{ secrets.FIGMA_FILE_KEY }}
        run: node scripts/sync-tokens.js
      - name: Commit updated tokens
        run: |
          git config user.name "Design Sync Bot"
          git config user.email "noreply@figma.com"
          git add src/tokens/
          git diff --staged --quiet || git commit -m "chore: sync Figma design tokens"
          git push