figma-to-react-native

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

The x-ref, tokens, and component library are designed to stay in sync: each RN component's prop surface mirrors its Figma variant properties, which is what makes a new mapping a data edit (one x-ref entry) rather than code.

Workflow

1. Get the input into IR shape. The generator expects a normalized IR — a node tree with type, name, component, props, layout, style, fills, children — not the raw Figma REST API. If the export is raw Figma or a plugin format, normalize it first, or extend scripts/figma_rn/walk.py. Unsure of the shape? Ask for a sample instead of guessing, and read references/figma-ir-schema.md.

2. Run the generator (no install — pure stdlib):

cd scripts
python3 generate.py --in path/to/screen.ir.json --out ./generated --emit-settings
# --name MyScreen   override the exported component name
# --xref path.json  use a different cross-reference
# --emit-settings   also write <Screen>.settings.json (resolved props per instance)

Output: generated/<Screen>.tsx importing from @/components.

3. Review and integrate. Skim the .tsx: components come from @/components, colors/type are token classes (bg-primary-600, variant="body/md") — never raw hex (an off-palette color logs a warning). Then point the app's tailwind.config.js at assets/design-tokens/tailwind.preset.js, copy assets/components/ + assets/design-tokens/ into the app, and set the @/components alias.

4. Extend when a component is missing. Unmapped nodes degrade to Stack/View/Text so the screen still compiles, but map them properly by following references/xref-format.md: build the RN component, export it, add an x-ref entry with its propMap. To adjust palette or type scale, edit assets/design-tokens/ — the generator's token matching and the NativeWind preset both read it, so they can't drift. For how a node becomes JSX (resolution order, px→spacing, color/type matching), see references/generation-rules.md.

Whenever you add a new component or mapping, end with a short summary naming what was added, for example: "Added: Checkbox, Avatar, and Badge".

Verifying changes

• Generator syntax: cd scripts && python3 -m compileall figma_rn generate.py
• Output compiles: generate into scripts/.gen/, then npm install (first time) and npx tsc --noEmit -p tsconfig.output.json