How to Import a Figma Design to HTML Website in Airtap

You can automatically import a Figma design to Airtap with our custom Figma integration Plugin

3 easy steps

Prepare Figma file with layout requirements

Get Figma API access token

Select block & 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. So, we recommend that you divide your project into sections and add to Airtap from Figma section by section. 

Let's look at an example:

Your Figma landing

Airtap block system

Then, please, create a separate file with one section of your landing with responsive screens.

Note that the Figma integration only works with responsive screens. Your file should contain 3 frames with 3 names: desktop, tablet, mobile.


So, you should make structure in Figma project of frames like this with 3 type of resolutions. Called frames like desktop, tablet, mobile.  
- desktop: 1280 px 
- tablet: 768 px 
- mobile: 375 px


All frame & element names in your Figma file should start with small caps.

In each of the responsive frames in your file, the elements must have the same names. Instead you have an import error.

Elements naming

Right naming in Figma file for import:

False naming in Figma file for import:

Text -> text_1, text_2, text_3



Text -> Text1
Text -> text1
Text -> Some your text

Image -> image_1, image_2, image_3

If the image has a mask in your file, you should create the group from it and name it as image_1.

Shape -> circle
Shape -> rect 
Shape -> line

Shape (rectangle, line, circle) -> rectangle_1, rectangle_2, rectangle_3

If you have groups in the Figma file you are importing, you will get import errors. You'll need to ungroup them as we don't support groups at the moment.

If you have button in the Figma file you are importing, you need create a group and name it like button_1.

Image -> JdcsJc31-212
Image -> image.jpg

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, e.g., "Airtap."

You should copy file ID as well

Start process

1. Select the block by clicking on it

2. Click on the button "Add block from Figma".

Now we need to add your API token from previous step and file ID from Figma.

 Paste, click on add and wait. Thats it!

How it looks the full process

How to Import a Figma Design to HTML Website in Airtap


This site uses cookies. By using this site, you agree with theΒ Privacy Policy