Design and Ship a Legal Rights Mobile App

Introduction

30 Second Summary

Imagine you get into a dispute with your landlord or need to file an FIR, but you have no idea what your legal rights are. Millions of Indians face this problem every day, and finding reliable legal help feels impossible.

In this project, you will design and ship a complete mobile app called "Nyay AI" that helps everyday Indians understand their legal rights using AI. You will go from idea to a live, tappable web app that anyone can visit on their phone.

What You'll Build

A 6-screen mobile app designed with AI assistance in Google Stitch, refined in Figma, and published as a live web app on Framer.

By the end of this project, you'll have:

• 6 polished mobile app screens designed with AI-generated layouts and a consistent design system.
• An interactive Figma prototype with linked screen flows that you can share as a portfolio case study.
• A live, published mobile web app on Framer that anyone can visit and tap through on their phone.
• Secret Mission: Add a Hindi/English language toggle and a "Know Your Rights" onboarding flow with illustrations.

Are there any prerequisites?

You need a Google account, a free Figma account, and basic familiarity with the Figma interface. All tools in this project are browser-based, so no software installation is required.

Set Up Your Tools and Define Your Screens

Before you start designing, you need three browser-based tools ready to go. Each one handles a different part of the design-to-live-app workflow.

Google Stitch generates UI designs from text prompts. Figma is where you refine and prototype those designs. Framer turns your designs into a live website anyone can visit on their phone.

In this step, get ready to:

• Verify access to Google Stitch, Figma, and Framer.
• Create your Figma project file with organized pages.
• Plan the 6 screens you will design for the app.

Verify your accounts and sign in

All three tools run in the browser. You need to confirm you can sign in to each one before moving on.

• Open a new browser tab and go to stitch.withgoogle.com.
• Sign in with your Google account.
• You should see the Stitch home page with an option to start generating designs.

• Open another tab and go to figma.com.
• Confirm you are signed in to your Figma account. You should see your drafts or recent files.

Now you need a Framer account. Framer is the tool that will turn your designs into a live, tappable web app.

✔️ I already have a Framer account

• Go to framer.com and confirm you are signed in.
• You should see your Framer dashboard with your projects.

ⓧ I need to create a Framer account

• Go to framer.com and click Sign up.
• Choose Continue with Google to use your Google account (fastest option).
• Grant the required permissions when redirected to Google.
• Complete the setup by entering your name and a workspace name.

What is Framer?

Framer is a no-code website builder with an interface similar to Figma. You design directly in the browser and publish to a live URL with one click. The free plan includes unlimited projects and 1,000 pages.

No credit card is required. Framer uses magic links instead of passwords, so you will receive a sign-in link by email each time.

Having trouble signing in?

Make sure you are using a supported browser (Chrome, Edge, or Safari). Try clearing your browser cache if a page does not load. For Framer, check your email spam folder for the magic link if you signed up with email instead of Google.

Help me troubleshoot my sign-in issue with Stitch, Figma, or Framer.

Create your Figma project file

A well-organized Figma file keeps your screens, components, and styles easy to find as the project grows.

• In Figma, create a new Design file by typing figma.new in your browser address bar and pressing Enter.
• A blank design file opens in the Figma editor.
• Double-click the file name at the top (it says Untitled) and rename it to Nyay AI - Mobile App.

Now add two pages to organize your work.

• In the left sidebar, look for the Pages section under the File tab.
• Click the + icon next to Pages to add a new page.
• Double-click the new page name and rename it to Screens.
• Click + again to add a second page.
• Rename the second page to Components.
• Delete the original Page 1 by right-clicking it and selecting Delete page.

Why two pages?

The Screens page is where your 6 app screens will live. The Components page is where you will build reusable design elements like navigation bars and cards. Separating them keeps your file clean as it grows.

Your Figma file should now show two pages in the left sidebar: Screens and Components. Both canvases are empty for now.

