Figma -> React Native

About this plugin

Figma To React Native

Description

Transforms Figma components to React Native components in real time. The goal is to reduce the handoff time between design and development. Design your UI components in Figma and export them for use in your React Native app. The focus is on one way, continuous, conversion from Figma to React.

Getting Started

Run the plugin and select a Figma component. The plugin will generate React component code and render a preview. To change the settings, click the cog icon and edit the JSON. Settings will save and update in real-time. You can change the configuration of the editor, plugin, compiler, code output, and more.

Features

✨ Realtime code and preview rendering

🔧 Flexible and realtime config

🎨 Theme generation from styles

📦 Batch exporting of components and assets

🏞 Asset exporting of rasters and vectors

⭐️ AutoLayout to Flexbox translation

🎲 Variants and properties support

🧩 Figma variables support

🧱 Nested components support

🎭 Conditional rendering

🪟 Borders and rounding

🔄 Rotations and effects

🏔 Background gradients

📚 Storybook syncing

📖 JSDoc generation

💡 Dark/light mode

Resources

1. Discord Channel
2. Source Code
3. Discussions
4. Issues