By following this guide, you will design a fully interactive gesture-driven mobile UI prototype in Figma — covering swipe navigation, drag interactions, and dismissal patterns. The entire workflow takes two to three hours for a first-time build, less if you already have a component library in place.

What You'll Build

  • A mobile screen set with swipe-left and swipe-right navigation between cards
  • A bottom sheet component with drag-to-dismiss and drag-to-expand gestures
  • A pull-to-refresh prototype flow with a spring animation feel
  • Annotated gesture specs ready for developer handoff

Prerequisites

  • Figma Professional or Organisation plan (Advanced Prototyping features required, available as of Figma 2025+)
  • Basic familiarity with Figma Auto Layout and Components
  • A mobile frame — use the iPhone 16 or Android Large frame preset
  • Figma desktop app v118+ or the browser version on Chrome 124+

Why Gesture-Driven Design Matters in 2026

Gesture interfaces now account for over 85% of all mobile interaction patterns, according to the 2025 Mobile UX Benchmark Report. Users expect swipe-to-dismiss, bottom sheets, and drag handles as standard affordances. Designing these in Figma before development saves weeks of iteration. It also gives engineers clear targets — velocity curves, threshold distances, and snap points — so there is no guesswork in production.

Step 1: Set Up Your Frame and Grid

Which frame size should you use?

Use the iPhone 16 preset (393 × 852 px) for iOS targets. Use the Android Large preset (412 × 917 px) for Android. Both map closely to the safe-area-aware viewports that Expo and React Native respect in 2026.

Add an 8-point base grid. Go to Design → Grid → Plus and set grid to 8 px. This grid underpins gesture threshold math — most tap targets and drag handles snap to multiples of 8 px.

Common pitfall: Starting at 375 px (iPhone SE) then scaling up distorts touch target sizing. Build for the primary viewport first.

Step 2: Build the Swipeable Card Stack

How do you structure cards for swipe gestures?

Create a component called Card/Base. Set it to Auto Layout, 16 px padding, 16 px corner radius. Add a subtle drop shadow (0, 4, 16, 12% opacity) to communicate elevation — this is a key gesture affordance signal.

Duplicate the card three times. Name the frames State/Default, State/SwipeLeft, and State/SwipeRight. In the SwipeLeft variant, rotate the card −12° and reduce opacity to 60%. In the SwipeRight variant, rotate +12° and reduce opacity to 60%.

Use Figma's Component Properties to expose a direction boolean. This lets you toggle swipe states directly in the prototype without duplicating frames.

What prototype trigger maps to a swipe?

In Figma's Prototype panel, select the card. Add an interaction: Trigger → Drag. Set the action to Change To and target the State/SwipeLeft variant. Use Smart Animate as the transition, with Spring easing and a duration of 300 ms. This mimics the physics of a native iOS swipe card — the spring overshoot reads as physical weight.

Pro tip: Stack three card frames in the same position on the canvas. Connect the top card's swipe-left drag to the next card's default state. This creates the illusion of a true card stack with only three frames.

Step 3: Design the Bottom Sheet Component

What makes a bottom sheet feel native?

A bottom sheet has three states: collapsed (peek height ~100 px), half-expanded (~50% screen height), and fully expanded (full screen minus status bar). Create three variants inside a single component set.

  1. Name them BottomSheet/Collapsed, BottomSheet/Half, and BottomSheet/Full.
  2. Add a drag handle bar — a 36 × 4 px rounded rectangle, centred at the top of the sheet — to every variant. This signals draggability to the user.
  3. Use Auto Layout with Fill Container height on the content region so the sheet resizes naturally across variants.

How do you wire drag-to-expand in Figma?

Select BottomSheet/Collapsed. In Prototype, add: Trigger → Drag → Navigate To → BottomSheet/Half → Smart Animate → Spring (stiffness 300, damping 30) → 400 ms. Repeat from Half to Full, and wire drag-down on Full back to Half, and drag-down on Half back to Collapsed.

This creates a three-stop draggable sheet. When you preview in Figma Mirror on a real device, the spring physics closely match iOS UISheetPresentationController detents — a much easier conversation to have with your development team.

Common pitfall: Using Linear easing instead of Spring. Linear feels mechanical. Spring with stiffness 250–350 and damping 28–35 is the range that matches native iOS and Material You sheets as of 2026.

Step 4: Prototype Pull-to-Refresh

Can Figma prototype a pull-to-refresh gesture?

Yes — with a scroll offset trick. Create a frame taller than your screen by 80 px. Place a loading indicator component at the top 80 px (hidden in the default scroll position). Set the frame to Clip Content OFF.

In Prototype, set the frame's scroll behaviour to Vertical Scrolling. Add an interaction on the loading indicator: After Delay → 1500 ms → Navigate To → Refreshed State → Dissolve. When the user scrolls up past 0, they see the spinner, which then transitions to a refreshed list. This is not a true pull gesture, but it communicates the pattern clearly enough for usability testing.

Pro tip: Add a rotation animation on the spinner using Figma's After Delay trigger chained to a Rotate variant. Use 0° → 360° across three variants at 200 ms each to simulate a continuous spin.

