-
The route, in five steps.
Steps one and two are where the whole thing succeeds or fails. Most of the time people skip them and blame the app.
Apply auto layout everywhere.
Name layers, make components.
Install both halves of the app.
Sync, then fix what broke.
Connect a domain and publish.
-
Preparing the Figma file
Auto layout everywhere. Webflow states that layers need auto layout applied to sync at all. A pixel-positioned frame is invisible to the app, which is why the most common report is that nothing happened.
Name things as you would name classes. The names travel with the sync, and renaming forty layers afterwards inside Webflow is slower than renaming them in Figma now.
Promote repeated blocks to components. A card used eight times should be one component before it moves, or you inherit eight separate things to maintain.
Move colours and spacing into variables. Variables come across, and rebuilding a palette by hand in the style panel is the least interesting hour of the project.
Flatten the decoration you do not need. Gradient overlays and blend modes are the documented weak point. Anything purely decorative is cheaper to export as an asset than to repair after the sync.
Checked against Webflow’s own help centre on 2026-09-03
How to get a Figma design into Webflow
There is an official app, it is free, and it does more than people expect. It also has three conditions that stop it working, and it does not turn a design into a finished site. Here is the whole route.
The short answer.
Install the free two-part Figma to Webflow integration from Webflow Labs, apply auto layout to everything you want to bring across, and sync. Components, variables and styles arrive in your Webflow project. Layout structure, gradients and every interaction are still yours to finish.
-
It is a sync, not a converter
The app moves a design system into Webflow so you can build with it. Nobody ships a finished site straight out of it, and any tutorial claiming otherwise skipped the cleanup.
-
Three things stop it working
No auto layout on the frame, running it in Safari, or expecting prototype interactions to come across. All three are documented and all three catch people.
What actually comes across.
More than a screenshot, less than a website. This is the honest middle that most tutorials skip past.
-
Components
Figma components arrive as Webflow components, which is the part that makes the app worth using. A repeated card stays one thing rather than eight copies.
-
Variables
Colour and number variables come across, so a palette or a spacing scale does not have to be retyped into Webflow's style panel.
-
Styles
Text and colour styles map onto Webflow classes, which is the closest either tool gets to sharing a design system rather than a picture.
-
Layout, conditionally
Frames sync only where auto layout is applied. A hand-positioned frame does not come across, which is the single most common reason the app appears to do nothing.
What breaks, and what to do about it.
Three of these are documented by Webflow. The fourth is the one nobody warns you about, because it is not a bug in the app.
-
Safari does not work
Webflow states the app is unsupported in Safari. If nothing happens when you click sync, the browser is the first thing to check.
-
Gradients and blend modes
Gradient overlays and blend modes frequently need fixing by hand after the sync. Budget time for it rather than being surprised by it.
-
Prototype interactions
Figma prototype links and transitions are not a web interaction model. Anything animated is rebuilt in Webflow's interactions panel from scratch.
-
The structure is still yours to build
A synced layout is not a semantic page. Headings, landmarks and the class hierarchy are decisions the app cannot make for you, and skipping them is how sites end up unusable with a screen reader.
Three routes, side by side.
The third column is ours, and it is a different destination rather than a faster path to the same one. It is here because “do I have to use Webflow at all” is a reasonable question at this point.
| What you care about | Webflow's Figma app | Rebuilding by hand | Siter.io plugin |
|---|---|---|---|
| What comes across | Components, variables and styles, into a Webflow project | Nothing. You are looking at the design and rebuilding it | Text, images, vectors, groups and auto-layout structure, as editable elements |
| Preparation the file needs | Auto layout applied, or layers will not sync at all | None, but you will be measuring everything by hand | A frame selected. Auto layout structure carries across if it is there |
| Browser it runs in | Not supported in Safari | Any | The Figma desktop app or a browser Figma supports |
| Known cleanup afterwards | Gradient overlays and blend modes often need fixing by hand | All of it - this is the route where cleanup is the whole job | Prototype animations and interactions do not import, and are rebuilt on the canvas |
| Does it re-sync when Figma changes | Yes, that is the point of the app | No | No - the import is one-way, with no re-sync |
| What you get at the end | A Webflow project you finish and publish | A Webflow project you finish and publish | A Siter.io site you finish and publish |
| Cost to publish on your own domain | $15/mo billed yearly on Webflow Basic, per site | $15/mo billed yearly on Webflow Basic, per site | $7/mo billed yearly, per plan rather than per site |
| CMS available afterwards | Yes, from $25/mo Premium. Not on Basic | Yes, from $25/mo Premium. Not on Basic | No - there is no CMS at any price |
Webflow and Siter.io details checked on 2026-09-03 against help.webflow.com, webflow.com. Prices change; tell us if a cell is out of date.
Two things worth knowing before you start.
The sync does not make the page semantic
This is the part that separates a design that moved from a website that works. A synced layout gives you divs in the right places. It does not decide that this text is a level-two heading, that this region is the site navigation, or that this image needs a text alternative. Those are structural decisions, they live in Webflow’s element settings, and no import tool can make them for you.
It is worth doing before you style anything, because retrofitting structure into a finished page is miserable. Headings in order, one level-one heading per page, navigation and main content in the right elements, and alternative text on anything that carries meaning.
You still need to budget for the Webflow plan
The app is free. Publishing is not. Webflow’s cheapest plan that puts a site on your own domain is $15/mo billed yearly, $25 monthly, charged per site, and that plan explicitly excludes the CMS. If the design you are moving includes a blog or a case-study collection, the real number is $25 a month on Premium.
There is also a second plan axis. A Site plan publishes to your domain; a Workspace plan covers seats and, above the Core tier, code export. Budgeting for one and discovering you need both is the most common surprise on the platform. We wrote up the whole picture on our Webflow comparison.
Frequently asked.
How do I export a Figma design to Webflow?
With the official Figma to Webflow app, and not into a finished site. It syncs components, variables and styles into a Webflow project, and you build the pages from there. Anything advertising a one-click Figma to website conversion is describing a starting point, not a result.
Is the Figma to Webflow app free?
Yes. It is a free two-part Webflow Labs integration: a plugin on the Figma side and an app on the Webflow side, and you need both halves installed. Publishing the finished site is what costs money.
Why is nothing syncing from Figma to Webflow?
Two documented causes cover most cases. Layers need auto layout applied or they will not sync at all, and the app is unsupported in Safari. Check both before assuming something is broken.
Do Figma prototype interactions come across?
No. Figma prototypes describe screen-to-screen transitions, which is not how a web page works. Anything animated is rebuilt in Webflow’s interactions panel.
How long does it take?
The sync is minutes. The work is the preparation before it and the structure after it, and on a real six-page site that is measured in days rather than hours. Anyone quoting you an afternoon has not included the accessibility pass.
Is there an easier way to publish a Figma design?
If the site genuinely needs Webflow’s CMS or code export, no. If it does not, a smaller importer skips the class system entirely, which is the section directly below.
The route we make.
We make a Figma-to-web builder, so treat this section as what it is.
Siter.io’s plugin does something narrower than Webflow’s app. It sends a selected frame to a Siter.io canvas as editable elements, where you set three breakpoints, add links, forms and SEO fields, and publish. There is no class system to learn between the design and the live page, and publishing starts from $7/mo billed yearly, priced per plan rather than per site.
The trade is real and it is not subtle. Prototype animations and interactions do not import, and the import is one-way with no re-sync, so Webflow’s app is the better tool if you expect the design to keep changing. No CMS. No - the free plan builds and previews privately; publishing needs a paid plan. HTML download on Pro only; the contents of the export are not documented. If you need any of that, finish the Webflow route above. The plugin page walks through ours with screenshots.
-
Or skip the rebuild entirely.
Siter.io's plugin sends a Figma frame to a canvas where you finish and publish it. No class system, no re-sync to manage, and publishing starts at $7/mo billed yearly.
Get the plugin -> -
Start for free with Siter.io
Start for free ->