Vigma RN is a Fimga-like VS-Code extension, but with real-time codegen for React Native (Expo)1. It's currently in open beta, free of use.
Features
Real-time Design to Code
Build UI visually: code will be generated in real-time.
UI Pointing
The element you're coding is highlighted in GUI, real-time.
Code Pointing
Double click an element to locate the corresponding code.
Independent Component Rendering
Components can be rendered independently, with Storybook (CSF 2.0 & 3.0) support.2
Screenshot to Code (New!)
Drop an image, get the code. (Read more about Screenshot to Code)
Figma to Code
By installing VigmaRN Figma-plugin (opens in a new tab), you can export your Figma design into code. See more about Figma to Code
Footnotes
-
It relies on React-Native-Web to render the component. So it's not a 100% accurate representation of how it will look on a mobile devices. But it should be close enough for most cases. ↩
-
Only simple storybook is supported. No knobs, no actions. The storybook file should have the same basename as the component file. For example, if you have a component file
PersonCard.tsx, the storybook file should bePersonCard.stories.tsx↩