Figma to Webflow: When to Rebuild a Marketing Site There

Quick answer

Webflow is a rebuild, not a Figma export. Design the page in Figma, then construct it again with Webflow elements, classes, and a CMS. Choose Webflow when the site already lives there, the client edits in Webflow, or you want class-based layout instead of Framer. Choose Framer when a designer should publish campaign pages with less class machinery. That choice is separate from product UI, which stays in Figma and goes to engineering through Dev Mode. Paths are listed on Ship.

Who this is for

• Designers handing a marketing site to a Webflow build, or building it themselves.
• Teams with a client or marketing editor who already works in Webflow’s CMS.
• Anyone who was told a plugin would turn the Figma file into a finished Webflow project.

If the deliverable is a campaign page a designer will publish every week, read Figma to Framer before you commit.

When Webflow is the right host

Situation	Prefer
The marketing site is already a Webflow project	Webflow. Do not split the site across two hosts.
Editors need a CMS and a class system other developers can read	Webflow
A designer ships landing pages without a class library	Framer. See the Framer workflow.
The page is a product screen inside the app	Neither. Use Figma and the handoff checklist.
You need custom application logic, auth, or a large existing codebase	Code. See Figma to code.

What to prepare in Figma

1. A desktop frame and a mobile frame of the pages you will build, with final copy.
2. A short type ramp and color list. Name them the way you want classes named (heading/lg, color/text).
3. Spacing that is a scale, not one-off gaps. Webflow classes are easier when Figma already uses 8px steps or a variable collection.
4. Components for the things you will reuse: button, nav, card, section. Note the variants that are real (primary, ghost) and ignore the rest.
5. Exported images and icons at the sizes the site will use. See production-ready export.

A plugin that pushes layers into Webflow can sketch structure. It will not produce a class system you want to maintain. Budget a rebuild.

How to rebuild, not trace

1. Start from Webflow’s structure: section, container, grid or stack, then content. Do not recreate every Figma group as a nested div.
2. Create classes for type, color, and spacing before you style one-off sections. A class named after a campaign (spring-hero-2026) becomes debt.
3. Build the nav, footer, and one section to the Figma spec. Then repeat the pattern. Do not style the whole page with inline-looking one-offs.
4. Put repeating content in the CMS: blog posts, case studies, logos, jobs. A designer should not edit the layout to change a logo.
5. Set breakpoints from the content, not from a single 1440px frame. Check the mobile Figma frame, then adjust where the real text wraps.
6. Forms, metadata, and the 404 page are part of the build. A pretty homepage with an untitled tab is not shipped.
7. Compare the staging URL to Figma for type, color, and spacing. Fix the class, not a single element, when the same mistake shows up twice.

What not to move

Product components, complex prototypes, and app states do not belong in the marketing project. Link to the app. Do not redraw the product inside Webflow to make a screenshot.

If engineering owns the design system in code, give them the Figma spec and the Dev Mode checklist. A second Webflow copy of the product system will drift.

Common mistakes

• Expecting a Figma file to become a Webflow project without a class plan.
• One class per layer. You will not be able to change the type scale later.
• Building CMS content as static sections, then duplicating them by hand.
• Matching a desktop frame exactly and ignoring how headlines wrap on a phone.
• Using Webflow for a logged-in product. That is an application, not a marketing site.

FAQ

Is there a Figma plugin that does this properly?

Plugins can copy layout as a start. The maintainable part is the class and CMS model, and that is manual. Treat plugin output as a draft you are willing to delete.

How is this different from Framer?

Both publish marketing sites. Webflow fits teams who think in classes and an existing Webflow CMS. Framer fits designers who want to publish pages with less class structure. The decision guide for Framer is Figma vs Framer.

Should product UI go through Webflow?

No. Product UI stays in Figma until engineering builds it. Webflow is for the marketing site around the product.

Bottom line

Use Figma as the spec and Webflow as the site. Rebuild with a small set of classes and a CMS for anything that repeats. If a designer should publish campaign pages without that machinery, use Framer. If the screen is the product, use code and Dev Mode.