How To Import a Figma Design To Your Website

Go to the Figma dashboard and click on your profile picture → Settings.

On the Account tab, scroll down to the "Personal access tokens" section and enter the name of the token, e.g., "Tilda."

Copy the token value to use it for importing.

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