Skip to main content
CodeAlchemy

Figma → Code

Turn Figma frames into React, Vue, or Svelte components instantly.

client-sidefree
Target:
Style:
Component name:
Figma Source

Right-click a frame in Figma → Copy link to selection

Token is used only to call Figma APIs via our proxy route for preview/export. Generate at Figma Settings → Personal Access Tokens.

Setup guide

1. Get a Personal Access Token (PAT)

  1. 1.In Figma, click your avatar (top-left corner) → Settings
  2. 2.Scroll to Security → Personal access tokens → Generate new token
  3. 3.Give it any name (e.g. CodeAlchemy), set expiration
  4. 4.Scopes: check ONLY file_content:read under Files — leave everything else unchecked
  5. 5.Click Generate token → copy it (starts with figd_)

2. Get the frame URL

  1. 1.Open your Figma file and click on a Frame (frames with Auto Layout work best)
  2. 2.Right-click the frame → Copy/Paste as → Copy link to selection
  3. 3.Paste the URL here — it looks like: figma.com/design/KEY/name?node-id=103-49
About "Remember": your token is saved in localStorage — like a cookie, but scoped to this site only. It persists between sessions and is sent only in request headers to convert/export your selected node. Uncheck "Remember" + click Fetch to clear it.

Supported: auto-layout frames, absolute-positioned layers, text, raster images and vector icons (downloaded as PNG/SVG when you click Download ZIP). Shadows and gradients are still limited.

Output
Loading editor…

Frequently asked questions

Is my Figma token safe?↓

Your PAT is sent from your browser in request headers to our conversion routes, which immediately forward it to Figma over HTTPS and do not persist it.

Which PAT scope do I need?↓

Only one: file_content:read (under "Files" in the token dialog). Leave all other scopes unchecked — that is the minimum permission needed to read frame data.

What Figma nodes are supported?↓

Frames/Groups/Components/Instances, Text nodes, Rectangles/Ellipses with image fills (downloaded as PNG), and Vector/Boolean/Star/Line shapes (downloaded as SVG). The converter now mixes flex + absolute positioning for better fidelity. Blend modes, shadows, and gradients are still limited.

What’s inside the Download ZIP archive?↓

A folder with: 1) the generated component file (.tsx/.vue/.svelte), 2) assets/images/ with all raster images as PNG, 3) assets/icons/ with all vectors as SVG, 4) a README.md describing the contents. Nothing is stored on our server — assets are fetched from Figma in memory and streamed back to you.

What’s the difference between Tailwind, Inline, and CSS Module?↓

Tailwind: utility classes (flex, gap-4, text-lg…). Inline: style={{}} objects on each element. CSS Module: className={styles.xxx} with a .module.css comment block you save alongside the component.

Can I use this with Figma Community files?↓

Yes, as long as you have view access to the file and a valid PAT, the tool can fetch any node you can see.

Try other tools

View all

Tailwind ↔ CSS

Convert Tailwind classes to vanilla CSS and back. Instant. Client-side.

client-sidefree

Palette → Tokens

Turn a color palette into CSS variables, Tailwind config, and Token Studio JSON.

client-sidefree

OpenAPI → TS

Generate TypeScript interfaces and Zod schemas from any OpenAPI spec.

client-sidefree

Long-form guide

Export Figma frames into React, Vue, or Svelte components

Figma → Code turns the design that's in your Figma file into the JSX, Vue SFC, or Svelte component that's in your repo. The conversion is client-side: you paste a Figma file URL and your personal access token, and the tool fetches the selected node directly from api.figma.com using your browser. Your token never leaves your machine in transit unless our backup proxy route is needed for a CORS edge case, in which case it's forwarded to Figma over HTTPS and never persisted.

