Most of this page is about Convert to Webflow, and the limits section says where Convert to Figma differs. The Converter is straightforward to use, but a few small habits will get you noticeably better, more consistent results — and knowing the limits up front saves you from expecting things the tool isn’t designed to do.
1. Always paste into a fresh Webflow project first.
This is the single most important habit. Even though crashes are rare, they’re not zero — and the cost of pasting into a scratch project first is ten seconds. Treat it as standard practice, the same way you’d save a file before a risky edit. Once you’ve confirmed the section loads correctly, copy it from the fresh project into your real one.
2. Use the example AI prompt.
The Converter prompt was tuned to produce code the Converter handles well. Hand it to your AI tool before you describe what you want to build. It costs you nothing and consistently improves output quality, especially for first-time users of the loop.
3. Convert one section at a time.
The Converter is built for single sections — heroes, pricing blocks, feature grids, testimonials. Trying to convert a full multi-section page tends to produce more embedded code and harder-to-edit output. Generate one section, convert, paste, then move to the next.
4. Preview the right way.
A converted section that uses JavaScript animations will look broken inside the Webflow Designer because the Designer doesn’t execute custom code. Use Preview mode with custom code enabled, or publish to a staging URL, to see how the section actually behaves. The Designer view is rarely the full picture.
5. Pair with a Design System for visual consistency.
The Converter handles structure. A Design System handles style. Giving your AI tool both — a Design System for the visual language plus the Converter prompt for clean code — produces sections that look polished and convert cleanly. The combo is the whole pitch.
6. Iterate before you convert, not after.
It’s faster to refine code with your AI tool than to fix it in Webflow. If the first conversion looks off, go back to the AI, adjust the prompt, regenerate, and convert again. A second round of generation usually costs less time than untangling a messy Webflow paste.
7. Save what works.
Your Recent Conversions list shows your latest 60 conversions. When something converts well, you can come back to it and re-copy it to a different Webflow project. Useful when you’ve built a section you’d like to reuse across multiple sites.
Single sections, not full pages.
The Converter is designed for one section at a time. It’s not optimized for multi-section page layouts, full site templates, or pages that depend on layout structures spanning multiple sections (a sticky nav that affects the body, for example). Build pages by converting sections individually and assembling them in Webflow.
JavaScript animations embed as custom code.
Anything driven by GSAP or vanilla JavaScript always lands as a JS Embed inside the section. It works on the published page, but it doesn’t render in the Webflow Designer and it isn’t editable via Webflow’s Interactions panel. CSS @keyframes and :root blocks always go into a CSS Embed. See How the Converter works for the full breakdown.
Not every conversion will be 100% native.
Some things — exotic CSS selectors, advanced web components, framework-specific markup — don’t have native Webflow equivalents and will come through as embeds. The cleaner the input code, the higher the native-to-embedded ratio. Following the example prompt gets you closest to fully native output.
Class names won’t match your project’s conventions.
Converted sections come with whatever class names the original code used (typically BEM-style names from the AI). They won’t automatically match your project’s existing class system. Expect a small cleanup pass after pasting, or use Webflow’s “Rename class” feature to align them with your conventions.
One Section wrapper.
The output is a single Section. Everything you convert lands inside it.
Some CSS values become raw custom properties.clamp(), calc(), min() and max(), ch and fr units, backdrop-filter, and background-image: url() come through as raw custom properties instead of native style values.
Form fields need a form.
Form fields outside a <form> become embeds. Wrap them in a <form> to get native form elements.
Only max-width media queries map to breakpoints.
Webflow breakpoints are built from max-width media queries. Other media queries don’t map.
Figma output is static.
Figma is a separate tool (Convert to Figma) that takes HTML and CSS only, since Figma is a design tool, not a runtime. The Figma output captures the static visual of the section: layout, colors, typography, content. Animations and interactions live only in the Webflow version.
Edge cases happen.
If a section converts poorly, retry with cleaner code, and let us know; your feedback shapes what we fix next.
The Converter is free and unlimited on every plan. You need to be signed in; signed out, Convert sends you to sign-up.
If you’ve read this far, you have everything you need to use the Converter effectively. A few next steps depending on what you want to do:
We shape the Converter based on how people actually use it. If something is missing, unclear, or could be better, let us know.
