In mobile app work, the time sink is rarely the implementation — it's the back-and-forth before the requirements settle. You sketch the screen flow, revise it, sketch it again, and the prototype loop quietly eats the schedule.
Handing information architecture to Gemini and letting Figma turn it into something clickable changed that balance noticeably. What follows is the sequence as it actually ran on a project, from requirements through user testing.
Phase 1: Requirements and Information Architecture with Gemini
Step 1: Structure Your Rough Idea
Don't overthink it. Even a sketchy concept works:
Input example:
"I want to build a food discovery app.
- Users upload food photos when eating out
- See other users' discoveries nearby
- Follow friends' food adventures
- Save favorite restaurants
- Chat about restaurants
Target: 20–40 year-old foodies
I'm still unclear on structure. Help me organize this?"
Step 2: Analyze Use Cases
Gemini breaks down user journeys:
"For this food app, list five key user flows.
For each, what screens would they navigate?"
Output:
Flow 1: Discover new restaurants
- Feed → Restaurant detail → Menu → Reviews
Flow 2: Share your experience
- Camera → Select photo → Tag restaurant → Write review → Publish
Flow 3: Follow friends
- Explore → Search user → View profile → Follow → See posts in feed
Flow 4: Save favorites
- Restaurant detail → Tap heart → View saved list
Flow 5: Plan next outing
- Saved list → Filter by cuisine → View details → Share with friends
Step 3: Generate Screen Navigation Diagram
Ask Gemini to map screens and navigation:
"Map out all screens and how users move between them.
Use a text-based flow diagram. Include these user types:
1. Casual browser
2. Active contributor
3. Social follower"
Output structure:
1. Tab Navigation (bottom, 4 tabs):
- Feed (user discoveries)
- Search (restaurant discovery)
- Create (upload experience)
- Profile (user info)
2. Feed Screen
- Photo + restaurant name + user + date
- Tap → Restaurant detail
3. Restaurant Detail Screen
- Large image slider
- Info (hours, address, phone)
- Tabs: Menu / Reviews / Map
- Actions: Save / Call / Open map
4. Search Screen
- Text search + filters (cuisine, distance)
- Results list → Restaurant detail
5. Create Screen
- Camera / gallery picker
- Tag restaurant
- Write caption
- Publish settings
6. Profile Screen
- User info
- Posts grid
- Follower counts
This becomes your design north star.
Phase 2: Prototyping in Figma
Step 1: Set Up Device Frames
Open Figma. Create frames for:
- iPhone 15 (390×844px) — Current standard
- Android (411×915px) — If supporting both
Step 2: Low-Fidelity Wireframes
Build simple, grayscale layouts based on Gemini's screen diagram.
Focus:
- Navigation structure is clear
- Element placement is logical
- Information hierarchy works
- No color, minimal detail yet
Step 3: Move to High-Fidelity
Ask Gemini for design specs:
"Design a food app color scheme and typography scale.
- Primary color: warm accent (food-focused)
- Target: 20–40 year-old foodies
- References: Instagram, TikTok food content
Provide:
1. Complete token definitions (JSON)
2. Color palette (5–6 colors)
3. Typography scale (heading, body, caption)
4. Spacing system"
Import Gemini's output into Figma Variables for consistent application across all screens.
Step 4: Build Components
Define reusable components:
Basic:
├─ Button (primary, secondary, ghost)
├─ Input field
├─ Card
├─ Badge (cuisine tag)
└─ Avatar (user profile pic)
Complex:
├─ RestaurantCard (image, name, rating, distance)
├─ ReviewCard (avatar, text, stars)
├─ PhotoCarousel (main photo + thumbnails)
└─ TabBar (4 tabs at bottom)
Step 5: Interactive Prototyping
Use Figma's Prototyping feature to wire interactions:
Tab Navigation:
- Tab click → Jump to corresponding screen
- Use "Smart Animate" for smooth transitions
Search Flow:
- Input text → Trigger results screen
- Filter button → Show filter modal
Restaurant Detail Actions:
- Heart icon → Color changes (saved state)
- Phone button → Confirmation modal
- Map button → Links to map app
- Menu tab → Shows menu content
Key prototyping tricks:
- Smart Animate — Smoothly transition identical elements between screens (e.g., restaurant photo)
- Overlay — Stack modals/keyboard over content with darkened background
- Scroll — Enable vertical scrolling within a frame for long lists
This creates an interactive prototype, not just static screens.
Phase 3: Information Architecture Refinement
Optimize Navigation Structure
Does the 4-tab bottom nav make sense?
"Analyze user frequency and flow.
Given these usage patterns:
- 40% browsing feed
- 30% searching restaurants
- 20% creating posts
- 10% checking profile
Is tab order optimal? Should creation be easier to access?"
Gemini analyzes and might suggest moving "Create" to a floating button or top position.
Detect Navigation Gaps
Test for logical inconsistencies:
"When viewing a restaurant detail, can users:
1. See related restaurants?
2. Share with friends via chat?
3. Jump to a friend's profile who reviewed it?
If not, should we add those flows?"
Phase 4: User Testing Preparation
Generate Test Scenarios
Have Gemini create realistic tasks for testers:
"Create 4 user test scenarios for three personas:
Persona A: Foodies seeking discovery
Persona B: Active contributors
Persona C: Social followers
Each scenario: clear task, no instructions on *how* to do it."
Sample output (Persona A):
Scenario 1: "Find an Italian restaurant near you"
Scenario 2: "Check what your friend Maria recently posted"
Scenario 3: "Save a restaurant you like"
Scenario 4: "See what's popular in your area"
Share Prototype for Testing
- Click "Share" in Figma
- Copy the prototype link
- Send to 5–10 testers
- Watch how they interact (or ask for feedback)
Metrics to capture:
- Time to complete each task
- Clicks in wrong places
- User comments/confusion
Phase 5: Feedback and Refinement
Collect Data
Common observations:
- "I didn't notice the filter button"
- "I expected to tap the restaurant image to go to detail"
- "The tab label is confusing"
Ask Gemini for Solutions
"Testers couldn't find the filter button. Current placement: top-right of search screen.
Suggest three alternative placements that improve discoverability."
Output:
1. Move below search bar (more prominent, but uses space)
2. Add icon + label to search bar
3. Make it a chip-style button below search
Iterate and Re-test
Update the prototype and re-test with a new group, or do informal rounds with the same users.
2–3 iteration cycles is typical before handoff to developers.
Phase 6: Developer Handoff
Use Dev Mode
Figma's Dev Mode auto-extracts implementation specs:
1. Open Figma file
2. Click "Dev" tab
3. Select component
4. View extracted specs: size, color, font, padding, etc.
Generate Design Tokens
Ensure developers receive:
- JSON token file — Color, spacing, typography variables
- Component specifications — Props, states, sizes
- Animation specs — Duration, easing, on which events
Request from Gemini:
"Create React component templates based on these tokens.
Use TypeScript and styled-components.
Include PropTypes for color, size, state variants."
This accelerates dev implementation significantly.
Best Practices
1. Early, Frequent Testing
Test from low-fidelity stage, not high-fidelity. Changes are cheaper earlier.
2. Document Decisions
Record Gemini conversations showing why you chose this navigation structure, these colors, etc. This context is gold for future contributors.
3. Version Control
Use Figma's Branch/Version features to track iterations pre- and post-user testing.
4. Realistic Scope
For most apps:
- Phase 1 (Concept): 1–2 hours
- Phase 2 (Build): 1–2 days
- Phase 4 (Test): 1 day
- Phase 5 (Refine): 1–2 days
Total: ~1 week (vs. traditional 3–4 weeks).
Real-World Example: Fitness App
Brief: Habit-tracking fitness app for beginners.
Gemini Phase 1: Generate workout types, habit tracking logic, social features.
Figma Phase 2: Build 5 screens (home, workout detail, history, progress, profile).
User Testing: 8 testers try basic flows. Two iterations based on feedback.
Handoff: Dev team receives Figma prototype, design tokens, component specs in one week.
Dev builds: 2–3 weeks of implementation (depending on backend complexity).
Summary
Gemini × Figma workflow compresses prototype timelines:
- Speed — Requirements to interactive prototype in ~1 week
- Quality — AI-guided IA + early user testing = solid UX
- Clarity — Figma Dev Mode + tokens = handoff with no surprises
For product managers, designers, and founders shipping apps, this workflow is a game-changer.
Try it on your next project. You'll ship faster and with higher confidence.