Figma to React Native

All in One Figma to React Native plugin. Design Tokens + Code Generation + Sync with GitHub in one single plugin!

✅ FeaturesImport Figma Styles into Design Tokens like Color Styles, Text Styles, Effect Styles and Grid Styles.

Batch edit Figma Properties using Design Tokens. Choose a token and update all Figma linked properties at once.

Generate React Native code for any selected Figma Node. If you are using Auto Layout, generate responsive / usable React Native code for any Figma Node you select (i.e. an entire screen/frame or just a container). Choose between StyleSheet, Restyle (including Restyle Theme) and styled-components libraries for the generated code.

✅ How does it work?

First, create as many Figma Styles as you want and use them on your Figma Document. Once you open the plugin, it will automatically convert them into Design Tokens and you will be able to export them to JSON or directly send to a GitHub repository.

On the plugin UI, create as many custom Design Tokens as you want. Create tokens for sizes, spacing, borders etc, link them to Token Groups (you can also create groups like Sizes, Spacing, etc) and they will be also exported to code whenever you want.

On the plugin UI, link your tokens to Figma properties. When the plugin is opened and you select a Figma Node (like a Frame representing a screen), you can see all node properties on the Properties Tab. Link any of those properties to any of your Design Tokens (i.e. paddingBottom to a XL Spacing token, for example). Later you will be able to change your token value and update all linked properties at once.

Where is the plugin data stored? All the plugin data is stored as part of the Figma document / file. The data you see when you open the plugin depends on which document is opened at the moment (current page doesn't matter).

Who can see my Design Tokens? If you have a team of designers and developers, anyone that access the same document and open the plugin inside it will be able to see and update the tokens (including properties linked tokens).

🚧 RoadmapSupport StyleSheet code generationSupport Restyle code generation (currently only theme code is generated properly)Smart Tokens (ability to use percentage and math expressions to token values)Auto update Figma when tokens are changed