This plugin 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.
- Install the plugin in Figma and run it.
- Select any Figma component on the screen.
- View the component code, render, storybook file, or theme file in real time.
- Go to the "Export" tab and choose which components to bulk export.
- To change the settings, click the cog icon and edit the JSON. Settings will save and update in real time.
| Feature | ||
|---|---|---|
| ✨ | Realtime code and preview rendering | ✅ |
| 🔧 | Flexible and realtime config | ✅ |
| 🎨 | Theme generation from styles | ✅ |
| 🎮 | Prototype interactions to components | ⏱ |
| 📦 | Batch exporting of components and assets | ✅ |
| 🏞 | Asset exporting of rasters and vectors | ✅ |
| ⭐️ | AutoLayout to Flexbox translation | ✅ |
| 🎲 | Variants and properties support | ✅ |
| 🧱 | Nested components support | ✅ |
| 🧩 | Figma variables support | ⏱ |
| 🎭 | Conditional rendering | ✅ |
| 🪟 | Borders and rounding | ✅ |
| 🔄 | Rotations and effects | ⏱ |
| 🏔 | Background gradients | ⏱ |
| 📚 | Storybook syncing | ⏱ |
| 📖 | JSDoc generation | ✅ |
| 💡 | Dark/light mode | ✅ |
| 💎 | Tamagui output | ⏱ |
Disclaimer: This plugin does not require an account, remote service, or any other bullsh*t. There will be an optional paid service for syncing and collaboration features to support development. Donations are also welcome.