f2c-cli — Figma to Code

Convert any Figma component to production-ready React or Vue 3 code with one command. AI-powered, zero boilerplate. No Figma plugin required.

npm install -g f2c-cli
f2c convert -u "https://figma.com/design/xxx?node-id=1-2" -f react

---

Why f2c?

Designers hand off in Figma. Developers translate it to code by hand. That translation is slow, error-prone, and repetitive.

f2c eliminates it. Paste a Figma URL → get a component file. That's it.

• React TSX or Vue 3 SFC (<script setup lang="ts">)
• Tailwind CSS, CSS Modules, or plain styles
• Real component logic — not rigid template mapping
• Works with any Figma file you have access to

---

Install

npm install -g f2c-cli

Requires Node.js 18+.

---

Quick Start

1. One-time setup

f2c init

The wizard will ask for:

• Figma access token — get it at Figma → Settings → Security → Personal access tokens
• AI provider — OpenAI (GPT-4o) or Anthropic (Claude). Your own API key, your own cost.

Config is saved to ~/.f2c/config.json.

2. Convert a component

# React (default)
f2c convert -u "https://www.figma.com/design/xxx?node-id=1-2"

# Vue 3
f2c convert -u "https://www.figma.com/design/xxx?node-id=1-2" -f vue

# With options
f2c convert -u "..." -f react --css tailwind --out ./src/components --ts

3. Activate Pro (optional)

After purchasing, you'll receive a license key by email (F2C-XXXX-XXXX-XXXX-XXXX).

f2c license activate F2C-XXXX-XXXX-XXXX-XXXX

# Check status anytime
f2c license status

---

Commands

Command	Description
f2c init	First-time setup wizard (Figma token + AI key)
f2c convert -u <url>	Convert a Figma node to a component file
f2c browse	Interactively browse and pick components from a file
f2c config	View current configuration
f2c link -u <url>	Link a Figma node to a local file path
f2c sync	Detect Figma changes and create GitHub PRs (Pro)
f2c watch	Auto-sync on Figma change (Pro)
f2c license activate <key>	Activate Pro license
f2c license status	Show current license status

---

Convert Options

f2c convert \
  -u "https://figma.com/..." \
  -f react            # react (default) | vue
  --css tailwind      # tailwind (default) | cssmodules | plain
  --out ./src/components
  --ts                # force TypeScript

---

Free vs Pro

Feature	Free	Pro
f2c convert (unlimited)	✓	✓
React + Vue 3 output	✓	✓
Tailwind / CSS Modules / Plain	✓	✓
Linked components	up to 3	✓ unlimited
f2c watch (auto re-generate)	—	✓
f2c sync (GitHub PR auto-create)	—	✓
Priority support	—	✓

Get Pro (one-time $19.99): https://tourmaline-ganache-a7fd52.netlify.app/#pricing

---

AI Providers

Provider	Model	Notes
Anthropic Claude	claude-sonnet	Best output quality (recommended)
OpenAI	gpt-4o	Good alternative
Ollama	codellama	Free, runs locally

Switch provider anytime:

f2c config --provider openai
f2c config --provider claude

---

Project Config

Create .f2crc in your project root to override global settings:

{
  "output": {
    "framework": "vue",
    "css": "tailwind",
    "dir": "./src/components",
    "typescript": true
  }
}

---

How to Get Your Figma URL

1. Open Figma (web or desktop app)
2. Right-click any layer / frame / component
3. Click "Copy link to selection"
4. Paste into f2c convert -u "..."

---

FAQ

Does f2c store my API keys? No. Keys are stored locally in ~/.f2c/config.json on your machine only.

Which Figma files does it work with? Any file you can open in Figma. Just make sure your access token has read access to the file.

Can I use it in a monorepo / CI pipeline? Yes. Set env vars F2C_FIGMA_TOKEN and F2C_AI_KEY to skip the interactive setup.

I bought Pro but haven't received my key. Keys are sent automatically within 1 minute. Check your spam folder. Still missing? Email duziteng1987@gmail.com with your order number.

---

Links

• Homepage: https://tourmaline-ganache-a7fd52.netlify.app/
• npm: https://www.npmjs.com/package/f2c-cli
• Get Pro: https://duziteng.gumroad.com/l/f2c-pro
• Issues: https://github.com/dujun-bot/f2c/issues

---

MIT License © 2025 dujun