VSCode Extension + CLI for terminal

Figma to Code,
the way you work.

Paste a Figma link, get production-ready React or Vue 3 code. No Figma plugin needed. Works inside VSCode or from your terminal.

⚡ One Pro license key — activates both the VSCode extension and CLI.

Install VSCode Extension → See how it works ↓
# CLI usage
$ f2c convert -u "figma.com/design/…?node-id=137-8958" -f vue
✔ Fetched: Button / Primary
✔ AI generating code...
✔ Done → src/components/ButtonPrimary.vue
 
# VSCode: right-click any folder → "f2c: Convert Figma URL"
# Then paste the same Figma link — same result, inside your editor.
Two ways to use f2c

Pick the one that
fits your workflow.

Same core engine, same Pro key. Use the VSCode extension for a visual experience, or the CLI for terminal power.

VSCode Extension — Recommended

f2c – Figma to Code

Integrated directly into VSCode. Right-click any folder, paste a Figma link, get a component file — without leaving your editor.

  • Figma Layers panel — browse & click to convert
  • Unlimited depth: expand any frame / group / component
  • Right-click → Convert in Explorer panel
  • Live preview panel with syntax highlighting
  • Insert / Save / Copy buttons in preview
  • Status bar shows plan & usage (f2c ⚡ Pro)
  • React TSX + Vue 3 SFC output
  • Tailwind / CSS Modules / Plain styles
CLI — For Terminal Users

f2c-cli

Use f2c from any terminal. Works with any editor — Vim, WebStorm, Cursor, or none. Scriptable, CI-friendly, automation-ready.

  • f2c convert — convert any Figma node
  • f2c watch — auto re-generate on change (Pro)
  • f2c sync — open GitHub PR automatically (Pro)
  • f2c link — link a node to a local file (Pro)
  • Works in CI/CD pipelines with env vars
  • Supports .f2crc per-project config
Quick Start

Up and running
in 2 minutes.

Choose your path below. Both need a Figma token and an AI API key — set up once, use forever.

VSCode — Step 1

Install Extension

Search f2c in the VSCode Extensions panel, or click "Install from Marketplace" above. Requires VSCode 1.75+.

VSCode — Step 2

Open Settings

Press Cmd+Shift+P → f2c: Open Settings. Fill in your Figma token and OpenAI / Claude API key.

VSCode — Step 3

Browse Layers & Convert

Open the FIGMA LAYERS panel in the Explorer sidebar. Click ↓ Load Figma File, paste the file URL. The full layer tree appears — click any node to convert it instantly. Progress appears immediately.

VSCode — Step 3 (alt)

Or: Right-click & Paste URL

Right-click any folder or file in the Explorer → f2c: Convert Figma URL to Component. Paste the node link, wait 5–15 s.

CLI — Alternative

Use from Terminal

Install globally with npm install -g f2c-cli, run f2c init once to configure, then f2c convert -u <url>.

npm install -g f2c-cli
Features

Everything you need,
nothing you don't.

AI-driven conversion that understands real Figma structure — not rigid template mapping.

🗂️

Figma Layers Panel

Browse your entire Figma file like a file explorer — unlimited depth. Pages, frames, groups, components. Click any node to convert it instantly. No URL copying needed.

⚛️

React & Vue 3

Outputs idiomatic React TSX or Vue 3 SFC with <script setup lang="ts">. TypeScript by default, plain JS optional.

🎨

Tailwind / CSS Modules / Plain

Choose your CSS strategy. Each output is clean and production-ready — no inline style soup.

🤖

AI-powered, not template-based

Reads the actual Figma node tree and generates real component logic. Complex layouts, variants, and states all handled.

🔗

Link & Watch (CLI Pro)

Link a Figma node to a local file. Run f2c watch and the component re-generates automatically when the design changes.

🚀

GitHub PR Auto-create (CLI Pro)

Run f2c sync and it creates a branch and opens a pull request on your repo automatically.

⚡

Zero plugin, zero config

No Figma plugin to install, no browser extension, no webpack setup. Works anywhere you have Node.js or VSCode.

Pro Activation

One key.
Both tools unlocked.

Buy once, receive a key by email. The same key activates Pro in both the VSCode extension and the CLI.

1

Purchase on Gumroad

Click "Get Pro" and complete the checkout. One-time payment, no subscription, no renewal.

2

Check your email

A license key in the format F2C-XXXX-XXXX-XXXX-XXXX is sent automatically within a minute. Check spam if it doesn't appear.

3

Activate — your way

Use VSCode or the CLI — both work with the same key.

Choose your activation method:

VSCode
Cmd+Shift+P → f2c: Activate Pro License → paste key
CLI
f2c license activate F2C-XXXX-XXXX-XXXX-XXXX
4

Verify anytime

In VSCode: Cmd+Shift+P → f2c: License Status. The status bar also shows f2c ⚡ Pro after activation.

In CLI: f2c license status

🔑  License is tied to one machine at a time. Moving to a new computer? Activate again — the old machine is released automatically.
# Activate via CLI
$ f2c license activate F2C-A1B2-C3D4-E5F6-G7H8
✔ License activated!
Email: you@email.com
Plan: Pro — unlimited conversions
 
# Check status anytime
$ f2c license status
License: Pro ✓
Key: F2C-A1B2-****-****-G7H8
 
# In VSCode: status bar shows
# ⚡ f2c Pro (bottom-right corner)
 
# Same key works in both tools ↑
Pricing

Start free,
go pro when ready.

One-time payment. No subscriptions, no seats, no surprises. Pro covers both VSCode extension and CLI.

Free
$0 forever
Get started immediately, no sign-up.
Covers: VSCode Extension + CLI
  • 3 conversions per day
  • React + Tailwind output
  • VSCode preview panel
  • CLI f2c convert command
Pro
$29.99 one-time
One key, both tools, unlimited forever.
Covers: VSCode Extension + CLI
  • Unlimited conversions
  • React + Vue 3 + all CSS options
  • CLI f2c watch — auto re-generate
  • CLI f2c sync — GitHub PR auto-create
  • CLI f2c link — link node to local file
  • License key delivered by email
  • Activate on any machine
  • Priority support
FAQ

Common questions.

Anything else? Email duziteng1987@gmail.com

Do I need both the VSCode extension and the CLI?

No. Use whichever fits your workflow. Most developers use the VSCode extension. The CLI is for terminal fans, automation, or users who don't use VSCode.

Does one Pro key work for both tools?

Yes. One purchase, one key — activates Pro in both the VSCode extension and the CLI. No separate license needed.

What AI provider does f2c use?

f2c supports OpenAI (GPT-4o) and Anthropic (Claude). You supply your own API key — f2c never stores it on our servers.

Where do I get a Figma access token?

Figma → Settings → Security → Personal access tokens → Generate new token. Read-only access is enough. Paste it into f2c settings.

How quickly does the license key arrive?

Usually within 1 minute of purchase — sent automatically to your checkout email. Check spam if it doesn't appear. Still missing? Email with your order number.

Can I activate on multiple machines?

Yes. Activate on any machine you use. The key is tied to one machine at a time — activating on a new machine releases the old one automatically.

Is there a refund policy?

Yes — 7-day no-questions-asked refund. Email with your Gumroad order number. Refund processed through Gumroad, key deactivated.

What Node.js version is required for the CLI?

Node.js 18 or higher. Run node -v to check. The VSCode extension has no Node.js version requirement.

Stop translating Figma by hand.

Install in 30 seconds. First 3 conversions are free.

Get Pro — $29.99 one-time → CLI on npm ↗