[Figma to Studio] Let's automatically build designs created in Figma in Studio!

A no-code platform for creating websites, "Studio," has released a tool called "Figma to Studio" that allows you to import designs created in Figma.

This plugin is expected to dramatically increase the implementation speed in Studio.

This time, we will explain how to use "Figma to Studio."

※ This article is based on information as of May 2024.
Please note that there may be changes due to service updates.

What you can do with Figma to Studio

There are mainly three points that you can do.

1. Automatic conversion of Figma data to box layout

2. Automatic responsive design support

3. Automatically add image materials and fonts available in Studio to the project

In Figma, you often add additional frame elements within a frame and use auto layout features to build designs.

The "box" in a website serves the role of a "frame" in Figma, so
keeping this in mind while designing the site in Figma will make it easier to understand during Studio implementation.

How to use Figma to Studio

① Install the plugin in Figma

Let's install the plugin from the page below.

https://www.figma.com/community/plugin/1274345780965443906/figma-to-studio

At this point, you will need a STUDIO account, so if you haven't registered yet, please do so.

② Launch the plugin "Figma to Studio" in Figma

Open the design data you want to import, and launch the plugin > Figma to Studio.
It's convenient to bookmark Figma to Studio at this time!

④ Copy the design you want to import

When you launch the plugin, a window will open.

In this state, select the layers or frames you want to import.
When selected, a preview of what will be implemented in Studio will be displayed.
You can confirm three types of views: PC, tablet, and mobile.

Next, select "Copy to clipboard."
(It may appear distorted, and text may overlap, but it is the button indicated by the red frame)

Once the copying is complete, the button color will change, and it will indicate "Copy completed!"
Depending on the amount of data, it may take some time to complete the copy, so please wait until the indication changes.

⑤ Open Studio

Open Studio and create a new project.

Please select "Start from blank" for the project.
Once a new project is opened, paste the data you copied in Figma.

Once pasting is complete, as shown above, click "Import design" to
import the design.

Once the import is complete, you will transition to a screen like the above.
The left tab displays the imported image data.

While some adjustments may be necessary for spacing, line breaks, fonts, etc.,
the basic design data will be imported automatically.

However, if you design directly without using frames in Figma,
it is highly likely that the view will collapse in Studio.
Therefore, it’s important to properly use frames in Figma when building designs.

Precautions when using Figma to Studio

There are designs that are difficult to convert to Studio.
Be careful about the following seven points.

1. Designs with many layers

2. Overlapping design elements

3. If an image covers the entire background

4. If a transparency effect is used for the background fill

5. Elements using rotation in Figma

6. Vector images with many layers

7. Images or illustrations that are cropped using masks in Figma

If you encounter display distortion on Studio while using the above,
try importing in smaller units, such as sections, frames, or images, or
manually process corrections in Studio after import.

Summary of 【Figma to Studio】

Since it is a tool that has just been released, it is difficult to perfectly import all designs from Figma to Studio,
but I believe it saves a lot of time and allows for easier migration to Studio compared to starting from scratch.

Designers who have only created designs until now can create websites without relying on engineers or coders, making it a very convenient tool.

For designers who want to challenge themselves in the field of website production and expand their opportunities,
it is a recommended tool that is easy to introduce, so please give it a try!