Company
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
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 yet.
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.
Every conversion stays in your Recent Conversions list indefinitely. When something converts well, you can come back to it weeks later and re-copy it to a different Webflow project or to Figma. 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 lands as a custom code 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 animations and transitions, on the other hand, do come through as native Webflow CSS. 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.
Figma output is static.
JavaScript-driven behavior doesn’t translate to Figma — 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.
The Converter is in beta.
We’re actively improving how it handles edge cases, complex code, and new patterns from AI tools. Some conversions today will be cleaner in a month. If a section converts poorly, retry with cleaner code, but also let us know — your feedback shapes what we fix next.
The Converter is free to try with up to 5 conversions on the Free plan. After that, Pro and Ultra subscriptions unlock unlimited conversions. Past conversions remain in your Recent Conversions list regardless of plan, so the work you’ve done on the free tier doesn’t disappear if you upgrade or wait to upgrade.
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:
The Converter is still a relatively new feature on BYQ, and we’re shaping it based on how people actually use it. If something is missing, unclear, or could be better, let us know.
