How To Import a Figma Design To Your Website
You can automatically import a Figma design to Zero Block
How to get a Figma API Access token
Перейдите на главную Figma и нажмите под фотографией своего профиля View Profile → Settings.
Далее перейдите на вкладку Security, перейдите к блоку Personal access tokens и нажмите на Generate new token.
В новом окне впишите название токена Tilda и выберите срок его действия. Например, No expiration — Бессрочный. Также можно выбрать срок действия ключа на 1 день, 7 дней, 30 дней и 90 дней.
В области применения (Scopes) теперь необходимо выбрать права доступа для ключа.
В области применения (Scopes) теперь необходимо выбрать права доступа для ключа.
Для пунктов Current user, Dev resources, File content, File versions, Library assets, Library content и Projects установите значение для доступа Read-only. А затем нажмите на Generate token — создать токен.
Скопируйте этот ключ после создания, чтобы указать в настройках Import на Tilda. Посмотреть ключ повторно нельзя, только создать новый.
How to import a layout to Zero Block
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.
Layout requirements and import features
Layout
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.
We recommend importing the layout to several blocks rather than adding the entire layout to just one.
Groups
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.
You can import groups, too. If there are other groups inside, all elements will be in the first-level group.
Shapes and buttons
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.
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.
