Import Figma Design

What is Figma import?

Figma import transforms your design mockups into functional mobile applications. App2 analyzes your Figma file, extracts screens and components, and generates React Native code that matches your design.

What gets analyzed:

• Screen layouts: Component structure and positioning

• Navigation flows: Connections between screens

• Design tokens: Colors, typography, spacing, shadows

• Interactive elements: Buttons, inputs, cards, lists

• Component hierarchy: Nested elements and relationships

What you get:

• React Native mobile app (iOS & Android)

• Organized by scenes (screens)

• Frontend and backend separation

• Visual progress tracking

• Flexible implementation workflow

Note: Figma import currently supports mobile apps only (React Native/Expo). Web app support coming soon.

Prerequisites

Before importing your Figma design, ensure you have:

1. Figma account: With access to the design file you want to import

2. App2 account: Free or Pro subscription

3. Figma file prepared: Screens organized and named clearly

4. Credits available: Import cost varies by design complexity

5. Mobile app intent: Figma import creates mobile apps (not web apps)

Recommended Figma file structure:

• One page with all your screens

• Clear, descriptive frame names

• Organized components

• Defined navigation flows

Step-by-step import

Step 1: Connect Figma account

First time using Figma import? Connect your Figma account.

1. Click "Import Figma" on App2 homepage

2. Modal opens asking for Figma URL

3. If not connected, click "Connect Figma account"

4. Redirected to Figma for authorization

5. Grant App2 access to your Figma files

6. Redirected back to App2

Your Figma account is now connected to App2.

Note: Connection persists across imports. You only need to connect once unless you revoke access.

Step 2: Get your Figma URL

Copy the link to your Figma design file.

How to get the URL:

1. Open your Figma file

2. Find the page containing your app screens

3. Right-click on the page name

4. Select "Copy link to page"

5. URL copied to clipboard

Correct URL format:

• https://www.figma.com/design/FILE_KEY/File-Name?node-id=...

• https://www.figma.com/file/FILE_KEY/File-Name

Step 3: Paste Figma URL

Enter your Figma URL in the import modal.

1. Paste URL into the input field

2. Optionally choose project visibility:

   • Public: Free tier, visible to everyone

   • Private: Pro tier only, workspace members only

3. For Lifetime Pro subscribers: Toggle BYOK to use your own API keys

Step 4: Start import

Click "Import Figma design" to begin analysis.

What happens:

• App2 fetches your Figma file

• Analyzes all screens and components

• Extracts design tokens

• Identifies navigation flows

• Creates project record

Progress shown:

1. Fetching design details from Figma

2. Analyzing screens and components

3. Creating Figma project

4. Storing scene images

5. Generating app flow

This typically takes 1-3 minutes depending on design complexity.

Step 5: Review scenes

After analysis, the storyboard editor opens showing all detected screens.

What you'll see:

• Scenes: Individual screens from your design

• Categories: Grouped screens (e.g., Auth, Home, Profile)

• Scene cards: Thumbnails of each screen

• Relationships: Connections between screens

Scene information:

• Scene name (from Figma frame name)

• Thumbnail preview

• Category assignment

• Related scenes

Step 6: Organize your app flow

Arrange scenes into categories and define relationships.

Organizing tools:

• Drag and drop: Move scenes between categories

• Create categories: Add new groups for organization

• Delete categories: Remove unused groups

• Scene relationships: Define which screens connect

Categories purpose:

• Group related screens together

• Organize implementation workflow

• Track progress by feature area

• Navigate scenes in Quick Actions

Validation:

• Each category needs at least one scene

• All scenes should have relationships (connected flow)

• Empty categories must be deleted

Tip: Name categories by feature area: "Authentication", "Main Flow", "User Profile", "Settings"

Step 7: Start building

Once your storyboard is organized, start the build.

1. Review all scenes and categories

2. Click "Looks good! Let's build this."

3. App2 creates project infrastructure:

   • GitHub repository

   • Development sandbox

   • Initial chat session

4. Redirected to your project workspace

You're ready to start implementing your scenes!

Understanding scenes

Scenes represent individual screens from your Figma design.

What are scenes?

Each screen in your Figma file becomes a scene in App2.

Scene components:

• Name: From Figma frame name

• Category: Grouped by feature area

• Thumbnail: Visual preview from Figma

• Phases: Frontend and Backend implementation

• Relationships: Connections to other scenes

Frontend vs Backend phases

Each scene has two implementation phases you can work on separately.

Frontend phase:

• UI implementation

• Styling and layout

• Visual components

• Animations and transitions

• User interactions

Backend phase:

• Data fetching

• API integration

• State management

• Business logic

• Database queries

Flexible workflow: Implement in any order:

• All Frontend first, then all Backend

• Or complete both phases per scene

• Jump between scenes freely

• Work based on priority

Scene categories

Categories organize related scenes into logical groups.

Example categories:

• Onboarding: Welcome, signup, tutorial screens

• Authentication: Login, register, forgot password

• Main: Home, feed, dashboard

• Profile: View profile, edit profile, settings

• Checkout: Cart, payment, confirmation

Why categorize:

• Easier navigation in Quick Actions

• Track progress by feature area

• Organize team workload

• Reference groups in prompts

Working with Figma projects

Once your Figma project is created, use specialized tools to implement scenes.

Selecting scenes

Use Quick Actions to choose which scene to implement.

How to select a scene:

1. Click + button → Figma Flow

2. Browse scenes by category

3. Click a scene (e.g., "Home Screen • Frontend")

4. Prompt auto-filled: "Implement Home Screen • Frontend"

5. Send message

AI implements that specific scene based on the Figma design.

Progress tracking

Visual indicators show implementation progress.

Where you see progress:

Session header:

• Frontend/Backend phase tabs

