How To Import a Figma Design To Your Website

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, No expiration — Indefinite. You can also choose the token expiration period of 1 day, 7 days, 30 days, and 90 days.

In the Scopes area, you now need to select access rights for the key.

For Current user, Dev resources, File content, File versions, Library assets, Library content, and Projects options, select the Read-only access value. And then click on Generate token to create a token.

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

Click on the three dots menu in the upper right corner in Zero Block and select the "Import from Figma" option from the drop-down menu.

On Figma, select the Layout you want in the Layers panel, the Frame you need, and copy the Frame link from the browser address bar.

For the import to be correct, you need to add one Figma frame to one Zero Block

Paste this link to the Layout URL field and add the API token obtained in the Figma settings to the API Token field.

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: 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.

Any group can be imported as an image. For this, you need to specify "image" in the group name on Figma. 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 name it as "button."

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.