Don't see the Pages section?

Make sure you are in a Design file (not a FigJam board or Figma Slides). The Pages section only appears in the left sidebar of Design files under the File tab.

Help me find the Pages section in my Figma file.

Plan your 6 screens

Before jumping into design, you need a clear picture of which screens you will build. Each screen serves a specific user need in the Nyay AI app.

• Review the 6 screens you will design:

Why plan screens before designing?

Listing your screens upfront prevents scope creep. You know exactly what to generate in Google Stitch and what to build manually in Figma. It also helps you think about how users will flow between screens.

Your workspace is ready. Next up, you will use Google Stitch to generate your first mobile app screens with AI in seconds.

Generate Mobile App Screens in Google Stitch

Your Figma file is set up and your 6 screens are planned. Now it is time to bring those screen ideas to life using AI.

Google Stitch lets you describe a UI in plain English and generates a production-quality mobile screen in seconds. In this step, you will generate 3 of your 6 screens using text prompts, then export them to Figma for refinement.

In this step, get ready to:

• Generate a Home Screen with topic cards and bottom navigation.
• Generate an AI Chat Interface with a conversation layout.
• Generate a Lawyer Finder screen with a map and lawyer cards.

Design the Home Screen

The Home Screen is the first thing users see when they open Nyay AI. It needs to immediately communicate what the app does and give users clear paths to legal help.

Why start with the Home Screen?

The Home Screen sets the visual tone for the entire app. Every other screen will inherit its color palette, typography, and layout patterns. Getting this right first makes the rest of the screens much faster to design.

• In Google Stitch, make sure you are in Standard Mode (this is required for Figma export later).
• Type the following prompt into the text input field:

