Guides / Figma to Webflow

Figma to Webflow: select the correct route

The official Figma to Webflow plugin from Webflow is the correct tool to sync variables, styles and simple components. For full sections, builds with AI help, or animation, use a faster route: Figma → HTML → FlowPaste. With this route, you receive 1 readable class for each element, breakpoints and Interactions.

Add to Chrome, free →See the demo
index.htmlSection.heroHeadingButton:hover
[IN]HTML from Figma (through an AI tool)
<!-- Prompt: "Recreate this Figma frame as one HTML file
     with a <style> tag. Use flexbox and real class names." -->
<section class="pricing">
  <h2 class="pricing-title">Simple pricing</h2>
  <div class="pricing-grid">
    <div class="plan">…</div>
    <div class="plan plan-featured">…</div>
  </div>
</section>
[OUT]Which route to use
  • Design tokens, color styles, type styles and simple components → the official Figma to Webflow plugin from Webflow
  • Full sections, full pages, variants or animation → Figma to HTML, then FlowPaste
  • Figma Make prototypes → open the published preview and use FlowPaste Live Capture
  • Both routes give you native Webflow elements, not an Embed

Steps

  1. Make the HTML for the frame. Tell Claude or ChatGPT to make 1 HTML file from a screenshot or from the Dev Mode CSS. Or publish a Figma Make prototype.
  2. In the Webflow Designer, paste the HTML into the FlowPaste panel. For a Figma Make preview, use Live Capture. Click Convert & copy.
  3. Press ⌘V or Ctrl+V on the canvas. If your Figma fonts are not in Webflow, add the fonts in the Webflow Site settings.

Limits

  • FlowPaste does not read .fig files. You must use HTML, which an AI tool or Figma Make makes for you.
  • If a Figma frame uses absolute positions, FlowPaste converts the positions as they are. For a cleaner, responsive result, tell the AI to use flexbox or grid.
  • If you export images from Figma, put the images on a web host, or upload the images again in Webflow. Then the paste shows the images.

Questions

Is there an official Figma to Webflow plugin?

Yes. Webflow publishes its own Figma to Webflow plugin. The plugin changes auto layout frames to flexbox structures and syncs styles, variables and components. The plugin is strongest for design systems. The plugin is weaker for component variants and complex nested layouts.

Why not export CSS from Figma Dev Mode?

Because Dev Mode gives you CSS for each layer, not a page structure. Give that CSS, or a screenshot, to an AI tool to make 1 HTML file. Then convert the HTML file with FlowPaste.

Try it with your own code.

Free: 3 conversions each day. You do not need a credit card.

Add to Chrome, free →