With the dedicated Figma to Studio plugin, you can import design data created in Figma directly into the Studio.Design editor. During import, your design data is automatically converted to a box layout. This means your design is automatically converted into a website, ready to publish as a Studio.Design site right after importing.

Once you launch the plugin, simply select frames or layers in Figma to import them into Studio.Design at the level you choose. You can also use the "Page Mode (Beta)" feature, which creates a new project in Studio.Design and imports multiple page designs into that project all at once.

You can choose how to use the plugin based on your needs — import designs section by section, or import all pages of a site at once.

Designs created in Figma can be imported even without Auto Layout settings. However, designs with Auto Layout applied will be imported with higher accuracy compared to those without it.

Imported design data is assumed to be desktop-sized, but using the "Auto Responsive Settings" feature can save you the effort of making adjustments after import. Of course, you can also turn this feature off and manually configure responsive settings in Studio.Design.

Text properties such as font size, line height, letter spacing, and font family are imported into Studio.Design. If the fonts used are available in Studio.Design, they are automatically added to your font list and applied to the text during import. If a font is not available in Studio.Design, the default font (the first font in the project's font list) will be applied instead.

Additionally, if a text box contains multiple styles, it will be imported as a rich text box in Studio.Design.

When you import, image data is automatically uploaded to Studio.Design. If you add <img> to the beginning of a layer name in Figma, that layer will be specifically uploaded as an image.

Also, if you crop an image using a mask or trim the image itself, the cropped version will be uploaded to Studio.Design.

When you paste imported data into the Studio.Design editor, you'll see a preview. On this preview screen, you can click the "+" button to add colors used in your design to the Studio.Design color palette.

Adding colors to the palette is not required. You can import without adding them, so feel free to add colors as needed. You can also change colors directly in the preview.

For single images, illustrations, or vector images with many layers, add <img> to the beginning of the layer name in Figma before importing. This tells the plugin to recognize that layer as an image. Layers containing only shapes will be uploaded as SVG, while layers containing at least one image will be uploaded as PNG to Studio.Design.

Sometimes the conversion may not work perfectly during import, causing layout issues. In that case, there are two main approaches that may improve import accuracy:

There are two ways to install the plugin. The first way is to visit the plugin page and click "Try it out." You'll be automatically redirected to Figma, and the installation will begin.

The second way is to log in to Figma, click the Resources icon, and search for "Figma to Studio." Then click "Run."

Once the installation is complete, a Figma sample file will open for you to try out. You need to log in to your Studio.Design account to use the plugin. If you haven't created an account yet, please create one first.

Launch the plugin and log in to your Studio.Design account. Then select the layer or frame you want to copy.

On the preview screen, you can check the responsive state and toggle the auto responsive conversion on or off.

After reviewing, click "Copy to Clipboard" and switch to the Studio.Design editor. Paste on the page (⌘ + V on Mac, Ctrl + V on Windows), and the copied elements will be imported onto the currently selected page.

With Page Mode (Beta), you can import multiple frames into Studio.Design at once and create a project.

If you name your frames starting with "/", the plugin will recognize them as pages. If you set up links in Figma's Prototype tab, those link settings will also be imported into Studio.Design.

Prepare frames with names starting with "/" and launch the plugin.

Click "Page Mode (Beta)" in the plugin window, and the detected frames will be displayed as pages. You can check the responsive state on the preview screen and toggle auto responsive conversion on or off.

After reviewing, click "Create New Project." A loading indicator will appear while the project is being created, and once it's done, you'll be redirected to the Studio.Design project in your browser. The project name will be taken from the Figma page name, and you can change it later if needed.

If you experience layout issues during import, we'd appreciate it if you could report them using the report feature. Any data you submit will only be used to improve the plugin and will never be shared publicly.

*If the plugin itself isn't working, or you suspect a bug with the plugin or the Studio.Design app, please contact Studio.Design chat support.

How to use our support channels

Launch the plugin, click the menu in the top left, and select "Report a Problem." Select the layer or frame you want to report, and copy it with ⌘+C (Windows: Ctrl+C).

Paste it into the "2. Paste" field in the plugin with ⌘+V (Windows: Ctrl+V).

Enter the details of the issue you'd like to report, and click Submit.