In your Figma account, click on the Actions in the bottom toolbar and select the Plugins & widgets tab. In the search, enter the name of the Figma to Tilda plugin and click on it or add the plugin via the link.

Click on the Run button to activate the plugin.

It's ready! Now you can import layers and elements to Tilda.

Once you have added the plugin, select the layer you need in the layout. The selected layer will be displayed in the Selected layers field of the plugin window.

In the plugin window, click on the Prepare to copy button to get layers prepared for importing.

When the Frame is ready to be imported, click on the Copy to clipboard button.

Go to Tilda → open Zero Block and click on the keyboard shortcut: Ctrl+V on Windows или Command+V on Mac.

You can import the Frame as a separate group or with the settings applied to the artboard and all current elements replaced.

If the artboard already contains elements, then you can also insert the Frame as a group, but this option will delete all elements from the artboard.

When the "Apply settings to artboard" option is selected, the settings of the Frame's root layer will be applied in Zero Block: The background color or background image, Auto Layout, and other settings supported by Tilda will be changed.

When several Frames are inserted, the pop-up with import options will not be displayed.

Go to the Figma main page and click on View Profile → Settings under your profile picture.

Then go to the Security tab, go to the Personal access tokens block, and click on Generate new token.

In the new window, specify the name of the Tilda token and select its expiration period. For example, 1 day, 7 days, 30 days, and 90 days.

In the Scopes area, select the Current user, Dev resources, File content, File versions, Library assets, Library content, and Projects checkboxes. Now click on Generate token.

Copy this key after you have created it to specify it in the Import settings in Tilda. You cannot view the key again, just create a new key.

Click on the three dots menu in Zero Block and select the "Import from Figma" option.

Go to Figma. Open the Layout, select the Frame you need, and copy the Frame link from the browser address bar.

In the window that opens, add the link to the Frame and the API token obtained in the Figma settings.

Wait until the layout is imported.

If you have added the correct link and there are no errors on the Figma API side, the layout will be imported to Zero Block.

Note that by default, images are loaded from the Figma servers, so if you want to upload them to Tilda, you need to go to the settings of the elements containing images and click on Upload to Tilda.

Layouts must be created on a frame with a width of 1200px.

We recommend importing the layout to several blocks rather than adding the entire layout to just one block.

Any group can be imported as an image. For this, you need to specify "image" in its name. If you specify "svg," it will be imported as an SVG file.

You can import groups, too. If there are other groups inside, all elements will be in the first-level group.

To import a button, you need to merge the shape and text into a group and add "button" in its name. The text alignment property will also be imported, so we recommend that you make the width of the text element the same as the shape.

If the shape has an effect that cannot be reproduced in Zero Block, it will be imported with the effect image in the background.