f2c - Figma to Code

Local-first Figma to React / Vue code generation inside VS Code.

Bring your own Figma token and AI key, browse Figma layers in the Explorer panel, and generate components locally. No Figma plugin is required.

Buy Pro/Cloud if you need a license key for Pro/Cloud workflows or want to support development. Local BYOK conversions remain free and unlimited.

Why f2c

• Local-first workflow: your Figma token and AI API key stay in your VS Code settings.
• BYOK conversions are unlimited.
• Supports OpenAI, Claude, and Ollama.
• Generates React or Vue 3 components.
• Supports Tailwind CSS, CSS Modules, or plain styles.
• Includes a Figma Layers panel so you can pick nodes without copying selection URLs.

Current Features

• Load a Figma file into the VS Code Explorer sidebar.
• Browse pages, frames, components, groups, and nested layers lazily.
• Convert any selected Figma node to code.
• Paste a Figma node URL directly when you prefer.
• Preview generated code in a webview.
• Copy, insert at cursor, or save generated files.
• Generate TypeScript or JavaScript.

Product Roadmap

The core extension is free for local BYOK use.

Future Pro/Cloud features should focus on advanced workflows that save team time:

• Hosted AI, so users do not need to configure provider keys.
• Project design-system profiles and reusable codegen rules.
• Figma node to local file linking.
• Watch mode for Figma changes.
• Multi-file page or section generation.
• GitHub PR generation for design updates.
• Team settings, audit history, and shared templates.

Basic Figma fetching, layer browsing, local AI generation, React/Vue output, and local save/copy/insert remain available for local BYOK use.

Buy Pro/Cloud

Pro/Cloud licenses are for hosted AI, sync, GitHub PR generation, team workflows, and supporting continued development.

Buy f2c Pro/Cloud

Local BYOK usage remains free and unlimited. You only need Pro/Cloud if you want the paid workflows or want to support the project.

Support Development

You can help by sharing real Figma-to-code examples and suggesting improvements for React, Vue, Tailwind, and design-system workflows.

If you want to support development directly, you can also buy a Pro/Cloud license:

https://duziteng.gumroad.com/l/f2c-vscode

Setup

Open VS Code Settings and search for f2c.

Required settings:

• f2c.figmaToken: your Figma Personal Access Token.
• f2c.ai.provider: openai, claude, or ollama.
• f2c.ai.apiKey: required for OpenAI or Claude. Leave blank for Ollama.

Optional settings:

• f2c.ai.baseURL: custom API base URL.
• f2c.ai.model: model name override.
• f2c.output.framework: react or vue.
• f2c.output.css: tailwind, cssmodules, or plain.
• f2c.output.typescript: generate TypeScript output.

Get a Figma Token

1. Open Figma in the browser.
2. Open account settings.
3. Go to the Security tab.
4. Generate a Personal Access Token.
5. Paste it into f2c.figmaToken.

Use the Figma Layers Panel

1. Open the Explorer sidebar in VS Code.
2. Find the Figma Layers view.
3. Click Load Figma File.
4. Paste a Figma file URL, for example:

https://www.figma.com/design/ABC123/My-Design-File

5. Expand pages and frames.
6. Click a node to convert it to code.

Paste a Node URL

You can also run f2c: Convert Figma URL to Component from the Command Palette and paste a direct node URL:

https://www.figma.com/design/ABC123/MyProject?node-id=12-345

The URL must include node-id.

Commands

Development

npm install
npm run build

Run the extension in VS Code Extension Development Host, or package it with:

npm run package

Troubleshooting

Invalid Figma URL

Make sure the URL is a Figma design URL. For direct conversion, it must include node-id.

f2c not configured

Open settings and fill in f2c.figmaToken. If you use OpenAI or Claude, also fill in f2c.ai.apiKey.

AI provider returned an error

Check your API key, model name, base URL, and provider account limits. For Ollama, make sure the local server is running.

License

MIT