From Google Stitch to Figma
Google Stitch is a powerful design tool that allows you to create and manage designs for your website or application. However, if you’re a Figma user, you might find it challenging to import your Google Stitch designs into Figma.
Indeed, Stitch supports an “export to Figma” feature, but it only works in the lower-tier “Standard Mode”. If you are using the “Experimental Mode” in Stitch, you won’t be able to export your designs directly to Figma.
The good news is that with the help of html.to.design, you can easily import your Stitch designs into Figma, regardless of the mode you’re using.
How to import your Google Stitch designs into Figma
- Open your Stitch design: Go to your Stitch design that you want to import into Figma.
- Click on the design image: Click on the design to open the “Code” button.
- Click on the “Code” button: This will open a new window with the code for your design.
- Click on “Copy Code” button: In the new window, click on the “Copy Code” button to copy the code to your clipboard.
- Open html.to.design and select the “Editor” tab.
- Paste the code: In the html.to.design “Editor” tab, paste the code you copied from Google Stitch.
See the video below for a step-by-step guide on how to do this:
Why use html.to.design?
Stitch does not export to Figma when in the more powerful “Experimental Mode”
Stitch has two modes: “Standard Mode” and “Experimental Mode”. The “Standard Mode” allows you to export your designs to Figma, but the “Experimental Mode” does not support this feature.
Using html.to.design allows you to import your designs regardless of the mode you’re using in Stitch.
html.to.design provides higher fidelity imports
When you import your Stitch designs into Figma using html.to.design, you can expect high-fidelity imports that preserve the quality of your designs.
left: Stitch, right: html.to.design
html.to.design provides better layer structure
html.to.design generate a more nature layer structure in Figma compared to the Stitch export feature (when available). This makes it easier to work with your designs.
