From Figma Make to Figma Design
Explore design ideas or bootstrap the boring parts of your design in Figma Make, then import them into Figma Design using html.to.design plugin.
Exploring Prototypes in Figma Make and importing them into Figma Design
1. Create a new Figma Make project
Start by creating a new project in Figma Make and prompt it to generate the design you want.
2. Iterate on your design in Figma Make
Use Figma Make to quickly iterate on your design ideas.
Prompt to fix the major issues, add new components, or even change the layout.
3. Capture the preview with the html.to.design Chrome extension
Launch the html.to.design Chrome extension and capture the preview of your Figma Make project.
How to install the html.to.design Chrome extension?
Go to Installation guide
4. Open html.to.design plugin in Figma Design
Open Figma, launch the html.to.design plugin.
5. Import your capture in Figma Design
Drag and drop the .h2d file you captured with the Chrome extension or simply go to the
“Extension” tab if you used the “Send to Figma plugin” option in the Chrome extension.
6. 🎉 Edit your webpage designs in Figma!
Your Figma Make project has been converted into editable Figma layers!
Why use Figma Make to bootstrap for your designs?
🚀 Faster iterations: Harness the speed of Figma Make to generate multiple layout options in minutes, then fine-tune every detail in Figma Design.
✏️ Kickstart projects with confidence: Figma Make give you a strong starting point and a ready-made template, helping you overcome the blank canvas problem. Figma Design then lets you precisely customize your design, ensuring it aligns with your design system.
🤝 Seamless collaboration: Once in Figma Design, you and your team can collaborate and iterate further in Figma.
🎨 Enhanced productivity: Let Figma Make handle the boring structure so you can focus on refining, branding, and perfecting your designs in Figma Design.