Considering you want to convert Figma, we can assume you have your design ready. Export Kit takes the headache out of the export process and will save you lots of time and budget with your projects.

Rule 1: No Empty Layers

You cannot have empty layers in Export Kit, otherwise the export may have display errors. Here is a list of empty layers:

• A layer with no name
• A layer with no image/shape
• A text layer with no text
• A folder with no child layers

Rule 2: Organize Frames, Layers and Folders

The Export Process will translate each individual Frames to a native page, each individual layer to its native type; so the more layers you use – the more control you have over the output. You should always group your layers into folders if they are related – read more about Organizing Folders and Layers.

Eg. If you have layers that belong to a menu, then you should group those layers and name the group “menu container”.

You can further organize your layers by grouping individual buttons into folders also: “home button”, “contact button”, etc.

Rule 3: WYSIWYG

What You See Is What You Get! If you zoom in to 100%, what you see in your Figma design – is what you will see in the output. You should always build your default export first (what you expect to see), then customize your final output.

Frames are *Pages*

RECOMMENDED: Use as many Frames as possible to reflect your project page / screen structure.

All designs in Export Kit should start at 0,0 will render similar to your design. Stacking content and using Layer Tags allows you to customize your output to match your project requirements.

Move Frames Top-Level

VERY IMPORTANT

You should only add Frames to Level 1 (or the first level within a Page). Export Kit will process Level 1 frames as native pages *only*. If you do not have Level 1 frames then you may get unexpected output results!

The Figma sandbox allows for extreme flexibility when creating designs – these do not always translate to exports. Exports should only have the content required to convert your project, all other elements should be removed.

Create a Background Layer with Folders

VERY IMPORTANT

Do not add layer effects to folders in Figma, this includes Groups, Inner Frames, Components, and Component Instances.

IMPORTANT: Not all environments support folder effects.

Instead add a Shape Layer to the folder and copy the effects to the shape. This will act as a background to the folder and is supported in almost all environments.

Content Margin Space

AVOID: If your Figma design has the content margin at 500px - your Output content will start at 500px.

Your content will render in the position you place it within your design. When you margin content in your design, the margin will also convert in the output.

✱ NOTE: Avoid using wide margins in your design, eg. to center content - you can control this with Export Kit when you Customize your Alignment.

Rule 4: Layer Ordering is Important!

Export Kit is a Bottom-Up process. This means Export Kit works how you would naturally create designs in Figma wihtout changing your design style. Each layer is processed starting from the last or bottom layer (typically the “Background” layer), then up. Read more about Organizing Folders and Layers.

Changing your layer order will NOT affect your visual output when Dynamic Height is NOT enabled.

Incorrect layer order WILL affect your visual output when Dynamic Height IS enabled.

⛔ IMPORTANT: remember to use FOLDERS with Dynamic Height and not Layers to avoid display errors - read more.