01
Layout to utilities
Auto Layout, spacing, color, and text properties feed the deterministic NativeWind mapping pipeline.
Design codegenPublic · MIT
Design to NativeWind
Turn the selected Figma subtree into React Native code without turning the design handoff into guesswork.
The conversion core operates on a plain intermediate representation. React Native and NativeWind are the first-class output; naming and structural cleanup can optionally use an assisted pass.
Live field notesPublic surface
01figma.selectionextract
02design.irnormalize
03nativewind.mapdeterministic
04component.tsxpreview + copy
Conversion pipeline
Selection in. Reviewable component out.
The Figma-dependent extraction stays at the edge. Mapping and generation remain isolated from the host runtime so the core behavior can be tested against plain IR.
- 01
Extract selection
Read the selected Figma subtree, Auto Layout, spacing, color, and text data.
- 02
Build the IR
Normalize the selection into an intermediate representation outside the renderer.
- 03
Map styles
Map layout and style properties to NativeWind utilities through explicit rules.
- 04
Generate code
Emit React Native components ready for preview, copy, and project integration.
Current capability
Deterministic where it matters. Assisted only when invited.
02
Vector to JSX
Vector nodes export through Figma and become react-native-svg JSX in the generated component.
03
Component extraction
Repeated subtrees can be hoisted into sub-components instead of duplicating the same generated structure.
04
Theme token mapping
An imported Tailwind or CSS theme can map design colors back to named project tokens.
05
Optional cleanup pass
The rule-based result stands on its own; an optional assisted pass can refine naming and structure.
06
Two Figma surfaces
Use the Dev Mode code generator or run the plugin with its preview-and-copy interface.
Output boundary
React Native first.
Current target
React Native + NativeWind
Expo-compatible component output with NativeWind utility classes is the shipped, first-class renderer.
Figma Community / public plugin