Publish Figma designs as websites
With the "Figma to Studio" plugin, you can effortlessly import your designs created in Figma into Studio, and publish as live websites to share with others.
Features
The “Figma to Studio plugin” lets you import your Figma designs into Studio section by section, or multiple pages in one go, for publishing as a website.
Copy and paste to import
You can import your Figma designs into Studio with easy copy and paste via the plugin. Designs import even if Auto Layout is not set up. However, for increased precision, we recommend using designs with Auto Layout settings.
Auto responsive
While the imported design is initially set for Desktop size, the "Auto Responsive" feature saves you time by generating layouts for other screen sizes. You can also turn off this feature and manually configure your breakpoint designs.
Font support
Text elements you set in Figma, including font size, line spacing, letter spacing, and font family, are all imported into Studio. If the fonts used in your design are available in Studio, they'll be automatically added to the font list and applied to your text. In case the fonts are not available, the default font (the top font in your project's font list) will be used. If your text box contains multiple styles, it will be imported as a rich text box in Studio.
Image and vector support
Images and vectors are also automatically uploaded to Studio during import. To specify which layer to upload as an image, start the layer name with <img> in Figma.
Color support
You can easily add the colors used in your design to your Studio project's color palette. To do this, click the “+” button in the preview screen when you import. You can also change colors in this preview. Note, adding colors to the project’s color palette is optional, and will not affect the import.
Tips
Add <img> to Layer Names
When importing images, illustrations, or vector images with numerous layers, add <img> at the beginning of the layer name in Figma. This helps the plugin recognize these layers as images. Layers containing only shapes will be uploaded as SVGs, while those with image data will be uploaded as PNGs.
Import layers individually, and add Auto Layout
When designs don’t fully import, consider the followings:
Import the layers individually, rather than all at once. Sometimes, complex layer structures can cause issues.
Add Auto Layout to your Figma designs. Importing designs with Auto Layout set up usually leads to increased accuracy.
Steps
Install the plugin
There are two ways to install the plugin.
You can visit the plugin page and click "Try it out" to start using.
Alternatively, open Figma, click on the Resources icon, search for “Figma to Studio,” and then click to use.
Once the installation is complete, you can access a sample Figma file to test the plugin. To start using the plugin, simply log in to your Studio account. If you don’t have an account yet, sign up for free.
Import an individual section or page to an existing project
Launch the plugin and login to your Studio account. Then, select the layers or frames you want to import.
In the preview screen, you can review the responsive display and decide whether to turn on or off Auto Responsive.
Once you're ready, click “Copy to Clipboard,” switch to the Studio editor, and paste the design by using ⌘ + V on Mac or Ctrl + V on Windows. They will be imported onto the page you currently have open.
Import multiple pages to a new project
With "Multi-page Mode (Beta),” you can import multiple frames into Studio all at once as a new project.
Begin by giving the frames you want to import a name that starts with "/", and the plugin will recognize these frames as individual pages. If you've set up links in Figma's Prototype tab, those settings will also be imported to Studio.
Next, click on "Multi-page Mode (Beta)" in the plugin. The frames with '/' in their names will appear as pages. You can review how they look on different devices in the preview screen and decide whether you want to turn on or off the 'Auto Responsive' feature.
Once you're ready, click “Create New Project.” A loading screen will appear briefly, and when it's done, you'll be taken to your new Studio project in your web browser. The project name will be based on the Figma page name, but you can always change it later if necessary.
Feedback
If you think you've encountered a bug while using the plugin, we'd love to hear from you. Any information, including the designs you share, will be used solely to improve the plugin and will remain confidential.
Alternatively, for questions on how to use the plugin or Studio’s editor, you can reach out to our support staff via chat, available by clicking on the “?” in the bottom right corner of the Studio editor.
Submit feedback
Open the plugin, expand the menu in the top left, and select “Report an Issue.” Then, select the layers or frames you are having issues, and copy them with ⌘+C (Windows: Ctrl+C).
Paste them into the "2. Paste" section of the plugin with ⌘+V (Windows: Ctrl+V).
Describe the issue in detail, and click “Submit.”
