Use Bubble itself as a rapid prototyping tool to create clickable mockups and interactive prototypes. This tutorial shows you how to build wireframe-quality screens quickly, link them with navigation workflows, gather user feedback via a preview link, and convert your prototype into a production-ready app without starting over.
Overview: Creating Mockups and Prototypes in Bubble
Instead of using separate design tools and then rebuilding in Bubble, you can prototype directly in the editor. This saves the translation step from Figma or Sketch to Bubble. Build low-fidelity screens, wire up navigation, share a preview link, and iterate based on feedback — then convert the prototype into your real app by adding data and business logic.
Prerequisites
- A Bubble account (free plan works for prototyping)
- A rough idea of your app's screens and user flow
- Basic familiarity with Bubble's Design tab
Step-by-step guide
Create a new app for your prototype
Create a new app for your prototype
Go to bubble.io/home and click Create a new app. Name it something like myapp-prototype. Select Start from scratch. This keeps your prototype separate from any production app. You can duplicate the app later when you are ready to build the real version.
Pro tip: If you already have a production app, duplicate it and strip out data logic to create a prototype version for testing new features.
Expected result: A fresh Bubble app ready for prototyping with no pre-built elements or data.
Wireframe your key screens using basic elements
Wireframe your key screens using basic elements
In the Design tab, create pages for each screen in your user flow (e.g., index for landing, dashboard, profile, settings). On each page, use Groups with background colors for section containers, Text elements for headings and labels, Shape elements for placeholder images, and Buttons for actions. Use a consistent gray/white/blue palette to keep it wireframe-quality. Focus on layout and information hierarchy.
Expected result: Multiple pages with wireframe-quality layouts showing the structure of each screen.
Wire up navigation between screens
Wire up navigation between screens
For each Button that represents a navigation action, create a workflow: When Button is clicked, Go to page, and select the target page. For elements that should open modals, add Popup elements and use Show Popup actions. For tab-like navigation, use conditional group visibility with custom states. This creates a clickable prototype stakeholders can navigate through.
Expected result: All buttons and links navigate to their intended pages or show popups, creating a clickable prototype.
Add placeholder data using Option Sets
Add placeholder data using Option Sets
Instead of setting up a full database, use Option Sets for quick placeholder data. Create an Option Set called SampleProducts with attributes like name, price, and image_url. Add 5-6 sample options. In your Repeating Groups, set the type to SampleProducts and data source to All SampleProducts. This gives your prototype realistic-looking data without any database setup.
Pro tip: Option Sets load instantly because they are cached in the browser — perfect for fast prototype demos.
Expected result: Repeating Groups display placeholder data from Option Sets, making the prototype look realistic.
Share the prototype for feedback
Share the prototype for feedback
Click the Preview button in the top-right of the editor to open your app in a new browser tab. Copy the preview URL and share it with stakeholders. On the free plan, the preview URL is accessible to anyone with the link. Ask stakeholders to click through the flow and note what works and what needs changes.
Expected result: Stakeholders can click through the prototype in their browser and provide feedback on the flow and layout.
Convert the prototype into a production app
Convert the prototype into a production app
Once approved, start converting to production. Replace Option Sets with real Data Types in the Data tab. Swap placeholder data sources with Do a search for queries. Add real workflows for form submissions, authentication, and business logic. Upgrade styling from wireframe grays to your brand colors using Style Variables. The responsive layout structure carries over without rebuilding.
Expected result: Your prototype evolves into a production app with real data, authentication, and business logic while keeping the approved layout.
Complete working example
1PROTOTYPING WORKFLOW — SUMMARY2===============================34PHASE 1: WIREFRAMING5 Create pages: index, dashboard, profile, settings6 Use basic elements:7 - Groups (gray background) for sections8 - Text elements for headings/labels9 - Shape elements for image placeholders10 - Buttons for actions11 Color palette: #F5F5F5 (bg), #333 (text), #4A90D9 (accent)1213PHASE 2: NAVIGATION14 For each action button:15 Trigger: When Button is clicked16 Action: Go to page → target page17 For modals:18 Action: Show Popup → popup name19 For tabs:20 Action: Set state → page → active_tab = tab_name21 Conditional visibility on groups2223PHASE 3: PLACEHOLDER DATA24 Option Set: SampleProducts25 Attributes: name (text), price (text), image_url (text)26 Options: 5-6 sample items27 Repeating Group:28 Type: SampleProducts29 Data source: All SampleProducts3031PHASE 4: SHARE AND FEEDBACK32 Preview URL: appname.bubbleapps.io/version-test33 Share with stakeholders34 Collect feedback via Notes or external doc3536PHASE 5: CONVERT TO PRODUCTION37 Replace Option Sets → Data Types38 Replace placeholder data → Do a search for39 Add authentication workflows40 Add form validation and business logic41 Apply brand styling via Style Variables42 Add Privacy RulesCommon mistakes when creating mockups and interactive prototypes for a Bubble.io app: Step-by-St
Why it's a problem: Spending too much time on visual polish during prototyping
How to avoid: Use a simple gray/white/accent color palette and basic text styling. Refine visuals only after stakeholders approve the flow.
Why it's a problem: Building a full database for prototype data
How to avoid: Use Option Sets for placeholder data. They load instantly and can be replaced with real Data Types later.
Why it's a problem: Prototyping in the production app
How to avoid: Create a separate app for prototyping or duplicate your production app. Merge approved changes back when ready.
Best practices
- Create a separate app for prototyping to keep production clean
- Focus on user flow and information hierarchy before visual design
- Use Option Sets for quick placeholder data instead of database records
- Wire up all navigation so stakeholders can click through the full flow
- Use Bubble's Notes feature to annotate elements with questions for reviewers
- Test the prototype on mobile by resizing the preview window
- Document feedback in a shared document with screenshots and page references
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to use Bubble.io to create a clickable prototype for a SaaS dashboard app. How do I quickly wireframe screens, wire up navigation, add placeholder data, and share the prototype with my team for feedback?
Create a wireframe prototype with four pages: landing, dashboard, profile, and settings. Use basic groups and text elements for layout. Wire up navigation buttons between all pages. Add an Option Set with sample data for the dashboard Repeating Group.
Frequently asked questions
Should I prototype in Bubble or use Figma first?
If your team includes designers, Figma is great for visual design. But if you are a solo founder or want to skip the design-to-code translation, prototyping directly in Bubble saves significant time since your prototype becomes your real app.
Can I share a prototype without publishing the app?
Yes. Use the Preview URL which is available on all plans. Anyone with the link can view and interact with your app in development mode.
How do I add realistic-looking images to my prototype?
Use free image services like picsum.photos or unsplash.com. Store image URLs in your Option Set attributes and display them in Image elements.
Can I convert my prototype to production without rebuilding?
Yes, that is the main advantage of prototyping in Bubble. Your layout, responsive settings, and navigation carry over. You only need to replace placeholder data with real Data Types and add business logic.
How long should prototyping take?
A basic clickable prototype with 4-6 screens should take 2-4 hours. Complex prototypes with multiple user flows may take 1-2 days. The goal is speed, not perfection.
Can RapidDev help me turn a prototype into a production app?
Yes. RapidDev specializes in converting Bubble prototypes into fully functional production apps, including database architecture, authentication, integrations, and performance optimization.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation