f2c – Figma to Code

Convert Figma designs to React / Vue 3 components with AI. No Figma plugin required — paste a link, get production-ready code.

Available as a VSCode extension (this page) and a CLI for terminal users. One Pro license key activates both.

Get Pro — $29.99 one-time →

---

Step 1: First-time Setup

Open VSCode Settings:

• Press Cmd+, (Mac) or Ctrl+, (Windows/Linux)
• Or press Cmd+Shift+P and type "f2c: Open Settings"

Search for "f2c" in the settings search bar. Fill in these fields:

f2c.figmaToken (required)

Your Figma Personal Access Token. To get it:

1. Open Figma in browser → click your profile avatar (top-left)
2. Go to Settings → Security tab
3. Scroll down to "Personal access tokens"
4. Click "Generate new token", give it a name, copy the token
5. Paste it into the f2c.figmaToken field in VSCode Settings

f2c.ai.provider (required)

Choose your AI provider: openai / claude / ollama

• openai: uses GPT-4o by default (most recommended)
• claude: uses Claude Sonnet by default
• ollama: uses local model, no API key needed

f2c.ai.apiKey (required for openai / claude)

Paste your OpenAI or Anthropic API key here. For Ollama (local), leave this blank.

f2c.output.framework

react (default) or vue Determines the output file format: .tsx for React, .vue for Vue 3 SFC.

f2c.output.css

• tailwind (default): Tailwind utility classes
• cssmodules: separate .module.css file
• plain: inline styles

f2c.output.typescript

true (default) or false

---

Step 2: Get a Figma URL

1. Open your Figma design file
2. Right-click on any Frame or Component
3. Select "Copy link to selection"
4. The URL looks like: https://www.figma.com/design/ABC123/MyProject?node-id=12-345

Important: the URL must contain ?node-id=XX-XX (a specific node, not the file root).

---

Step 3: Browse Layers with the Figma Layers Panel (recommended)

The Figma Layers panel lets you browse your entire Figma file structure directly inside VSCode — like a file explorer, but for Figma.

How to open the panel

1. Click the Explorer icon in the left Activity Bar (the file-stack icon)
2. Scroll down in the Explorer sidebar — you will see a "FIGMA LAYERS" section
3. If you don't see it, press Cmd+Shift+P → type "View: Open View" → select "Figma Layers"

Load a Figma file

1. Click the cloud-download icon (↓) at the top of the FIGMA LAYERS panel — or press Cmd+Shift+P → "f2c: Load Figma File"
2. A prompt appears: paste your Figma file URL (not a node URL — the root file URL) Example: https://www.figma.com/design/ABC123/My-Design-File
3. Wait a moment — the panel populates with your file's pages and top-level frames

Explore the layer tree

The tree has unlimited depth. Click the arrow next to any node to expand it:

My Design File ← file root └── Home Page ← page (click arrow to expand) └── Header ← frame (click arrow to expand) ├── Logo ← group/component ├── Nav Menu ← group (click arrow to expand further) │ ├── Nav Item 1 │ └── Nav Item 2 └── CTA Button ← component

Children are loaded lazily — each level fetches only when you expand it, so large files stay fast.

Convert any node to code

Click any node name (frame, group, component, etc.) to convert it. A progress notification appears immediately: "f2c: Converting 'Header' … Fetching Figma node… / Generating code with AI…"

You don't need to copy any URL. One click = one conversion.

Toolbar buttons (top of the FIGMA LAYERS panel)

• ↓ Load Figma File — load a new file (prompts for URL)
• ↺ Refresh — reload the current file from Figma API
• ✕ Clear — reset the panel

Refresh after Figma edits

If you've changed your Figma design, click ↺ Refresh to reload the latest layer tree.

---

Step 3 (alternative): Paste URL directly

If you know the exact node URL, you can skip the panel:

Method 1: Right-click in Explorer panel

1. In the left sidebar, right-click the folder where you want the component saved
2. Select "f2c: Convert Figma URL to Component"

Method 2: Right-click inside the editor

1. Open any code file
2. Right-click anywhere in the editor area
3. Select "f2c: Convert Figma URL to Component"