• Completed/total scenes count

• Color-coded chips (green = done, gray = pending)

Figma storyboard:

• Overview of all scenes

• Per-scene completion status

• Category-level progress

• Frontend and Backend progress separate

Quick Actions:

• Completion badges on scenes

• Filter by completion status

Marking scenes complete

Track what's been implemented.

How to mark complete:

1. Open Figma storyboard (Figma button in chat)

2. Find the scene

3. Click Frontend or Backend phase chip

4. Toggles between complete (green) and pending (gray)

Completion is optional:

• Purely for progress visualization

• Doesn't block access to other scenes

• All scenes always accessible

• Mark scenes as you finish them

Flexible scene workflow

Work on scenes in any order you prefer.

Flexibility features:

• Jump to any scene: No sequential requirement

• Skip scenes: Work on high-priority screens first

• Switch phases: Do Frontend or Backend in any order

• Revisit scenes: Return to completed scenes anytime

Suggested workflows:

Frontend-first:

1. Implement all Frontend phases

2. Visual consistency achieved

3. Then implement all Backend phases

Scene-by-scene:

1. Complete both phases per scene

2. Fully functional screens one at a time

3. Move to next screen

Priority-based:

1. Implement critical screens first

2. Core functionality first

3. Polish screens last

Best practices

Preparing your Figma file

Before importing:

Organize screens:

• Put all app screens on one page

• Use clear, descriptive frame names

• Group related screens together

• Remove test/draft screens

Name frames well:

• "Home Screen" not "Frame 1"

• "Login" not "Rectangle 45"

• "User Profile" not "Component"

• "Product List" not "Screen"

Clean up layers:

• Use proper component structure

• Remove hidden/overlapping elements

• Simplify complex nested groups

• Use consistent naming

Design tokens:

• Use Figma styles for colors

• Define typography styles

• Use consistent spacing

• Apply shadows and effects systematically

Naming conventions

Good frame names:

• "Onboarding - Welcome"

• "Auth - Login"

• "Home - Main Feed"

• "Profile - Edit"

• "Settings - General"

Poor frame names:

• "iPhone 14 Pro - 1"

• "New Screen"

• "Copy of Home"

• "Frame 234"

Organization tips

Categories:

• Create 3-7 categories for most apps

• Name by feature area, not screen count

• Keep related functionality together

Scene relationships:

• Define navigation paths

• Connect screens that link together

• Creates cohesive app flow

Implementation order:

• Mark core screens as high priority

• Implement foundational screens first

• Leave polish/detail screens for later

Troubleshooting

Figma account won't connect

Issue: OAuth fails or connection doesn't work.

Solutions:

1. Check you're logged into Figma in the same browser

2. Try connecting in incognito/private mode

3. Clear browser cache and cookies

4. Verify Figma account has file access

5. Try different browser

Import fails with error

Issue: "Import failed" message after pasting URL.

Solutions:

1. Verify URL is from Figma (contains figma.com)

2. Check you have view access to the file

3. Ensure file isn't private/restricted

4. Try copying URL again (might have extra characters)

5. Confirm Figma connection is active

No scenes detected

Issue: Analysis completes but shows 0 scenes.

Solutions:

1. Verify your Figma page has frames

2. Check frames are top-level (not nested in other frames)

3. Ensure frames are visible (not hidden)

4. Try selecting a different page in Figma

5. Check frame names are not empty

Scene thumbnails not showing

Issue: Scenes appear but no preview images.

Solutions:

1. Wait a few more seconds for images to load

2. Refresh the modal

3. Check Figma file permissions

4. Verify frames have content (not empty)

Can't organize storyboard

Issue: Drag and drop not working or scenes won't move.

Solutions:

1. Ensure at least one category exists

2. Try creating new category and moving scene there

3. Refresh browser if stuck

4. Check browser console for errors

Empty categories warning

Issue: "Assign scenes to every category" error when trying to build.

Solution: Every category must have at least one scene. Either move scenes into empty categories or delete the empty categories.

FAQ

What Figma files can I import?

Any Figma file you have view access to. The file should contain screen mockups as top-level frames on a page.

Does Figma import work for web apps?

Not currently. Figma import only supports mobile apps (React Native/Expo). Web app support is coming soon. For web apps, use the prompt-based approach instead.

How many screens can I import?

No hard limit. Larger files (100+ screens) may take longer to analyze and cost more credits. Most apps have 10-30 screens.

Will App2 match my design exactly?

App2 generates code that closely matches your Figma design, including colors, typography, spacing, and layout. Some design elements may require fine-tuning through chat prompts.

Can I import from Sketch or Adobe XD?

Not currently. App2 only supports Figma imports. Export your designs to Figma to use this feature.

How much do Figma imports cost?

Credit cost varies based on design complexity and number of screens. Larger, more complex designs consume more credits. Lifetime subscribers can use BYOK (bring your own keys) to avoid credit usage.

Can I re-import if I update my Figma design?

Currently, no. Import creates a one-time snapshot. Updates to your Figma file won't automatically sync. You can describe changes in chat for the AI to implement.

What happens to my Figma file after import?

Nothing. App2 reads your Figma file but doesn't modify it. Your original design remains unchanged in Figma.

Can I use the same Figma file for multiple projects?

Yes. Import the same file multiple times to create different variations or test different approaches.

Do I need to implement every scene?

No. Scenes are optional. Implement only the screens you need. Delete unused scenes from your storyboard before building.

Can I add screens after import?

Yes. After import, you can ask the AI to create new screens through chat prompts. You're not limited to only Figma-imported screens.

Related links

• Getting Started

• Projects - Understanding App2 projects

• Quick Actions - Selecting scenes

• Chat Modes - Building your app

• Private Projects - Public vs private

• Plans and Credits