How to Design for Touch

Touch interfaces are the primary way most people use software. Despite this, touch-specific design constraints are frequently overlooked — components sized for desktop clicks, gesture patterns chosen arbitrarily, thumb ergonomics ignored.

Designing for touch means designing for the physical reality of how fingers interact with glass.

Touch target sizes

The minimum touch target size is 44x44pt on iOS and 48x48dp on Android. These aren't soft guidelines — they come from Apple's HIG and Google's Material Design, backed by research on the average human fingertip size (approximately 44-57pt) and the error rate on smaller targets.

In practice, the interactive element itself can be smaller than 44pt (a 16pt icon, a 12pt text link) as long as the tappable area is 44pt minimum. Increase the tap area using padding or an invisible hit area extension.

What to check in your Figma designs:

• Every button, link, and interactive element has a tap area of at least 44x44pt
• Icon-only buttons (close, share, back) are especially vulnerable to being too small
• Form inputs should be tall enough to tap easily — at least 44pt height
• Checkboxes and radio buttons need adequate spacing from neighboring interactive elements

Gesture patterns

Use standard gestures for standard actions. Users have muscle memory for these — deviating from them causes confusion.

Tap: Select, activate, open. The default. Use for everything unless a more specific gesture is warranted.

Swipe (horizontal): Navigate between pages, dismiss cards (left swipe for delete in list items is a familiar iOS pattern), carousel navigation. Don't use horizontal swipe for anything where accidental triggering would be destructive unless there's an easy undo.

Swipe (vertical): Scroll. This is globally understood and shouldn't be used for anything else at the main scroll level.

Pinch: Zoom. Use only for map and image content — pinch to zoom on a UI element is unexpected and confusing.

Long press: Context menus, drag initiation, additional options. Discoverable only through exploration — don't put critical functionality behind long press. Use it for power-user shortcuts only.

Pull to refresh: Standard pattern for refreshing list content. Users expect this to work in any scrollable list.

Thumb zone design

On large phones (iPhone 15 Pro: 393pt wide, 852pt tall), there's a meaningful difference in reach depending on where you're holding the phone.

The standard thumb zone model divides the screen into three zones:

• Easy reach (lower 40% of screen): natural thumb position for one-handed use
• Reachable with stretch (middle 40%): requires repositioning the hand
• Difficult to reach (top 20%): requires significant stretch or switching to two hands

Design implications:

• Primary actions (the thing users will do most often) should be in the easy reach zone — lower half of the screen. Bottom navigation bars exist for this reason.
• Destructive actions (delete, irreversible actions) can live in the harder-to-reach zone. Accidental taps are less likely there.
• Don't put the most-used action at the top of a full-screen page — especially on large phones.

Floating action buttons (FABs) and bottom sheets are both solutions to the thumb zone problem — they bring key actions within comfortable thumb reach.

Haptic feedback

Haptics provide tactile confirmation of interactions. On iOS, UIKit and SwiftUI have built-in haptic feedback patterns. On Android, the Vibrator API handles this.

Design consideration: spec haptic feedback in your annotations for interactions where it adds clarity:

• Confirmation haptic after completing a task
• Light impact haptic when toggling a switch
• Error haptic (more intense) when form submission fails
• Selection haptic when scrolling through a picker

Don't overuse haptics. They should confirm important moments, not narrate every micro-interaction.

Drag-to-dismiss patterns

Bottom sheets and modal overlays on mobile increasingly use a drag handle and drag-to-dismiss gesture. The pattern: drag down from a bottom sheet to minimize or close it.

Design requirements for drag-to-dismiss:

• A visible drag handle at the top of the sheet (a short horizontal bar, typically 36x4pt, centered)
• A minimum drag distance before dismissal triggers (usually 30-40% of the sheet height)
• A velocity override — a fast flick down should dismiss even if drag distance is short
• Clear visual feedback during the drag (the sheet moves with the finger, with a spring-back if released before threshold)

For specs and prototyping: ProtoPie handles drag gestures natively. You can prototype a realistic drag-to-dismiss interaction in ProtoPie and share it with developers as a behavioral reference alongside your Figma static design.

Try ProtoPie

Testing touch designs

Static Figma designs don't reveal touch problems. You need to test on a real device.

The Figma Mirror app on iOS lets you view designs on a real phone at actual size — useful for checking that touch targets feel right. But mirror mode doesn't test interactions.

For interaction testing: export your Figma prototype and use ProtoPie or Principle to add touch-specific behaviors (drag, swipe, multi-touch). Then test on a physical device. Watching someone try to hit a 30pt button with their thumb is more valuable than any review session.

Try Figma Free

Common issues that only show up in real-device testing:

• Tap targets that look fine at design scale but feel small in practice
• Bottom navigation items that are too close together for comfortable tapping
• Modals that cover the keyboard when a form input is active
• Swipe gestures that conflict with the system-level navigation gestures (especially on iOS with back swipe from left edge)