Import code snippets, section markup, or full HTML files into Figma when the source of truth lives in your editor instead of the browser URL.
Prerequisites
Need 01
A Figma file where you want the converted output to land.
Need 02
The HTMLtoFigma plugin ready to run in code import mode.
Need 03
HTML markup and, ideally, the CSS needed to reproduce the structure you want in Figma.
How It Works
This guide is for the markup-first path. It works best when you already control the HTML you want to bring into Figma and can decide how much CSS context should travel with it.
Choose the exact block of HTML you need. A focused component, a hero section, or a self-contained layout usually produces a cleaner Figma result than pasting a giant page file that still needs to be broken apart afterward.
If the markup depends on classes, include the relevant CSS rules alongside it whenever possible. Inline styles or a colocated style block make the conversion path much clearer than relying on external files that are not part of the pasted source.
Inside Figma, launch HTMLtoFigma and choose the code input path instead of the URL workflow. This tells the plugin to interpret the markup you provide directly rather than fetching a live webpage state from a browser address.
After conversion, review typography, colors, layout grouping, and image handling. Because the source came from code instead of a rendered browser state, it is especially important to confirm whether all dependent styles traveled with the imported markup.
Tips
A well-scoped section or component usually converts into a cleaner Figma layer tree than a long HTML file containing unrelated regions you will immediately delete.
If a component relies on class-based styling, include the relevant CSS in the pasted source. Code mode is most predictable when the style context travels with the HTML instead of living somewhere else.
If the real goal is reproducing the rendered page exactly as users see it, URL mode is often the better choice. Code mode shines when the work starts from source components and reusable markup.
Absolute asset URLs and available fonts reduce cleanup work after import. Local paths and unavailable fonts create avoidable drift between code intent and Figma output.
FAQ
These questions focus on direct markup workflows, CSS context, and the practical tradeoffs between importing source code and capturing a rendered page.
A code-first workflow is most reliable when the styles the component depends on are included directly with the pasted source. If the real styling context lives elsewhere, URL mode may be the more accurate path.
Not as framework source. The practical options are either importing the rendered page through URL mode or copying the rendered HTML output that the component produces.
The core question is whether the styling context is available to the conversion pass. If the classes resolve in the input you provide, the import is much more predictable than if you only paste class names with no styles attached.
Inline SVG generally travels better than indirect references because the vector structure is already part of the markup being imported.
Choose code import when your workflow begins with source markup from an editor or component library. Choose URL import when the browser-rendered page state is the thing you need to preserve most closely.
It can support both, but the cleanest value often appears in component or section workflows where you want source markup turned into editable design structure without recreating it manually.
Explore More
How to Import HTML to Figma
Use the broader workflow guide when you want to compare URL import and code import before deciding on the best path.
How to Convert a Website to Figma
Switch to the URL-first guide when the rendered browser page matters more than the raw source markup in your editor.
Back to HTMLtoFigma
Return to the homepage for the product-level explanation, pricing preview, and broader browser-to-design positioning.
Call To Action
When the workflow starts from source markup, use HTML code mode to turn the component into editable Figma structure and keep the cleanup focused.
100% free during early access · No credit card required