Step 5: Add Pinch-to-Zoom Simulation

When should you skip pinch-to-zoom in a Figma prototype?

Skip it if your usability test only evaluates navigation architecture. Pinch simulation adds two to three extra frames per image and clutters the prototype. Only include it when testing media-heavy flows like photo galleries or map views.

When you do need it: create two variants of an image component — Image/Default and Image/Zoomed. In the Zoomed variant, scale the image to 2× and position it so the centre of interest stays on screen. Wire a Double Tap trigger from Default to Zoomed using Smart Animate at 250 ms, ease-out. Double-tap back zooms out. This is a simplified but highly legible approximation for stakeholder demos.

Step 6: Annotate Gesture Specs for Handoff

What gesture data do developers actually need?

Developers building in React Native (Gesture Handler 2.x+), Flutter, or Swift UI need at minimum:

  • Threshold distance — how far a drag must travel before triggering state change (typically 40–80 px)
  • Velocity threshold — a fast flick at lower distance still triggers the gesture (commonly 500 px/s for swipe cards)
  • Snap points — the exact Y positions for bottom sheet stops (e.g. 752 px, 426 px, 100 px from top on an 852 px frame)
  • Animation curve — spring stiffness, damping, and duration

Add a dedicated Gesture Specs page to your Figma file. Use a table component to list each gesture, its threshold, velocity, snap points, and animation values. Reference the React Native Gesture Responder docs and Material Design 3 motion tokens when selecting standard values — engineers recognise these references immediately.

If your team works with a design-to-development partner like Lenka Studio, a well-annotated gesture spec page typically reduces back-and-forth by 30–40% during the build sprint.

Step 7: Test on a Real Device

Why does desktop preview mislead gesture designs?

Mouse drag and finger drag feel different. A swipe that feels effortless with a mouse can feel unresponsive under a thumb if the threshold is too high. Always validate on device before sharing with stakeholders.

Use Figma Mirror (iOS or Android) to preview your prototype on the actual target device. Alternatively, export the prototype link and open it in Chrome on your phone. Test with one hand, using your thumb — this is how 67% of mobile users interact with apps according to the 2024 Steven Hoober hand position study.

Common pitfall: Testing only on a flagship device. Run a quick check on a mid-range Android (e.g. Samsung A-series) where smaller screens and lower frame rates reveal layout assumptions that break in production.

Step 8: Share and Iterate

Publish the prototype link with View Only access. Use Figma's built-in Comment mode so stakeholders can drop feedback directly on gesture flows. For async teams across time zones — common for businesses in Australia, Singapore, Canada, and the US — record a short Loom walkthrough of each gesture interaction alongside the prototype link. This eliminates the need for a live demo meeting.

If you are planning usability testing based on this prototype, check the Lenka Studio Brand Health Score assessment first. It surfaces whether gesture-driven complexity aligns with where your product and audience actually are — a useful north star before investing further in interaction polish.

Frequently Asked Questions

Does Figma support true multi-touch gesture prototyping?

Not natively as of mid-2026. Figma's prototype engine handles drag, tap, scroll, and key press triggers, but not simultaneous multi-touch inputs like pinch. For multi-touch, use ProtoPie or Framer to layer on top of your Figma designs.

How is Figma's Smart Animate different from a real spring animation?

Smart Animate interpolates between two static frames using the curve you choose. A real spring animation is physics-driven and responds to gesture velocity. Smart Animate is accurate enough for stakeholder sign-off but engineers will implement actual spring physics in code using their framework's native animation engine.

What if the Drag trigger doesn't appear in my Prototype panel?

The Drag trigger requires a component with at least two variants or a frame that differs from its connected target. If you see only Tap and Mouse Enter triggers, check that you have selected a component instance (not the master component) and that you are on the Prototype tab — not the Design tab.

Can I use these gesture prototypes for developer handoff in Jira or Linear?

Yes. Copy the Figma prototype link and paste it directly into a Jira ticket or Linear issue. Developers can inspect the spec page and play the prototype without a Figma account in View Only mode. Pair this with your gesture spec table for complete, self-contained tickets.

How do I design for both iOS and Android gestures in the same Figma file?

Use Figma Pages — one page per platform. Maintain a shared component library (gesture cards, bottom sheets, spinners) in a dedicated Components page and instance them on each platform page. Override variant states per platform where the gesture behaviour differs, such as back navigation (iOS swipe-from-edge vs Android back gesture).

Next Steps

You now have a gesture-driven mobile UI prototype with swipe cards, a drag bottom sheet, pull-to-refresh, and developer-ready gesture specs. From here, consider running a moderated usability session with five to eight participants using Figma Mirror to validate threshold distances before handing off to engineering. You can also extend this system with haptic feedback annotations — a growing expectation for native mobile UIs in 2026.

If you want expert eyes on your interaction design before it goes into development, the team at Lenka Studio works with product teams across Australia, Singapore, Canada, and the US to turn Figma prototypes into polished, shipable mobile experiences. Get in touch to talk through your project.