Figma to Code: Dev Mode, Plugins, and Site Builders

Quick answer

There is no single Figma-to-code path. Use Dev Mode when engineers will build the product and the file is clean. Use a code-export plugin only as scaffolding you expect to rewrite. Use Framer or Webflow when the deliverable is a marketing site, not the app. Generated React that ignores your real components will not survive a sprint. Finish the frames in what to do before Dev Mode, then use the Dev Mode checklist. Pick the host on Ship.

Who this is for

• Designers asked to “just export the code.”
• Engineers who received a plugin dump and a Figma link.
• Marketing teams deciding between a site builder and a custom build.

1. Figma Dev Mode

Best for: Product UI that engineers implement in the existing codebase.

What you get: Spacing, type, color, variants, and assets from the file you prepared. CSS snippets for straightforward frames.

What you do not get: Your component library, business rules, or responsive behavior that was never drawn.

Use it when: The design system already lives in code and the Figma file uses published components, variables, and readable names.

Skip it when: The file is a pile of detached frames. Inspect will faithfully describe the mess. Fix the file first, using what to finish before Dev Mode and the Dev Mode checklist.

2. Code-export plugins

Best for: A rough scaffold, a one-off prototype, or a conversation about structure.

What you get: HTML, CSS, or framework output that resembles the selected frame.

What you do not get: Your tokens, your components, accessible names, or a layout your team will maintain.

Use it when: An engineer wants a starting point and has time to replace it.

Skip it when: Someone plans to paste the output into production. Plugin code drifts the moment the Figma file changes, and it does not know your routes or data. Roundups of the plugins themselves are in dev handoff plugins and plugins for developers.

3. Framer

Best for: A marketing or campaign page a designer can publish.

What you get: A live site, breakpoints, and a CMS. Not your product codebase.

Use it when: Speed to a public URL matters more than sharing the app’s component library.

Skip it when: The screen is the product. The steps are in Figma to Framer. The choice between the tools is in Figma vs Framer.

4. Webflow

Best for: A marketing site with a class system and a CMS editors already use.

What you get: A rebuild of the Figma spec as Webflow elements. A plugin import is a draft.

Use it when: The site already lives in Webflow or the team wants classes another builder can read.

Skip it when: You wanted a designer to publish a landing page this afternoon with less structure. Read Figma to Webflow.

Which path to pick

Job	Path
Product screen in an existing app	Dev Mode, after the file is clean
Engineer wants a disposable mock in code	A plugin, then rewrite
Landing page a designer will update	Framer
Marketing site with classes and a CMS	Webflow
Logged-in product, auth, or heavy custom logic	Engineering, with Figma as the spec

Common mistakes

• Shipping plugin output because it “looks like the frame.”
• Sending engineers a file with no components and calling Dev Mode the handoff.
• Rebuilding the app in Framer or Webflow so the marketing site can show a fake product.
• Maintaining three copies of the button: Figma, a plugin dump, and production.

FAQ

Can Figma replace the front-end codebase?

No. Figma describes the interface. The codebase owns behavior, data, and accessibility in production. Site builders own marketing pages. They are different outputs.

Which option is free?

Figma has a free start. Dev Mode seat rules, Framer site plans, and Webflow site plans change. Check each vendor before you commit a team. This guide does not list prices.

Bottom line

Match the path to the job. Dev Mode for product UI. Plugins as scrap paper. Framer or Webflow for the marketing site. Do not ask one export to do all three.