From Figma to Expo Router — turning wireframes into RN scaffolding in an afternoon

Designer-dev handoff on RN apps has a specific waste: I finish wireframes, hand them to dev, and then wait a day or two while someone types out Stack.Screen name="Foo" component={FooScreen} for every one of my screens. It's mechanical work, but it blocks me from clicking through my own design in a real device.

Expo Router's file-based routing changed that for me. As a designer, I can now scaffold the entire route structure of a new prototype in an afternoon — no dev required until I want interactivity beyond navigation.

Reading a wireframe as a folder tree

Every well-organized Figma file already has an implicit tree: pages → frames → sub-flows. Turning that into an Expo Router app/ folder is a mechanical mapping:

• Top-level pages in Figma → top-level files in app/
• Sub-flows within a page → nested folders
• Modal flows → files at the top level marked with presentation: 'modal' in the parent _layout.tsx
• Auth-gated flows → wrap in (auth)/ group

Example: a 12-screen social-app prototype with home feed, explore, profile, and auth flow becomes:

app/
├── _layout.tsx
├── (tabs)/
│   ├── _layout.tsx
│   ├── index.tsx        # Feed
│   ├── explore.tsx
│   └── profile.tsx
├── (auth)/
│   ├── _layout.tsx
│   ├── login.tsx
│   ├── signup.tsx
│   └── forgot.tsx
├── post/[id].tsx        # Post detail
├── user/[id].tsx        # User profile detail
├── new-post.tsx         # Modal
└── settings/
    ├── _layout.tsx
    ├── index.tsx
    ├── notifications.tsx
    └── account.tsx

Each file gets a placeholder component with the screen name, a text You are on: Feed, and a couple of <Link> components pointing at the next screens per the wireframe.

The scaffolding script

I wrote a tiny script — you copy a JSON that mirrors your Figma page tree, and it generates the folder + file structure with placeholder components. Nothing fancy:

// scaffold.mjs
import fs from 'fs';
import path from 'path';

const tree = JSON.parse(fs.readFileSync('./ia.json'));

function render(name) {
  return `import { View, Text } from 'react-native';
export default function ${name}() {
  return <View><Text>You are on: ${name}</Text></View>;
}
`;
}

function scaffold(node, dir) {
  fs.mkdirSync(dir, { recursive: true });
  for (const [key, val] of Object.entries(node)) {
    if (typeof val === 'string') {
      fs.writeFileSync(path.join(dir, `${key}.tsx`), render(val));
    } else {
      scaffold(val, path.join(dir, key));
    }
  }
}

scaffold(tree, './app');

With ia.json derived from your Figma page tree (I copy-paste layer names), you get a runnable Expo Router app in seconds. npx expo start, click through your own design, feel the flow before writing a line of real UI code.

What still needs a dev

• The _layout.tsx files: tab bar styling, header options, auth gating, transitions.
• Any real data fetching or state.
• Custom transitions (modal presentation, shared element).
• Anything that touches native modules.

But structure? That's mine now. And structure is what determines whether the design feels right in-hand.

Case study

Last month we prototyped a 12-screen fitness-tracker concept. Old workflow: hand Figma to dev, wait 2 days for a clickable prototype. New workflow: I scaffolded the routes in an afternoon, walked through it on my own phone the same evening, caught two flow issues before dev started real work, and by the time engineering opened the ticket the IA was already validated.

Designer-authored scaffolding won't replace engineering. It moves the design-validation gate 2–3 days earlier — which for us has been the single biggest reduction in "we shipped the wrong flow" incidents.

---

If you're a design lead on an RN team and you're still handing wireframes to dev to translate into a nav tree, try scaffolding once. You'll never go back.

If you want to go beyond scaffolding and generate a complete mobile app from your designs and requirements, you can also try RapidNative: RapidNative