Design a mobile app home screen for a legal rights app called Nyay AI. Dark navy blue background (#0F172A) with white text. Include a greeting 'Namaste! How can I help you today?', a search bar, and 6 topic cards in a 2-column grid: Tenant Rights, FIR & Police, Consumer Complaints, Labour Rights, Women's Safety, Property Disputes. Each card has an emoji icon and label. Modern, clean, friendly design. Bottom navigation with Home, Chat, Lawyers, Saved icons.

• Click Generate to create the design.

What does this prompt do?

The prompt tells Stitch exactly what to include: a dark background color, a friendly greeting, a search bar for queries, and 6 legal topic cards in a grid. It also specifies bottom navigation icons so the screen feels like a complete mobile app.

Detailed prompts produce better results. The more specific you are about colors, layout, and content, the closer the output matches your vision.

You should see a mobile screen with a dark navy background, 6 colorful topic cards arranged in a grid, and a bottom navigation bar.

Don't see a generated design?

Make sure you are in Standard Mode, not Experimental Mode. If you started your project in Experimental Mode, you will need to create a new project in Standard Mode.

If the generation seems stuck, try refreshing the page and entering your prompt again. Why isn't my Stitch prompt generating a design?

Design the AI Chat Interface

The Chat Interface is where users interact with the AI legal assistant. It needs to feel conversational and show how the AI formats legal information clearly.

• Generate a new screen in Stitch by typing this prompt:

Design a mobile chat interface for a legal AI assistant. Show a conversation where the user asks 'Can my landlord evict me without notice?' and the AI responds with a clear, simple explanation of tenant rights under Indian law. Include a text input at bottom with a send button. The AI response should have a friendly avatar and be formatted with bullet points for clarity. Dark theme matching the home screen.

• Click Generate and wait for the design to appear.

What makes this prompt effective?

The prompt includes a specific example conversation so Stitch generates realistic content instead of placeholder text. Specifying bullet points in the AI response shows future users that the app breaks down complex legal information into digestible pieces.

The phrase "dark theme matching the home screen" keeps the visual style consistent across screens without re-specifying every color value.

You should see a chat screen with message bubbles, an AI avatar, a bulleted legal response, and a text input bar at the bottom.

Chat screen looks nothing like the Home Screen?

AI generation can vary between prompts. If the colors or style differ dramatically, add more specific color references to your prompt (like #0F172A for the background).

You can also iterate by typing a follow-up message in Stitch asking it to adjust the colors to match your first screen. How do I get consistent styling across multiple Stitch screens?

Design the Lawyer Finder and export all screens to Figma

The Lawyer Finder combines a map view with a scrollable list of nearby lawyers. This is the most complex screen because it mixes two UI patterns: a map and a card list.

• Generate the Lawyer Finder screen by typing this prompt:

Design a mobile screen showing nearby lawyers. Top half shows a map with 3-4 pin markers. Bottom half is a scrollable list of lawyer cards. Each card shows: lawyer name, specialization (e.g., Criminal, Family, Property), rating (4.5 stars), distance (2.3 km), and consultation fee (₹500). Include filter chips at top: All, Criminal, Family, Property, Labour. Dark theme.

• Click Generate and review the result.

What does this screen demonstrate?

This screen shows potential clients that you can design complex, data-rich interfaces. The map pins, star ratings, distance indicators, and filter chips are all standard mobile patterns that Stitch handles well from a detailed prompt.

You should see a screen split between a map area with pin markers and a list of lawyer cards below it, each showing the details you specified.

Now that all 3 screens are generated, export each one to Figma.

• Select your Home Screen design in Stitch.
• Click the Copy to Figma button.
• Switch to your Figma file and open the Screens page.
• Paste with Cmd+V (macOS) or Ctrl+V (Windows).
• Repeat for the AI Chat Interface and Lawyer Finder screens.

What is Copy to Figma?

Copy to Figma copies your Stitch design to your clipboard in a Figma-compatible format. When you paste it into Figma, the design appears as editable layers with proper hierarchy, text layers, and Auto Layout already configured.

This only works in Standard Mode. Designs generated in Experimental Mode cannot be exported to Figma.

After pasting all 3 screens, your Screens page in Figma should now have 3 frames: the Home Screen, AI Chat Interface, and Lawyer Finder.

Nothing pastes into Figma?

Double-check that your Stitch project was started in Standard Mode. If you started in Experimental Mode, the Copy to Figma button may not work correctly. You must start a fresh project in Standard Mode for Figma export to be available.

Also confirm you are pasting into a Figma design file, not a FigJam board. Help me get Copy to Figma working in Google Stitch

Your 3 AI-generated screens are now in Figma, ready for refinement. Next up, you will clean up these imports, build the remaining 3 screens manually, and create a consistent design system that ties everything together.

Refine All Screens in Figma

Your three AI-generated screens are a solid starting point, but a real app needs more than three screens. It also needs visual consistency across every single one of them.

In this step, you will clean up your imported screens, create the three remaining screens manually, and build a mini design system to keep everything cohesive. Then you will wire all six screens together into a clickable prototype.

In this step, get ready to:

• Clean up your Stitch imports and create three more screens manually.
• Build a mini design system with shared colors, text styles, and reusable components.
• Link all six screens into an interactive prototype and share it.

Import and organize Stitch exports

Your three Stitch-generated screens (Home Screen, AI Chat Interface, Lawyer Finder) are already in your Figma file, but their layer names are likely auto-generated and messy. Cleaning them up now will save you headaches when building the remaining screens.

• In your Figma file, navigate to the Screens page using the page list in the left panel.
• Expand the layer tree for each of the three imported frames (Home Screen, AI Chat Interface, Lawyer Finder).
• Rename unclear layers to descriptive names. For example, rename generic layers like Frame 47 to Search Bar or Topic Card - Tenant Rights.
• Group related elements into logical sections using Cmd+G (macOS) or Ctrl+G (Windows). For example, group all six topic cards into a group called Topic Cards Grid.

Why clean up layer names?

Descriptive layer names make it easy to find and select elements later, especially when you need to add prototype interactions. They also signal professionalism if a client ever opens your Figma file.

Now you will create the three remaining screens that Stitch did not generate for you.

• Press F to select the Frame tool, then choose iPhone 14 & 15 Pro from the right panel to create a new mobile frame.
• Name this frame Lawyer Profile. Design it by reusing elements from your Lawyer Finder screen: copy a lawyer card, enlarge it, and add a Book Consultation button, a specialization badge, and a short bio section.
• Create another frame called Legal Topic Detail. Copy the header style from your Home Screen and add a content area with simple bullet-point explanations of legal rights (e.g., tenant rights under Indian law written in plain language).
• Create a final frame called Saved Bookmarks. Reuse topic cards from the Home Screen but add a bookmark icon on each card and a heading that says Your Saved Topics.
• Set the background fill on all three new frames to #0F172A (the same dark navy as your Stitch screens) and use white text to match.

Copy elements between frames

Select the element you want to reuse (like a lawyer card or topic card), press Cmd+C (macOS) or Ctrl+C (Windows), click inside the destination frame, then press Cmd+V or Ctrl+V. This brings the element in with all its styling intact.

You should now see six frames on your Screens page: Home Screen, AI Chat Interface, Lawyer Finder, Lawyer Profile, Legal Topic Detail, and Saved Bookmarks.

Screens looking inconsistent?

Make sure each frame uses the same background color (#0F172A) and white text. If fonts look different between Stitch imports and manually-built screens, select the mismatched text and change it to Inter in the font dropdown.

Help me make my screens look consistent.

Build a mini design system

A design system is a set of shared styles and reusable components that keeps your app looking consistent. Building one now means you can update colors or fonts in one place and see changes across all your screens.

• Switch to the Components page in your Figma file (click the page name in the left panel).
• Create a rectangle on the canvas (this is temporary, just for setting up color styles).
• With the rectangle selected, set its fill to #0F172A. Click the four-dot icon (Style icon) next to the fill color in the right panel.
• Click the + icon to create a new color style. Name it Primary and click Create Style.
• Repeat this process to create four more color styles:

• Accent: #3B82F6 (blue).
• Success: #22C55E (green).
• Text: #FFFFFF (white).
• Muted: #94A3B8 (gray).

Next, set up your text styles so all screens use the same typography.

• Press T to select the Text tool and type any placeholder word on the canvas.
• In the right panel, set the font to Inter, size to 24, and weight to Bold.
• Click the four-dot icon next to the font name in the Text section of the right panel.
• Click the + icon and name this text style Heading. Click Create Style.
• Repeat this process to create three more text styles:

• Subheading: Inter, 18px, Semibold.
• Body: Inter, 16px, Regular.
• Caption: Inter, 12px, Regular.

What is a text style in Figma?

A text style saves a specific combination of font, size, and weight. When you apply a text style to any text element, it inherits those properties. If you later change the style definition, every text element using it updates automatically.

Finally, create reusable components for elements that appear on multiple screens.

• Switch back to the Screens page.
• On the Home Screen frame, select the bottom navigation bar (the bar with Home, Chat, Lawyers, and Saved icons).
• Right-click and select Create component (or press Cmd+Option+K on macOS / Ctrl+Alt+K on Windows).
• Name the component Bottom Nav Bar.
• Do the same for one of the topic cards on the Home Screen. Name it Topic Card.
• On the Lawyer Finder screen, select one lawyer card and create a component called Lawyer Card.
• Copy each component to the Components page as a master reference. On the other screens, use instances of these components (paste them with Cmd+V / Ctrl+V) so changes propagate.

Why use components?

Components let you update a design once and see it reflected everywhere. If you tweak the bottom nav bar icon layout in the master component, every screen using it updates instantly.

This is the same principle that professional design teams use to maintain consistency across hundreds of screens.

Your Components page should now contain your five color styles, four text styles, and three reusable components (Bottom Nav Bar, Topic Card, Lawyer Card).

Link screens into a prototype

A static set of screens is not an app. To make it feel real, you need to connect them so that tapping a card on one screen takes you to another. Figma's Prototype mode lets you wire up these interactions without writing any code.

• Switch back to the Screens page.
• Click the Prototype tab in the right sidebar (next to the Design tab).
• On the Home Screen, select any one of the topic cards (e.g., Tenant Rights).
• You will see a small blue circle (connection node) appear on the right edge of the selection. Drag this circle to the Legal Topic Detail frame.
• In the interaction panel that appears, confirm the trigger is set to On tap and the action is Navigate to.

Now repeat the process for the remaining connections.

• Select the Chat icon in the bottom navigation bar of the Home Screen. Drag the blue node to the AI Chat Interface frame.
• Select the Lawyers icon in the bottom navigation bar. Drag the blue node to the Lawyer Finder frame.
• On the Lawyer Finder screen, select a lawyer card. Drag the blue node to the Lawyer Profile frame.

What are these connection lines?

Each blue arrow you see on the canvas represents a prototype connection. When someone taps that element during a presentation, Figma will navigate them to the linked screen. This is how you simulate a real app experience without any code.

Time to test your prototype and make sure everything flows correctly.

• Click the Present button (the play icon ▶) in the top-right corner of Figma.
• A new tab opens showing your prototype. Click the topic card on the Home Screen.
• Verify it navigates to the Legal Topic Detail screen.
• Go back (click the arrow in the top-left) and test the Chat and Lawyers navigation icons.
• On the Lawyer Finder screen, tap a lawyer card and verify it takes you to the Lawyer Profile screen.

Tapping does nothing in present mode?

Make sure you are in the Prototype tab (not Design) when you create connections. Also check that you dragged from the correct element. If you selected the frame itself instead of the card inside it, the interaction will not trigger on the card.

Help me fix my Figma prototype connections.

Once all connections work, share your prototype link.

• Close the present-mode tab and return to your Figma editor.
• Click the Share button in the top-right corner.
• Under Link sharing, change access to Anyone with the link can view.
• Click Copy link. Save this link somewhere safe. This is your interactive Figma prototype URL.

Your Figma file is now a complete, polished design with six screens, a design system, and an interactive prototype. Next, you will bring this to life as a real web app anyone can visit on their phone.

Build the Live Mobile Web App in Framer

In the last step, you linked all six screens into an interactive Figma prototype. That prototype is great for showcasing flows to stakeholders, but it only lives inside Figma.

Now you will rebuild these screens in Framer, a web-based design tool that publishes your work as a real website. By the end of this step, anyone with the link can tap through Nyay AI on their phone.

In this step, get ready to:

• Create a mobile-first Framer project at 390px width with 6 pages.
• Build the Home Screen and Chat Screen using Stacks, Grids, and reusable components.
• Build the Lawyer Finder and remaining screens, then connect all pages with navigation links.

Create a mobile-first Framer project

Framer defaults to a 1200px desktop layout. Since Nyay AI is a mobile app, you will override this and work at 390px to match an iPhone screen.

• Open framer.com in your browser and sign in to your account.
• Click New Project on your dashboard.
• Framer creates a project with a Home page at 1200px by default.
• Select the page frame on the canvas, then in the right panel change the width to 390.
• Double-click the project name in the top-left corner and rename it to Nyay AI.

Why 390px?

390px is the viewport width of modern iPhones (iPhone 14/15/16). Designing at this width ensures your app looks correct on the most common mobile screen size.

• Open the Pages panel on the left side of the editor.
• Your Home page already exists. You need to add 5 more pages.
• Click the + button in the Pages panel to add a new page.
• Double-click the new page name and rename it to Chat.
• Repeat this process to create pages named Lawyer Finder, Lawyer Profile, Legal Topic Detail, and Saved Bookmarks.
• For each new page, select its frame on the canvas and set the width to 390 in the right panel.

You should now see 6 pages listed in your Pages panel: Home, Chat, Lawyer Finder, Lawyer Profile, Legal Topic Detail, and Saved Bookmarks.

Pages not showing up?

Make sure you are adding Web Pages (the default type), not CMS Pages or Canvas Pages. If you accidentally created the wrong type, hover over the page name and click the three-dot icon to delete it, then try again.

help me set up pages in my Framer project

Build the Home Screen and Chat Screen

With your pages set up, it is time to recreate the Figma designs as live, interactive elements. Open your Figma file side-by-side as a visual reference.

• In the Pages panel, click Home to switch to the Home page.
• Set the page background color to #0F172A (your Primary navy) using the Fill option in the right panel.
• Add a vertical Stack to the page by pressing S on your keyboard or clicking Insert in the toolbar, then selecting Stack.
• Set the Stack direction to vertical and width to 100%.
• Inside this Stack, add a Text layer with the greeting text: Namaste! How can I help you today?. Set the font to Inter, 24px bold, color #FFFFFF.
• Below the greeting, add a search bar element (a rounded rectangle frame with a Text layer inside reading Search legal topics...).

What are Stacks in Framer?

A Stack is a layout component that arranges children in a vertical or horizontal sequence with consistent spacing. It works like Flexbox in CSS. Elements automatically reflow and maintain their gaps when you add or remove items.

• For the topic cards, add a Grid layout inside the Stack. Set it to 2 columns with even spacing.
• Create one topic card as a Frame: a rounded rectangle with an emoji icon and a label (e.g. Tenant Rights). Style it with a slightly lighter background than the page.
• Right-click the card frame and select Create Component. This makes it reusable.
• Duplicate the component 5 times to fill the 2-column Grid with all 6 topic cards: Tenant Rights, FIR & Police, Consumer Complaints, Labour Rights, Women's Safety, Property Disputes.
• Update each card's label text and emoji to match the corresponding topic from your Figma design.
• At the bottom of the page, add a horizontal Stack for the bottom navigation bar with four icons: Home, Chat, Lawyers, Saved.

Preview your Home page by pressing Cmd+P (macOS) or Ctrl+P (Windows). You should see a dark navy screen with a greeting, search bar, six topic cards in a grid, and a bottom navigation bar.

Match your Figma designs closely

Keep your Figma file open in another tab as a pixel-perfect reference. You do not need to match every shadow or gradient at this stage. Focus on layout structure (Stacks, Grids, spacing) and correct text content.

• Switch to the Chat page in the Pages panel.
• Set the page background to #0F172A.
• Add a vertical Stack that fills the full page height.
• Inside the Stack, create a scrollable message area. Add a Frame, set its overflow to Scroll in the right panel, and give it a height that leaves room for the input bar at the bottom.
• Add sample chat bubbles inside the scroll frame: a user message asking Can my landlord evict me without notice? and an AI response with a friendly explanation.
• At the bottom of the Stack, add a fixed input bar with a text field placeholder and a send button icon.
• To make the input bar stay fixed at the bottom, set its position to Fixed in the right panel and pin it to the bottom of the frame.

• Now add basic page navigation links. Select the Chat icon in the Home page's bottom navigation bar.
• Press L on your keyboard to open the link options.
• In the Link dropdown, select the Chat page as the destination.
• Repeat this for the Home icon (link to Home page) and the Lawyers icon (link to Lawyer Finder page).

Preview again with Cmd+P (macOS) or Ctrl+P (Windows). You should be able to tap the Chat icon and navigate to the Chat screen, then tap Home to return.

Build the Lawyer Finder and remaining screens

The final three screens follow the same pattern: use your Figma designs as reference, build the layout with Stacks and Frames, then link everything together.

• Switch to the Lawyer Finder page.
• Set the page background to #0F172A.
• At the top, add a horizontal Stack with filter chip buttons: All, Criminal, Family, Property, Labour.
• Set the horizontal Stack's overflow to Scroll so the chips are scrollable when they overflow the 390px width.
• Below the filter chips, add lawyer cards in a vertical Stack. Each card shows a lawyer name, specialization, rating, distance, and fee.
• Create one lawyer card as a component (right-click the frame, select Create Component), then duplicate it 3-4 times and update each card's details.

Why horizontal scroll for filter chips?

On a 390px mobile screen, five filter chips cannot all fit in one row without wrapping. Setting the container to horizontal scroll lets users swipe through the options. This is a common mobile UI pattern you will see in apps like Google Maps and food delivery services.

• Switch to the Lawyer Profile page. Build it with a vertical Stack containing the lawyer's photo area, name, specialization, bio text, and a Book Consultation button.
• Switch to the Legal Topic Detail page. Add a heading (e.g. Tenant Rights), followed by body text explaining the rights in simple language. Use bullet points or short paragraphs.
• Switch to the Saved Bookmarks page. Add a vertical Stack with placeholder bookmark cards (saved topics or lawyers).
• Set the background of all remaining pages to #0F172A and use #FFFFFF text throughout.

Now connect all the remaining navigation links so the full app flow is tappable.

• On the Home page, select a topic card (e.g. Tenant Rights). Press L and link it to the Legal Topic Detail page.
• On the Lawyer Finder page, select a lawyer card. Press L and link it to the Lawyer Profile page.
• On the Home page, link the Saved icon in the bottom nav to the Saved Bookmarks page.
• Add the same bottom navigation bar to all other pages. Copy it from the Home page and paste it onto each page, then update the links so each icon navigates correctly.

Preview the full project with Cmd+P (macOS) or Ctrl+P (Windows). Tap through the entire flow: Home to Chat, Home to Lawyer Finder to Lawyer Profile, Home to Legal Topic Detail, and Home to Saved Bookmarks.

Links not navigating to the right page?

Select the element that should be clickable and check the right panel for a link indicator. If no link is set, press L and choose the correct page from the dropdown. Make sure you are selecting the outermost frame of the card, not a child text layer inside it.

help me fix page navigation links in Framer

Your Framer project is now a fully tappable mobile app with six connected screens. Next up, you will publish it live so anyone with a URL can experience Nyay AI on their phone.

Publish and Test Your Live App

Your 6 screens are built and fully connected in Framer. Tapping through the flow locally confirms everything works. Now it is time to put it in front of the world.

In this step, you will publish your app to a live URL that anyone can visit on their phone. You will also test the full experience on a real device and save your three portfolio deliverables.

In this step, get ready to:

• Publish your app to a live .framer.app URL.
• Test the full app flow on your mobile phone.
• Save your three portfolio deliverables.

Publish your app to a live URL

Publishing in Framer makes your project accessible at a public web address. Anyone with the link can open it on their phone and tap through your screens.

• In your Framer project, click the Publish button in the top-right corner.
• Framer will generate a live URL ending in .framer.app.
• Copy this URL and save it somewhere you can find it later (a notes app, a browser bookmark, or a pinned message to yourself).

What just happened?

Framer hosts your project on their servers and assigns it a public subdomain. Your app is now a real website that anyone in the world can visit and interact with.

Don't see the Publish button?

Make sure you are in the main editor view, not inside a component or a breakpoint. The Publish button sits in the top-right toolbar of the canvas view.

help me find the Publish button in Framer

Test the app on your phone

A design that looks good on a laptop screen can feel completely different on a real phone. Thumb reach, text size, and tap targets all change when you hold the device in your hand.

• Open the .framer.app URL on your mobile phone's browser.
• Starting from the Home Screen, tap through every screen in the flow.
• Check that all text is readable without zooming in.
• Check that every button and card is large enough to tap comfortably with your thumb.
• Check that navigation between screens feels smooth and natural.

Send the link to yourself

The fastest way to get the URL onto your phone is to message it to yourself on WhatsApp, Telegram, or iMessage. Tap the link directly from the message.

• If you notice spacing issues, text that is too small, or buttons that are hard to tap, go back to Framer on your laptop and fix them.
• After making fixes, click Publish again to push the updates live.
• Refresh the page on your phone to confirm the fixes look right.

Screens not linking on mobile?

If tapping a card or icon does not navigate to the expected screen, go back to Framer and check that the page link is applied to the correct layer. The link must be on the parent frame of the card, not a nested text layer inside it.

help me fix navigation links between pages in my Framer project

Prepare your portfolio deliverables

You now have three assets that prove you can design a complete AI-powered mobile product from scratch. Each one serves a different purpose when pitching to clients or applying for roles.

• Save your live .framer.app URL. This is the showpiece. Clients can tap through your app on their own phone in seconds.
• Save your Figma prototype link (from Step 3). This shows your design system thinking, component structure, and screen-to-screen flows.
• Take screenshots of your design process. Capture your Stitch prompts, your Figma layers panel, and your Framer page list. These document how you went from idea to finished product.

Why three deliverables?

The live URL proves you can ship. The Figma file proves you think in systems. The process screenshots prove you can communicate your workflow to a team or client.

Together, they form a complete portfolio case study that stands far above a flat mockup in a PDF.

Your app is live and your portfolio assets are locked in. Next up, the Secret Mission takes your project from good to client-winning with a Hindi/English language toggle and an onboarding flow.

Secret mission

Hindi/English Toggle and Onboarding Flow

Your app works, but it only speaks English. Real Indian apps serve users in their preferred language. Add a language toggle and a welcoming onboarding flow to push your portfolio piece from good to client-winning.

Clean Up Your Resources

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project runs entirely on free browser-based tools, so there are no ongoing costs.

Resources you used:

• Figma design file ("Nyay AI - Mobile App").
• Framer project and published site (your .framer.app URL).
• Google Stitch generation history (stored in your Google account).

Keep everything running

No action needed. Choose this if you are still actively building or want to keep your portfolio piece live.

• Your Framer site stays published at its .framer.app URL. Anyone with the link can visit it.
• Your Figma file remains in your account for future edits.
• Google Stitch generations remain accessible in your Stitch history.

Pause - I'll come back to this later

Take your app offline so it is no longer publicly accessible, but keep the project files so you can return later.

• In Framer, open your dashboard and select the "Nyay AI" project.
• Move the project to the Archive. This unpublishes your site but keeps the project recoverable.
• Your Figma file can stay as-is. There is no cost to leaving it in your account.

Delete - I don't want to use this again

Remove all project resources completely. This cannot be undone.

• In Framer, open your dashboard and select the "Nyay AI" project. Move it to the Archive.
• Open the Archive folder. Click Delete next to the project to permanently remove it. This also unpublishes your site automatically.
• In Figma, open the file browser. Right-click the "Nyay AI - Mobile App" file and select Move to trash.
• Open Trash from the sidebar. Right-click the file and select Permanently delete.
• Google Stitch generations are tied to your Google account and do not need separate deletion. They do not consume storage or cost anything.

That's a Wrap!

That's a Wrap!

Nice work! You just designed and shipped a complete AI-powered mobile app from concept to live URL.

You've learned how to:

• Design 6 interconnected mobile app screens using AI-assisted generation in Google Stitch and refined them into a polished design system in Figma.
• Build an interactive prototype with linked screen flows that demonstrate complete user journeys through a multi-screen app.
• Ship a live, tappable mobile web app on Framer that anyone can visit and experience on their phone.
• Secret Mission: Added a Hindi/English language toggle and a 3-screen onboarding flow with micro-interactions, demonstrating advanced UX thinking.

Ready to quiz yourself?