How to move a Figma Make design into Webflow

At a glance

Steps

Copy to Webflow on the Make preview → ⌘V in the Webflow Designer.

Where the button shows

The Figma Make editor (figma.com/make) and published *.figma.site pages.

What Make produces

A React web app or functional prototype, rendered from App.tsx. Figma calls it "a prompt-to-app tool".

Figma's own export

Download code (.zip) in the code editor. Viewing and downloading code needs a Full or Dev seat.

Figma to Webflow plugin?

Works from Figma Design frames, not from Make's code. Copy the Make preview instead.

Not carried over

React state, Supabase backend (login, saved data), routing between pages.

Plan

Each copy counts as a capture: 3 a day on Free, unlimited on Pro.

Why Figma Make is different from a Figma design

If you have moved Figma designs into Webflow before, you probably used frames, auto layout and Webflow's Figma plugin. Figma Make is not that. It's "a prompt-to-app tool": you describe what you want (or start from an existing Figma design) and Make writes code. Figma's developer docs say React is used for "web apps and functional prototypes you create in Figma Make", and that App.tsx is the file "Figma Make uses to render the whole of your web app".

So a Make file has no frames for the Figma plugin to read. What you see in the preview is a running React app. Webflow can't import code at all, and Figma's own export is a .zip of source files, which needs a build step before it's even a page.

FlowPaste copies the preview instead, after React has run and every style is applied. FlowPaste reads the page the way your browser shows it: the elements, every CSS rule that applies to them, the media queries and the hover states. It then writes Webflow's own clipboard format, so ⌘V (Ctrl+V) in the Designer creates real elements with named classes. Make's editor panels are left out, so you get your design only.

“Regardless of where your site is hosted today, migrating to Webflow will be a rebuild, not a transfer.”

Webflow Help Center

Ways to do it, compared

Figma's Help Center says editing code in Make needs a Full seat on a paid plan, and viewing or downloading code needs a Full or Dev seat. Copying the preview with FlowPaste needs neither.

How to copy a Figma Make design into Webflow

Time: about 2 minutes per page. You need: the FlowPaste Chrome extension, your Make file open at figma.com/make, a Webflow site open in the Designer.

1. Open your Make file

   Open the file at figma.com/make and let the preview finish loading. If Make is still writing code, wait until it's done.

   TipSet the design to the state you want before you copy: first tab open, menus closed, the step of a flow you want to keep.

2. Click Copy to Webflow

   FlowPaste's button sits at the bottom right of the preview. The main click copies the whole page, every section in order.

3. Or pick one section

   Open the arrow menu next to the button and choose Pick a section. Hover the design, press ↑ to select a bigger area, and click.

   TipPicking sections is handy for prototypes that hold several screens on one page.

4. Copy from the published site if you prefer

   If you've published the Make file, open its figma.site address. The same button appears there, without Make's editor around it.

5. Paste in the Webflow Designer

   Switch to the Designer, click the Body or the element to paste into, and press ⌘V (Ctrl+V). A whole page pastes section by section.

6. Add fonts, connect images, check breakpoints

   Add the fonts FlowPaste lists in Site settings → Fonts. Connect your site in FlowPaste → Account → Webflow images so images upload to Assets. Then click through tablet and mobile.

What comes across

Problems and fixes

Prototype in Make, ship the site in Webflow

Figma Make is good at getting an idea working fast. Webflow is good at running a marketing site that others can edit. Many teams use both.

1. Use Make for the idea. Prompt the landing page or product page in Make. Share the preview with your team and settle the design there.
2. Copy the agreed version. Copy each page with FlowPaste and paste it into Webflow. Turn the header and footer into Components.
3. Hand content to editors. Replace repeated items (blog cards, team members, testimonials) with CMS Collection Lists so others can edit them.
4. Keep apps where they run. If your Make file is a working tool with Supabase login and data, keep it published on its figma.site address or your own app subdomain. Put the marketing site on www in Webflow and link across.

After you paste

• Add the fonts in Webflow → Site settings → Fonts. FlowPaste lists them in the notes after each conversion. Until then, text that brought its own font file still shows correctly, but you can't pick the font in the Typography panel.
• Images: Webflow publishes images only from its own Assets. Connect your site once in FlowPaste → Account → Webflow images, and every paste uploads its images for you. Without it, images show in the Designer but break on the published site.
• Click through tablet, mobile landscape and mobile portrait in the Designer. Media queries are already mapped to those breakpoints; check anything the notes marked as "snapped".
• Rename or merge classes where you want your own system. Identical styles already share one class; variations are combo classes.
• Look for Embed elements (inline SVG icons, pseudo-elements, leftover scripts). They show on every plan; editing their code needs a paid site plan.
• Copy every prototype screen you need; each one is a separate copy.
• Publish to your webflow.io staging domain and check animations and scripts there. Scroll-triggered Interactions don't always play inside Designer Preview.

Questions