Export Kit will convert all content in your Figma design to a working project respective of your selected output. Some projects such as HTML5 work out-of-the-box and can launch a visual render of your Figma document instantly. Other projects such as Android will require a native IDE such as Android Studio to load and compile.

Step 1: Layers

Layer Kit is designed to give a visual code rendering of your Figma layers in multiple code formats, along with quick image options for layers.

Select A View

Select your desired View using the dropdown menu. There are many environments supported by Export Kit:

HTML5
CSS
JavaScript
jQuery
Android UI
Android Styles
PHP
SVG
LESS
SASS
ASP
Silver Light
VB
XAML
Swift
XCode
JSON
XML

Export Layer Images

Select any layer or folder in your Figma document you want to export, then select the desired image output type.

Step 2: Images

Image Kit will allow for quick export of all Figma layers as various image types and will extend your design work-flow by allowing you to export your document as a snap shot, watermark or smart resize.

Toggle to Open

Press the toggle button to open the panel.

Snapshots and Watermarks

You can take quick snapshots of your current Figma document, this is the fastest way to give your client a preview of your progress You can Resize your snapshot on-the-fly with options for scaling the size of the image, or optionally choose to watermark your image and customize the watermark text included with the snap shot.

Smart Resize

Quickly resize your current Figma document with unlimited options for custom sizes.

IMPORTANT: Your design size should match the aspect ratio of your Smart Resize, otherwise your image may seem distorted as Figma will apply layout constraints to your design.

Smart Resize is preset with many common sizes based on industry standards. Select any one of the preset sizes to resize your design right away. Customize the sizes you want your document to resize to when exported. You can create unlimited size groups to generate all the required image sizes for your project.

Size Guide

100 = Max Width of 100px
100:50 = Max Width of 100px, Max Height of 50px
100:50,75:75 = Multiple Images, separate with comma ","

Step 3: Customize

Extend the functionality of the Export Process with your output.

Toggle to Open

Press the toggle button to open the panel.

Select your Language

Ask us to translate yours!

中国DeutschčeštinaEnglishEspañolFrançaisitalianoहिंदी日本人한국어فارسیελληνικάPolskiPortuguêsPусскийपंजाबी

Customize your Output

You can customize how Export Kit processes each Figma layer and document when exporting.

Validate

In a perfect world, all layer names are valid – in reality, most are not [Learn More]

Hidden

By default, Export Kit will not output layers that are hidden in most environments [Learn More]

Web Fonts

Web Fonts provide typeface information such as Font Name and Font Style where available for web [Learn More]

SVG

Many modern browsers and devices support Vector graphics, with SVG as the most common [Learn More]

CSS

Some Outputs support CSS background images, you can enable this feature by selecting CSS.

Responsive

You can also include responsive image assets to reduce the bandwidth on smaller devices such as mobiles [Learn More]

Inline

Inline content allows you to choose between two Build Patterns per environment (additional patterns to come) [Learn More]

Overflow

Overflow allows you to render your output content as seen the design, or fill the user screen [Learn More]

Dnyamic

Dynamic height will calculate the size of each view, based on the size of the elements [Learn More]

Hybrid

Hybrid will convert some layer effects and vectors to images where not supported in a particular environment.

Align

Customize where the content is aligned in your Output based on the user screen size [Learn More]

Step 4: Exports

TIP: For new users we strongly recommend you disable OVERFLOW and enable HYBRID in your custom options (see above).  This will ensure your design renders "As-Is".  Once you are comfortable you can change options and test the output results.

You have two export type options depending on your project requirements. You can export a single Frame as a self-contained project or all Frames as multiple pages / screens in a full project.

TIP: Disable Clip Content with your Frames for best results.

Select a Frame to export only that Frame

If you select a Frame or an element within an Frame, Export Kit will render that Frame as a self-contained project.

IMPORTANT: Do not place a Frame inside a Group otherwise it will export as an image.  All frames must be top-level in your layers.  Learn more about Figma Design Rules.

Select nothing and all Frames will export

If you deselect your Frames, your entire Figma document will export all Frames as respective pages within your project.

Select your Output Environment

Select your desired Output using the dropdown menu. Learn more about using each Output by clicking on the environment below:

HTML5
CSS
PHP
JavaScript
jQuery
Android Studio
Xamarin Forms
XCode
WordPress
JSON
XML

Export That Kit!

Click Export when ready to begin the export process… click… done!

TIP: Read our tutorials to convert your Figma design to HTML, JavaScript, Android, XCode, Xamarin Forms, or WordPress now.