Sharing & Presenting Prototypes
A prototype's value depends entirely on how effectively it communicates - to stakeholders for approval, to users for testing, to engineers for understanding complex interactions. Professional sharing workflows protect your design, provide context, and enable actionable feedback.
Figma Sharing Modes
Four sharing permission levels: 'Can view' - stakeholders open designs in browser without Figma accounts, can comment but not edit (safest for external stakeholders). 'Can edit' - collaborating designers. Prototype link: Share → 'Anyone with link can view' → Copy link. Recipients see the prototype in a browser frame immediately. Embed: Copy Figma embed code for Notion, Confluence, or Jira - keeps prototype always up-to-date alongside project documentation. Device frame preview: Share → select 'Present on iPhone 14' to show prototype inside a phone frame, communicating exact device context without explanation.
60-30-10 rule. WCAG 4.5:1 contrast required.
Stakeholder Presentation Best Practices
- Provide context before the prototype: share a brief overview - what problem this solves, who the users are, and what specific feedback you want. Without context, stakeholders fixate on wrong details
- Define a focused feedback prompt: 'We want feedback on two things: (1) Is the checkout flow logical? (2) Is the cart page hierarchy clear?' Focused prompts produce useful feedback
- Walk through together: 30-minute live walkthrough beats async link-sharing every time. Narrate as you click - prevents stakeholders from getting lost and keeps feedback on design decisions not prototype bugs
- Record walkthroughs: use Loom to create narrated prototype videos for async stakeholders - far more useful than an unguided link
Practical Exercise - Build a 3-Screen Figma Prototype
# Figma Prototype: Login → Dashboard → Settings Flow
# Goal: Create a realistic clickable prototype with Smart Animate
## STEP 1 - Create 3 frames at 375×812px (mobile)
Frame 1: Login Screen
- Input field: "Email"
- Input field: "Password"
- Button: "Log In" (primary, full width)
- Text link: "Forgot password?"
Frame 2: Dashboard Screen
- Header: user avatar + "Hi, Alex!"
- 3 stat cards in a row (auto layout, fill width)
- Bottom tab bar: Home | Analytics | Profile | Settings
Frame 3: Settings Screen
- Header with back arrow + "Settings" title
- List items: Profile / Notifications / Privacy / Logout
## STEP 2 - Connect the prototype
Click Prototype tab (top right panel)
1. Log In button → Frame 2 (Dashboard)
Trigger: On Click | Action: Navigate To | Animation: Move In Right | 300ms
2. Settings tab icon → Frame 3 (Settings)
Trigger: On Click | Action: Navigate To | Animation: Push Left | 250ms
3. Back arrow on Settings → Frame 2 (Dashboard)
Trigger: On Click | Action: Navigate To | Animation: Move Out Right | 250ms
## STEP 3 - Add Smart Animate
- Duplicate Dashboard frame → move the active tab indicator
under "Settings" tab position
- Connect via Smart Animate (300ms, Ease In Out)
- The indicator will slide smoothly between tabs
## STEP 4 - Set a starting point
Right-click Frame 1 (Login) → "Set as starting point"
## STEP 5 - Test your prototype
Press ▶ (Present) → Navigate all 3 screens
Share link: Copy prototype link → send to a colleague
Device test: Open Figma app on phone → scan QR code
## PROFESSIONAL NOTES
"Move In" = destination slides in from the side
"Push" = both frames animate together (tab feel)
Always test on real device - desktop preview is misleadingQuick Quiz - Wireframing & Prototyping
Tip
Tip
Practice Sharing Presenting Prototypes in small, isolated examples before integrating into larger projects. Breaking concepts into small experiments builds genuine understanding faster than reading alone.
Practice Task
Note
Practice Task - (1) Write a working example of Sharing Presenting Prototypes from scratch without looking at notes. (2) Modify it to handle an edge case (empty input, null value, or error state). (3) Share your solution in the Priygop community for feedback.
Common Mistake
Warning
A common mistake with Sharing Presenting Prototypes is skipping edge case testing - empty inputs, null values, and unexpected data types. Always validate boundary conditions to write robust, production-ready ui ux code.
Key Takeaways
- A prototype's value depends entirely on how effectively it communicates - to stakeholders for approval, to users for testing, to engineers for understanding complex interactions.
- Provide context before the prototype: share a brief overview - what problem this solves, who the users are, and what specific feedback you want. Without context, stakeholders fixate on wrong details
- Define a focused feedback prompt: 'We want feedback on two things: (1) Is the checkout flow logical? (2) Is the cart page hierarchy clear?' Focused prompts produce useful feedback
- Walk through together: 30-minute live walkthrough beats async link-sharing every time. Narrate as you click - prevents stakeholders from getting lost and keeps feedback on design decisions not prototype bugs