How to use it

  1. Generate a PAT. In Figma, click your avatar → Settings → Security → Personal access tokens → Generate new token. Give it a name like CodeAlchemy, set an expiration (90 days is a sane default), and check only the file_content:read scope. Copy the token — it begins with figd_.
  2. Get the frame URL. Open the Figma file you want to export. Click on the specific frame you want — auto-layout frames work best, but absolutely-positioned designs also work. Right-click → Copy/Paste as → Copy link to selection. That URL contains both the file key and the node id.
  3. Paste both into the tool. URL goes in the top field; token goes below. Toggle Remember if you'd like the PAT to survive between sessions in localStorage (uncheck and click Fetch to clear it).
  4. Pick your target. Choose React + TypeScript (default), Vue 3 SFC, or Svelte. Then pick a style strategy: Tailwind classes (most common), inline style objects (good for one-off exports), or CSS Modules (good for projects with co-located stylesheets).
  5. Click Fetch & Convert. The tool calls Figma, parses the node tree into an intermediate representation, and emits component code on the right panel. Expect this to take 1–4 seconds depending on frame complexity.
  6. Download the ZIP. Use the Download ZIP button to get a folder with your component file, raster images as PNG in assets/images/, vectors as SVG in assets/icons/, and a README.md that explains where everything came from.

What's supported, what's still expanding

Auto-layout is a first-class citizen. The converter walks the layout tree and produces matching flex rules with the correct gap, padding, and alignment. Absolute positioning is detected and emitted as a hybrid — flex for the wrapper, absolute children for layered elements like badges or icons.

Text nodes carry their font family, weight, size, line height, letter spacing, and color. Image fills are downloaded and referenced from the assets folder. Vector shapes (icons, illustrations) are downloaded as SVG and either inlined or imported, depending on your settings.

Effects are partial. Solid drop shadows, simple inner shadows, and basic linear gradients are emitted. More complex effects — layered shadows, conic and radial gradients with multiple stops, blend modes, and backdrop blurs — are still being expanded. When the converter doesn't know how to express something, it leaves a comment in the output instead of silently dropping it.

When to reach for it

The big use case is starting a new component from an approved design. Instead of staring at the frame and re-typing class names, you paste the URL and get a scaffold. From there you wire props, hook up state, and replace placeholders — but the structure, spacing, and base styles are already done.

It's also useful for reviewing implementations. Paste a frame, paste your component, see if they agree on padding and font weights. Or convert a design system primitive into reference code so a new contributor can compare implementations across React and Vue without rebuilding it twice.

Examples

Auto-layout pricing card
Input · figma
Frame: PricingCard
  Auto-layout vertical, gap 16, padding 24
  Text: 'Pro' (sm, semibold)
  Text: '$19' (xl, bold)
  Button: 'Choose plan' (filled, brand)
Output · tsx
export function PricingCard() {
  return (
    <div className="flex flex-col gap-4 p-6 rounded-xl border">
      <span className="text-sm font-semibold">Pro</span>
      <span className="text-xl font-bold">$19</span>
      <button className="px-4 py-2 rounded-lg bg-brand-500 text-white">
        Choose plan
      </button>
    </div>
  );
}
Hero with raster image
Input · figma
Frame: Hero
  Auto-layout horizontal, gap 32, align center
  Rectangle (image fill: hero.png), 480x320
  Text: 'Welcome to CodeAlchemy' (3xl)
Output · tsx
export function Hero() {
  return (
    <section className="flex items-center gap-8">
      <img src="/assets/images/hero.png" alt="" width={480} height={320} />
      <h1 className="text-3xl font-semibold">Welcome to CodeAlchemy</h1>
    </section>
  );
}
Vue 3 SFC with inline styles
Input · figma
Frame: Tag
  Auto-layout horizontal, gap 6, padding 6/12
  Background: #3dc96c
  Corner radius 999
  Text: 'New' (xs, white)
Output · vue
<template>
  <span :style="{ display: 'inline-flex', alignItems: 'center', gap: '6px', padding: '6px 12px', background: '#3dc96c', borderRadius: '999px', color: '#fff', fontSize: '12px' }">
    New
  </span>
</template>

Frequently asked questions

Your PAT lives in your browser. The conversion runs client-side; the token is sent in the X-Figma-Token header straight to api.figma.com. We have a backup proxy route for CORS edge cases that immediately forwards the token to Figma over HTTPS and never persists it.