How to Import a Figma Design to HTML Website in Airtap

3 easy steps

Prepare Figma file with layout requirements.

Get Figma API access token.

Select block and import your design in minutes.

Figma file & layout requirements

At Airtap, we use a block system where the website has separate sections for convenient use. We recommend that you divide your project into sections and add to Airtap from Figma section by section.

Then create a separate file with one section of your landing and responsive screens. The Figma integration only works with responsive screens. Your file should contain three frames with three names: desktop, tablet, mobile.

• desktop: 1280 px
• tablet: 768 px
• mobile: 375 px

Elements naming

All frame and element names in your Figma file should start with small caps. In each responsive frame, the elements must have the same names. Otherwise you will get an import error.

Text elements should use names such as text_1, text_2 and text_3. Image elements should use image_1, image_2 and image_3. Shapes can use names such as circle, rect and line, or rectangle_1, rectangle_2 and rectangle_3.

If an image has a mask in your file, create a group from it and name it image_1. If you have groups in the Figma file you are importing, you will get import errors because groups were not supported by the original integration. Buttons should be grouped and named button_1.

How to get Figma API access token

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, for example Airtap.

You should copy the file ID as well.

Start process

Select the block by clicking on it. Click on the button “Add block from Figma”. Add your API token from the previous step and the file ID from Figma. Paste, click on add and wait.