Have you ever needed to convert HTML code into editable Figma designs quickly? Maybe you're working with legacy code, trying to redesign an existing website, or need to import missing design assets from ongoing projects. Perhaps you've received HTML files from a developer and need to transform them into visual designs for iteration.
Or maybe you're collecting design inspirations from various sites and want to convert any website's underlying HTML structure into your own designs without starting from scratch.
We've all faced these challenges, and the traditional approach involves manually recreating HTML elements in Figma, taking screenshots, or painstakingly rebuilding components. This wastes valuable design work time. That's why we built the Builder.io Figma plugin. It lets you convert HTML to design instantly, converting any HTML code or webpage into fully editable Figma designs.
The Builder.io Figma plugin bridges the gap between code and design, letting you import websites and HTML directly into your Figma workspace. Here's what you can do with it:
Paste a URL, click import, and watch as the Builder.io plugin converts website content into fully editable Figma designs. The plugin maintains visual hierarchy and styling, giving you an accurate representation to work with in your Figma file. We've added Auto Layout support (currently in beta) for users who want more control. This means your imported designs will:
- Adapt correctly when resizing components
- Stay flexible while maintaining the original layout structure
- Let you redesign based on existing implementations rather than starting from scratch
Our HTML to design conversion typically achieves 80-90% accuracy, and we're constantly improving our engine to handle complex layouts, dynamic content, visual effects and intricate details.
Sometimes you just need specific design elements from a webpage, not the full site. Our Builder.io design Chrome extension lets you directly capture specific DOM elements from any webpage, copy them, and import just those elements into your Figma designs.
What makes this especially powerful is the ability to access any webpage, including private webpages behind authentication or your own website running on localhost.
This works great for:
- Quickly updating specific sections of your existing website in Figma
- Comparing different component implementations side by side
- Building your design assets collection
- Capturing dashboards from internal services, member areas, or local development prototypes
After you import websites or HTML into Figma, the Builder.io plugin takes it further with its "Design with AI" feature. Select your imported Figma frame, enter a prompt, and the plugin generates fully editable Figma designs based on your imported content.
This feature helps with:
- Exploring redesign options while staying true to your brand
- Creating multiple component variations for client presentations
- Breaking creative blocks with AI-powered suggestions
- Working with templates to generate new design elements
The AI understands color schemes, typography, and visual hierarchy from your HTML code, ensuring generated designs feel cohesive with your brand.
For developers, one of the most useful features is the ability to connect the entire workflow full circle: from HTML to design and back to code. Select any part of your imported or AI-generated Figma design and convert it to clean, production-ready HTML code with just a few clicks.
This feature improves development by:
- Eliminating manual translation from designs to code
- Ensuring consistency between Figma designs and implementation
- Accelerating the prototype-to-production workflow
- Providing a solid foundation for custom implementations
The generated code is clean, well-structured, and follows modern web standards, ready for integration into your ongoing projects.
The Builder.io Figma plugin offers both free and premium features (no credit card needed for free features). Here's how to start converting HTML to design:
- Run the Builder.io Figma plugin
- Switch to the "Import" tab
- Paste any website URL into the input field
- Adjust viewport width across a range of device sizes (optional)
- Click "Import" to convert the webpage into your Figma file
- Install the Builder.io Chrome extension in your browser
- Navigate to the webpage you want to capture
- Click "Copy Layout" button in the extension
- Select the design elements you need
- In the Builder.io Figma plugin, switch to "Import" tab
- Paste from clipboard into the "Paste from Chrome" input
- The selected elements import directly into your Figma file
- Import websites or HTML using the steps above
- Select the imported frame in your Figma design
- Switch to "Design with AI" tab in the Builder.io Figma plugin
- Enter your design prompt
- Wait for AI to generate editable Figma designs
- Iterate with natural language prompts
- Import the generated designs to your Figma file
- Select any frame or component in your Figma file
- Click the "Export Design" button
- Paste the generated
npxcommand into your terminal - Tell AI how the design fits your project (for example, new login component)
- Wait for AI to generate code matching your project standards
Converting HTML to fully editable Figma designs means you can start where the previous work left off, not from a blank canvas. Whether you're updating an old project, studying competitor layouts, or syncing your design files with production code, you get real, workable designs instead of static references. The imported content becomes your starting point for experimentation and improvement, cutting project timelines dramatically.
Our import feature was launched just a few months ago, but the plugin will become an essential download if you’re a designer. We're also constantly improving the plugin—working on better auto layouts, support for complex animations, solutions for missing fonts, and more granular import controls. Give it a try and let us know what you think with your feedback!
If you enjoyed this post, check out these related articles on our blog:
