Convert your first section in under a minute

The Converter is built to be fast. There’s no setup, no configuration, and no plugin to install in Webflow or Figma. The entire flow is paste, convert, copy, paste — and you’re done.

‍

‍

Here’s everything you need

• an account on BYQ Supply
• nothing else to pay for: the Converter is free and unlimited on every plan, but you need to be signed in (signed out, Convert sends you to sign-up)
• the plain, rendered HTML, CSS, and JavaScript you want to convert (from any AI tool, code editor, or project; React and JSX are not supported)
• a Webflow or Figma file ready to receive the section

‍

How to convert a section

These steps are for Convert to Webflow. The Figma steps are further down.

1. Open the Converter on BYQ.
2. Add your code in one of two ways:
   • Paste directly into the code editor on the left, using the three tabs: index.html, styles.css, and script.js.
   • Upload files with the “Upload file” button at the top. You can upload an HTML file, a CSS file, a JS file, or all three.
3. Or paste a single file that contains everything. If your HTML already includes its CSS and JavaScript inline (which is common with AI output), just paste the whole thing into the index.html tab. The Converter will detect the styles and scripts and split them into the right places.
4. Edit if you need to. The code editor is fully functional — you can adjust the code before converting if something looks off.
5. Click “Convert” in the top right.
6. Preview the result. A popup opens showing your converted section in desktop, tablet, and mobile views, with a Copy to Webflow button in the top right.
7. Copy to Webflow and paste it in.

That’s the entire flow. Most conversions take a few seconds.

‍

Copying to Webflow

Click Copy to Webflow. The section goes onto your clipboard in Webflow’s native format. Open any Webflow project, click into the Designer, and paste — the section lands as real Webflow elements you can edit like anything you built by hand. No embed blocks, no plugin, no special steps.

We recommend pasting into a fresh, empty Webflow project first before moving to your real project. We cover why in Best Practices, but the short version: it’s a safe habit that takes a few seconds and saves you from edge cases.

‍

Copying to Figma

Figma has its own sibling tool. Pick Convert to Figma in the sidebar (/tools/html-to-figma), paste your HTML and CSS (no JavaScript tab), click Convert, then click Copy to Figma. Open any Figma file, paste, and you get real Figma layers — frames, text, fills — that you can edit and design around like a normal Figma file. No plugin needed.

‍

Recent Conversions

Every section you convert is saved to your Recent Conversions on the Converter page (your latest 60 conversions are listed). You can come back to any past conversion to re-copy it to Webflow without re-running the conversion.

This is useful when you’re iterating — generate, convert, paste, decide it’s not quite right, go back to your AI tool, and start again. Your earlier attempts are still there if you want to compare or pick the best one.

‍

A typical first session

A common starting point: generate a section in Claude or another AI tool, copy the full HTML output (with inline styles and scripts), paste it into the Converter’s index.html tab, click Convert, then copy to Webflow and paste into a fresh project to check it. Once you’re happy, paste it into your real project and continue building.

The next chapter explains what happens behind the scenes — what the Converter translates to native Webflow elements and what comes through as custom code.