Webflow vs Static Site on Cloudflare: What We Learned
We moved amariq.com from Webflow to a hand-coded static site on Cloudflare. Real costs, the checks that matter, and who each platform suits.
Webflow
Figma to Webflow: How to Prepare the File, Sync It, and What You Still Finish by Hand
Most pages on this search are plugin listings and converter ads. They tell you a design can become a site in a few clicks. Webflow's own help page, which we read in full on 24 October 2026, is more careful: it lists what the plugin needs, what it names for you, and what it does not support. This guide turns that page into a preparation checklist, a sync sequence and a cleanup list.
Key takeaways
- Auto layout is the entry ticket. Webflow's help page says layers must have auto layout applied to sync, and that you can only copy and paste layers that use it.
- Layer names become class names. Every Figma layer name is converted to a class when you sync or paste, so naming is Webflow work done in Figma.
- There are three parts to it. The plugin has Layers, Variables and Styles tabs; the Webflow app then imports what you synced.
- Fonts, browser and variants have rules. Upload custom fonts to Webflow first, use Chrome or the Figma desktop app, not Safari, and expect variants not to carry across.
- It saves retyping, not finishing. Structure, links, forms, CMS wiring, interactions and testing are still yours.
The short answer
Install Webflow's Figma to Webflow plugin, prepare the Figma file with auto layout, clear names and variables, sync a few sections at a time, then import them with the Figma to Webflow app inside the Webflow Designer and clean up. If you only want a quick layout to start from, copy and paste a single frame instead.
Who is writing: Amariq is a web design studio and we build on Webflow. We have not benchmarked the plugin against converters for this article. Everything below about how the plugin behaves comes from Webflow's help page and product page, which we read on 24 October 2026. Where a point is our own advice it says so.
What the top results offer
On 24 October 2026 Google (United States, English) showed for "figma to webflow": the Figma Community plugin listing, Webflow's own feature page and help article, Webflow University videos from February 2023 and February 2024, a Flux Academy beginner course, converter vendors such as UpBuilder and Magicul, Reddit threads, and sponsored migration agencies. We read Webflow's feature page and help article, and one vendor's guide (Siter.io, which sells a competing tool and says so on the page).
The vendor pages promise speed. Webflow's help page is the detailed one, and it is what this guide leans on. The gap we saw is the middle: no page turned the plugin's rules into a file-preparation checklist, and none connected the naming rule to how a team names classes.
What the plugin and app do
Webflow's feature page says the plugin converts auto layout frames in Figma to clean code in Webflow, and that a separate Webflow Labs app connects through the Designer APIs to sync Figma variables and components. The help page lays out three tabs in the plugin:
| Tab | What it exports |
|---|---|
| Layers | Figma layers become Webflow components and elements |
| Variables | Figma variables become Webflow variables |
| Styles | Figma text and effect styles become Webflow classes |
After you sync from Figma, you import in the Webflow app: open the Figma to Webflow app from the Apps panel, pick a recent sync, review, and click Import selected items.
Prepare the Figma file
This is where the result is decided. Webflow's page sets the rules; the checklist is ours.
| Step | Why | Source |
|---|---|---|
| Put auto layout on every frame you want to sync, including nested frames | Without it, layers do not sync or paste | Webflow help |
| Use the "suggest auto layout" feature for frames that lack it | Quick way to add it | Webflow help |
| Name layers as you would name classes | Each layer name becomes a class | Webflow help |
| Name layers to get the right HTML tag | button becomes an anchor; description, text or paragraph become a paragraph; heading becomes an H1 | Webflow help |
| Move colours and sizes into variables | Variables sync to Webflow variables | Webflow help |
| Keep one variable collection and mode per sync | You can only sync one collection and mode at a time | Webflow help |
| Upload custom fonts to Webflow before you sync | Otherwise they are lost during sync | Webflow help |
| Plan wrap and min and max widths for responsive behaviour | The page says to use wrap and min and max width to make designs responsive | Webflow help |
Our own advice on naming: decide your class naming system before you draw, not after. If your team uses a system such as Client-First, name the layers in that system in Figma, because the names arrive as classes. Renaming a few dozen layers in Figma is faster than renaming classes across a Webflow site later.
Sync it
- Install and authorise. Open the plugin from Figma, authorise the Webflow site or workspace, then pick the site in the plugin.
- Sync a section at a time. Webflow recommends syncing a few components or sections at a time rather than the entire page for large pages.
- Choose Sync or Copy. Sync creates components in Webflow. Copy and paste brings layers across as elements, and Webflow notes that pasting turns components into elements, so sync if you want a component.
- Pick a stacking breakpoint. For each layer you can choose Tablet, Mobile landscape or Mobile portrait, or leave it as not responsive. Webflow gives the ranges as 991px to 767px, 767px to 478px and 478px to 0px. The option is not available for layers under 250px wide or layers that already stack vertically.
- Handle class clashes when pasting. Paste creates a new class by default (for example "Button 2"). A different shortcut reuses the existing class, and another updates the existing class with the Figma styles. Webflow lists the shortcuts for Mac and Windows.
- Import. In Webflow's Figma to Webflow app, review the changes and import the items you want.
Add a class prefix in the plugin settings so you can see which classes came from Figma. Webflow lists this as a tip.
What does not come across
Webflow's help page and FAQ are clear about several limits:
- Safari is not supported. Use Chrome or the Figma desktop app.
- Variants are not currently supported. Responsive, state and style variants do not become variants in Webflow; separate Figma frames create separate components or elements.
- Custom fonts are lost unless you upload them to Webflow first.
- Images and vector icons are uploaded to the Assets panel, but only if the correct site is selected in the plugin.
- Deselecting a variable on import replaces it with a static value.
The vendor guide we read adds that gradients, blend modes and prototype interactions often need fixing or rebuilding by hand. That is a vendor claim, not Webflow's, so test your own design before you trust it.
What you still finish in Webflow
The sync gives you structure and style. The rest is site work, and this part is our advice:
| Job | Notes |
|---|---|
| Page structure | One H1 per page, headings in order, section, nav and main elements in the right places |
| Links and navigation | Set real URLs, menus and the mobile menu |
| Forms | Replace pasted shapes with real form elements and set the notification |
| CMS | Build collections and connect the elements for blogs and project pages |
| Interactions | Rebuild motion in Webflow's interactions |
| Alt text and metadata | Alt text, titles and descriptions for every page |
| Responsive pass | Check tablet and phone widths, not only desktop |
| QA | Test on a phone, check contrast, and run a speed test |
For the speed test, our website speed guide lists the fixes, and the colour contrast checker tests your text colours.
When not to use the plugin
- You have a pixel-positioned design with no auto layout, and rebuilding it with auto layout would take as long as building in Webflow.
- The design relies on heavy motion that must be rebuilt in Webflow anyway.
- You are mid-way through changing the design, so any sync will need redoing. Sync once the layout is stable.
- You want a CMS-driven site with a lot of dynamic structure. The plugin gives you static structure; the CMS wiring is separate work.
How Amariq approaches a Figma to Webflow build
We start by reading the Figma file for layout rules, naming and components, and we agree a class naming system before the first sync. We build the page structure and responsive behaviour in Webflow, wire up forms and the CMS, and test on real phones. Projects are priced from the scope of the work, never by the hour. Payment is 40% to start, 30% once the design is approved and 30% before launch, and on the final payment the design, copy and code are yours. See our Webflow development page, or read what a Webflow website costs. If you are still weighing platforms, our comparison of Webflow and Framer is a good next stop.
Frequently asked questions
How do I get a Figma design into Webflow?
Install Webflow's Figma to Webflow plugin, prepare your frames with auto layout, sync layers, variables and styles, then import them in the Figma to Webflow app inside Webflow.
Does the plugin work without auto layout?
No. Webflow's help page says layers must have auto layout to sync, and that you can only copy and paste layers that use it.
Do my layer names matter?
Yes. Every layer name becomes a class in Webflow, and certain names set the HTML tag, such as a layer named "button" becoming an anchor.
Can I use Safari?
Webflow's help page says the plugin is not currently supported in Safari. Use Chrome or the Figma desktop app.
Do custom fonts come across?
Only if you upload them to Webflow first. Otherwise they are lost during the sync.
Do Figma variants carry over?
Webflow's FAQ says responsive, state and style variants are not currently supported. Separate frames become separate components or elements.
Is a converter better than the plugin?
Converters promise a faster start, but we have not tested them for this guide. Whichever route you choose, plan time for structure, forms, the CMS and testing.
Shopify vs WooCommerce for a Growing Store (2026)
Shopify or WooCommerce for a growing store? Plan prices and fees checked 16 October 2026, a cost sheet to fill in yourself, and who has to maintain what.
Duda vs Webflow for a Business Website (2026)
Duda or Webflow for a business website? Plans checked 16 October 2026, a per-account vs per-site price table, and the question every owner should ask first.