Have you ever found yourself rebuilding an existing website in Figma just to iterate on your own designs? Perhaps those "quick fixes" in production, emergency CSS tweaks, and last-minute client requests have created a drift between your Figma design and reality.
Or maybe you're collecting design inspirations from various sites, or you're wanting to "borrow" (respectfully, of course) components from sites that you absolutely admire for your own website.
We've all been there, and the traditional solution—capture screenshots, manual tracing, or rebuilding from scratch—wastes so much time in your design workflow. That's why we built Visual Copilot – a Figma plugin that lets you convert any website directly into your designs.
Visual Copilot bridges the gap between web and design, allowing you to bring any web page directly into your Figma workspace with just a few clicks. Here's what you can do with it:
Just paste a URL, hit import, and watch Visual Copilot transform the website content into fully editable Figma designs. The plugin preserves the visual hierarchy and styling, giving you a pixel perfect web representation as a starting point for your design process. We’ve added Auto Layout support in beta for the Figma power users out there. This means your imported designs will:
- Respond correctly when you resize components
- Be easier to modify while preserving the original layout logic
- Allow you to redesign with the current implementation and not start from scratch
Imports are typically 80-90% accurate but we're constantly improving our engine to handle even complex layouts and visual effects.
Sometimes you don't need the full page—just that slick hero section or that footer that has gone out of sync. Our Builder.io extension doubles as a design Chrome extension and lets you select specific DOM elements on any page, copy them to your clipboard, and import just those elements into Figma.
What makes this especially powerful is that you can access any webpage—even those behind authentication walls or running on your localhost.
This is perfect for:
- Quickly iterating on specific sections of your website
- Comparing different design approaches for the same component
- Adding elements to your design collection
- Capturing admin dashboards, members-only sections, or prototypes that developers are one-shotting with Cursor.
Once you've imported a website into Figma, Visual Copilot takes things to the next level with its "Design with AI" feature. Select the imported Figma frame, submit a prompt and the plugin will generate on-brand interactive editable Figma designs based on the imported design.
This feature is a game-changer for:
- Quickly exploring alternative redesign directions while staying on-brand
- Generating multiple iterations of a component for client presentations
- Breaking through creative blocks with AI-powered creativity
- Working with templates and UI kits to generate designs
The AI understands the original website's color schemes, typography, and visual hierarchy, ensuring all generated designs feel cohesive with the brand you're working with.
For developers, one of the most powerful features is the ability to go full circle: from website to design and back to HTML. Select any part of your imported or AI-generated design and convert it to clean, production-ready code with a few clicks.
This feature streamlines the development process by:
- Eliminating the tedious process of translating designs to code manually
- Ensuring visual consistency between designs and implementation
- Speeding up the prototyping-to-production workflow
- Providing a great starting point for custom code implementations
The generated code is clean, well-structured, and follows modern web development practices, making it ready to integrate into your projects.
Visual Copilot offers a seamless experience with a mix of free and premium features (no credit card required for free features). Here's how to get started:
- Run the Visual Copilot Figma plugin
- Switch to the “Import” tab
- Paste a website URL in the input field
- Adjust the viewport width for mobile versions (optional)
- Click "Import" and watch as the website appears in your Figma file
- Install the Builder.io Chrome extension in your browser
- Click “Copy Layout” button in the extension
- Select an element on the webpage
- In Visual Copilot Figma plugin, switch to the “Import” tab
- Paste from the clipboard into the “Paste from Chrome” input
- The selected element will be imported into your Figma file
- Import a website using the steps above
- Select the imported design or a specific frame
- Switch to "Design with AI" tab in Visual Copilot Figma plugin
- Submit a prompt
- Wait for the AI to generate on-brand designs
- Iterate on the design with natural language prompts
- Import the generated design to Figma
- Select any frame or component in your Figma file
- Click the "Export Design" button
- Paste the generated
npxcommand into your project’s terminal - Instruct AI on how the design fits into your project (for example, new login card component)
- Wait for AI to generate code that matches your project standards
Our Import feature launched just days 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:
Introducing Visual Copilot: convert Figma designs to high quality code in a single click.
