f2c-cli

v0.1.9

Published

8 days ago

CLI tool to convert Figma designs to React / Vue 3 components using AI. One command, zero boilerplate. Supports Tailwind, CSS Modules, TypeScript, GitHub PR auto-create.

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

Open Figma (web or desktop app)
Right-click any layer / frame / component
Click "Copy link to selection"
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 [email protected] with your order number.