Method 3: Command Palette

1. Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux)
2. Type "f2c" and select "f2c: Convert Figma URL to Component"
3. Or click the "f2c" button in the bottom status bar

---

Step 4: Paste URL and Wait

(Only needed when using the URL methods above — panel users skip this step.)

1. An input box appears at the top of VSCode
2. Paste your Figma node URL and press Enter The URL must look like: https://www.figma.com/design/ABC123/...?node-id=12-345
3. Progress shows: "Fetching Figma node..." then "Generating code with AI..."
4. Wait 5–20 seconds depending on your AI provider and design complexity

---

Step 5: Review in Preview Panel

After generation, a preview panel opens on the right:

• See the generated code with syntax highlighting
• Three action buttons at the top:
  • Insert: inserts code at cursor position in your active editor
  • Save: saves as a new file (e.g. MyButton.tsx) in the workspace folder
  • Copy: copies the full code to clipboard

---

Get Pro

Buy f2c Pro →

Plan	Price	Conversions	Frameworks
Free	$0	3 / day	React + Tailwind only
Pro	$29.99 one-time	Unlimited	React, Vue 3, all CSS options

To activate: run f2c: Activate Pro License from Cmd+Shift+P, then paste your key.

Once activated, the status bar (bottom-right) immediately changes from "f2c 2/3" to "f2c ⚡ Pro". Run f2c: License Status anytime to check your plan, usage, and key details.

---

All Commands

Command	What it does
f2c: Convert Figma URL to Code	Main command — paste URL, get component
f2c: Load Figma File	Load a Figma file into the Layers panel
f2c: Refresh Figma Layers	Reload current file from Figma API
f2c: Clear Figma Layers	Reset the Layers panel
f2c: Activate Pro License	Enter your license key to unlock Pro
f2c: License Status	Check current plan, usage, and key info
f2c: Open Settings	Quick jump to f2c settings page

---

CLI Alternative: f2c-cli

If you prefer working in a terminal, or use a different editor (Vim, WebStorm, Cursor...), you can use f2c-cli — the command-line version of the same tool.

Install

npm install -g f2c-cli

One-time setup

f2c init

The wizard asks for your Figma token and AI API key. Saved to ~/.f2c/config.json.

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 cssmodules --out ./src/components --ts

CLI commands

Command	Description
f2c init	First-time setup wizard
f2c convert -u	Convert a Figma node to a component file
f2c browse	Interactively pick components from a file
f2c config	View current configuration
f2c link -u	Link a Figma node to a local file (Pro)
f2c sync	Detect changes, open a GitHub PR (Pro)
f2c watch	Auto re-generate on Figma change (Pro)
f2c license activate	Activate Pro license
f2c license status	Show current license status

Activate Pro in CLI

The same key from Gumroad works for both the VSCode extension and CLI:

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

# Verify
f2c license status

Per-project config

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

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

---

Troubleshooting

"Invalid Figma URL" error → Make sure you copied the link from a specific Frame/Component, not the file root. The URL must contain ?node-id=XX-XX

"f2c not configured" error → Open settings and make sure figmaToken and ai.apiKey are filled in.

"Free plan: daily limit reached" → You've used 3 conversions today. Upgrade to Pro or wait until tomorrow.

Preview panel shows but code looks wrong → Try switching to a stronger model (e.g. gpt-4o or claude-sonnet). Complex designs need a powerful model.

Right-click menu doesn't show "f2c" option → Make sure the extension is installed and enabled. Right-click on a folder, .tsx, .jsx, .vue, .ts, or .js file in the Explorer.

---

Feedback & Issues

Found a bug or have a feature request?

Email: duziteng1987@gmail.com Please include your VSCode version, OS, and a description of the problem.

---

Links

• VSCode Marketplace: https://marketplace.visualstudio.com/items?itemName=dujun-bot.f2c-figma-to-code
• CLI on npm: https://www.npmjs.com/package/f2c-cli
• Homepage: https://tourmaline-ganache-a7fd52.netlify.app/
• Get Pro: https://duziteng.gumroad.com/l/f2c-vscode