f2c

Convert Figma components to production-ready React/TypeScript/Tailwind/CVA code using Claude.

How it works

f2c has two modes:

• REST API mode (default) — fetches the Figma node JSON and an optional rendered PNG via the Figma REST API, sends them to Claude, and writes a .tsx file to your output directory.
• MCP mode (--mcp) — connects Claude directly to the Figma Dev Mode MCP server running in the Figma desktop app. No Figma token needed, no rate limiting.

Generated components use TypeScript, Tailwind CSS for styling, and Class Variance Authority for variants.

Requirements

• Node.js 18+
• An Anthropic API key
• REST API mode only: a Figma personal access token
• MCP mode only: Figma desktop app open with Dev Mode enabled

Installation

npm install -g @vera-locale/f2c

Or run without installing:

npx @vera-locale/f2c <command>

Environment variables

| Variable | Required | Description | |---|---|---| | ANTHROPIC_API_KEY | Yes | Anthropic API key used to call Claude | | FIGMA_TOKEN | REST API mode only | Overrides figma.token from the config file |

Store them in a .env file at the root of your project — f2c loads it automatically.

Commands

f2c init

Interactively creates an f2c.config.json in the current directory.

f2c init

Prompts for:

• Figma personal access token
• Figma file ID (found in the file URL: figma.com/design/<FILE_ID>/...)
• Output directory for generated components (default: src/components)

f2c generate

Generates components from Figma using the config file.

f2c generate [options]

| Option | Description | |---|---| | -n, --node-id <id> | Figma node ID to convert (overrides nodeIds in config) | | -o, --output <dir> | Output directory (overrides output.dir in config) | | --no-image | Skip fetching the rendered PNG — REST API mode only | | --mcp [url] | Use Figma MCP server instead of REST API. Optionally pass a custom server URL (default: http://localhost:3845/sse) |

Examples:

# Generate all nodes listed in the config (REST API)
f2c generate

# Skip the rendered PNG (faster, halves Figma API calls)
f2c generate --no-image

# Use Figma MCP server (requires Figma desktop app running)
f2c generate --mcp

# Custom MCP server URL
f2c generate --mcp http://localhost:3845/sse

# Generate a single node
f2c generate --node-id 12:345

# Override the output directory
f2c generate --output src/ui

f2c agent

Interactive mode. Convert components one by one with a refinement loop.

f2c agent

If a valid f2c.config.json is found you are asked whether to use it. Otherwise the agent prompts for a file ID and output directory manually.

For each node ID you provide, the agent:

1. Fetches the Figma node and its rendered PNG
2. Generates a component with Claude
3. Presents a menu:
   • Accept and save — write the file to disk
   • Refine with feedback — describe what to change, Claude regenerates
   • Show code — print the generated TSX to the terminal
   • Discard — skip without saving

After each component you are asked whether to convert another.

Configuration file

f2c init creates f2c.config.json. You can also write it manually.

{
  "figma": {
    "fileId": "abc123XYZ",
    "nodeIds": ["12:345", "67:890"]
  },
  "output": {
    "dir": "src/components",
    "framework": "react-ts-tailwind-cva"
  },
  "llm": {
    "model": "claude-sonnet-4-6",
    "maxTokens": 8192
  },
  "mcp": {
    "serverUrl": "http://localhost:3845/sse"
  }
}

Note: figma.token can be omitted when FIGMA_TOKEN is set as an environment variable, or when using --mcp mode (no token required).

Config search paths

The config file is resolved from the current working directory using cosmiconfig. Accepted filenames:

• f2c.config.json
• f2c.config.yaml / f2c.config.yml
• .f2crc
• .f2crc.json
• .f2crc.yaml

Config reference

figma

| Field | Type | Required | Description | |---|---|---|---| | token | string | No | Figma personal access token (prefer FIGMA_TOKEN env var) | | fileId | string | Yes | Figma file ID from the URL | | nodeIds | string[] | No | Node IDs to generate (used by f2c generate with no --node-id flag) |

output

| Field | Type | Required | Description | |---|---|---|---| | dir | string | Yes | Directory where generated files are written | | framework | string | No | Always "react-ts-tailwind-cva" (only supported target) | | namePrefix | string | No | Optional prefix added to generated file names |

llm

| Field | Type | Default | Description | |---|---|---|---| | model | string | claude-sonnet-4-6 | Claude model ID | | maxTokens | number | 8192 | Maximum tokens in the Claude response |

mcp

| Field | Type | Default | Description | | ----------- | -------- | ----------------------------- | -------------------------------------------------------- | | serverUrl | string | http://localhost:3845/sse | Figma MCP server URL (used when --mcp flag is passed) |

MCP mode

MCP mode uses the Figma Dev Mode MCP server which runs locally inside the Figma desktop app.

Setup:

1. Open the Figma desktop app
2. Open your file and enable Dev Mode (toggle in the toolbar)
3. The MCP server starts automatically on http://localhost:3845/sse

Advantages over REST API mode:

• No FIGMA_TOKEN needed
• No rate limiting (429 errors)
• Claude reads design data directly through MCP tools

f2c generate --mcp

Finding a Figma node ID

1. Open your file in Figma
2. Right-click any layer or frame → Copy/Paste as → Copy link
3. The link contains ?node-id=<NODE_ID> — that value is the node ID
4. Alternatively, open the Figma URL and look for node-id= in the query string

Node IDs in URLs use - as separator (e.g. 1-129). Both formats are accepted by f2c.

Generated component format

Every generated file is a self-contained .tsx module:

• Named exports: a typed Props interface and CVA variant helpers
• Default export: the React component
• Tailwind CSS for all styling — no inline styles, no CSS modules
• CVA variants for size, intent, state, etc. (inferred from Figma naming)
• Semantic HTML and ARIA attributes where applicable
• Inline SVG for any icons — no external icon libraries

Claude also returns metadata alongside the component:

| Field | Description | |---|---| | componentName | PascalCase React component name | | fileName | kebab-case filename with .tsx extension | | dependencies | npm packages required (typically clsx, tailwind-merge, class-variance-authority) | | notes | Brief explanation of design decisions |

Development

# Install dependencies
npm install

# Run from source
npm run dev <command>

# Type check
npm run typecheck

# Build
npm run build

# Run tests
npm test

Tests use Jest with ts-jest in ESM mode.

CI/CD

The repository includes two GitHub Actions workflows:

• ci.yml — runs on every push and PR to main: type check, build, and tests across Node 18/20/22.
• publish.yml — triggers on v* tags and publishes to npm.

To publish a new version:

npm version patch   # or minor / major
git push origin main --tags

Requires a NPM_TOKEN secret (Classic → Automation type) in your GitHub repository settings.