figma-to-react-native
Installation
SKILL.md
Figma IR JSON → React Native screen
Turn a normalized Figma export (IR JSON) into a NativeWind-styled React Native
screen built from a first-party component library and design tokens. A Python
script (scripts/generate.py, standard library only) does the mechanical work —
walking the tree, mapping each Figma component to its RN counterpart via a
cross-reference, and resolving colors/type to tokens — so the output is on-system,
not raw <View>s and hardcoded hex. Because the script does the transform, you
rarely need to read the IR or write JSX by hand.
What's in this skill
| Piece | Path | Role |
|---|---|---|
| Generator | scripts/generate.py (+ scripts/figma_rn/) |
IR JSON → .tsx screen (+ optional settings) |
| X-ref | assets/component-xref.json |
Figma component name → RN component + prop mapping |
| Component library | assets/components/ |
RN counterparts (Screen, Stack, Text, Button, Card, Input, Image) |
| Design tokens | assets/design-tokens/ |
tokens.json (canonical), re-exported by colors.ts/typography.ts + tailwind.preset.js |
| Reference docs | references/ |
IR schema, x-ref format, generation rules — read only when extending or debugging |