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
1
2
3
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.
important:
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
important:
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 -> Text1Text -> text1Text -> Some your text
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 -> circleShape -> rect Shape -> line
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-212Image -> 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
