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