Figma to HTML, Android, iOS, React, Xamarin, WordPress, JavaFx

Figma Resource

Create web, mobile and desktop apps instantly from your Figma Designs with Export Kit.

Usage Limits

Free: Unlimited Layers / 1 Page / 25 exports per month

Paid: Unlimited Layers + Pages + Exports


* HOW TO USE PROTOTYPES *

  1. Your component and variants need to be in the same frame as your export, or in the

    ${global}

    frame for multiple pages
  2. Component variations *

    must have unique names

    *
  3. Each component instance *

    must have unique names

    *
  4. Enable

    Prototype

    under the Export button


Getting Started


* FREE FOR PERSONAL USE *

Considering you want to convert Figma, we can assume you have your design ready. Read more about the

Figma Design Rules

before you begin to avoid errors. Learn more about

Using Export Kit with Figma

to get started quickly.


All Tutorials work with both Figma and XD

HTML Tutorial:

Responsive Layouts:

Responsive Styles:

Login Forms:

Android Tutorial:

XCode Tutorial:

Xamarin Tutorial:

React Tutorial:


Rule 1: Organize Frames, Layers and Folders

You should always group your layers into folders if they are related and

*name your layers*.

Read more about

Organizing Folders and Layers

and

Layer Naming Rules

.


Rule 2: Frames Are *Pages*

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.

Read our

Optimization Tips

to get detailed examples of user cases and common errors/fixes.

—

Related Posts