Representing touch gestures in interactive prototypes for Multi-touch apps

Gesture Icons & Annotations

Standard Gesture Icons: Use established gesture icons to indicate actions like tap, swipe, pinch, zoom, rotate, etc.
Tap: A single-finger icon with an arrow pointing down.
Swipe: A hand with an arrow showing the direction (left, right, up, or down).
Pinch to Zoom: Two fingers coming together or spreading apart with arrows indicating inward or outward motion.
Rotate: A circular arrow around two fingers.
Annotations/Labels: Add text explaining the action (e.g., “Pinch to zoom,” “Swipe left,” etc.) next to the icon.

Animated Gestures

Animated Prototypes: Tools like Figma, Sketch, or Adobe XD allow you to create micro-interactions or animations showing gestures. This gives a more realistic demonstration of how users interact with the app.
GIFs or Videos: Insert short animations or video clips demonstrating the multi-touch gestures to help users understand how they work.

Interactive Prototypes

Tools with Gesture Support: Use interactive prototyping tools such as:
InVision: Supports tap, swipe, and other gestures directly in prototypes.
Figma/Adobe XD/Sketch + Plugins: With plugins or built-in capabilities, you can define interactions like swipes, taps, or pinch-to-zoom.
Protopie: A powerful tool that can simulate multi-touch interactions in detail, like two-finger gestures and complex transitions.

Gesture Libraries

Some design tools include gesture libraries or stencils:

Google Material Design: Offers a set of guidelines and gesture illustrations specific to Android multi-touch interactions.
Apple Human Interface Guidelines: Provides visual representations and animations of gestures for iOS apps.

Gesture Maps

Create a map of the different gesture interactions on a screen:

Overlays: Show an interface overlay where multi-touch areas are highlighted, with arrows or icons representing gestures users should perform.
Diagrams: A diagram shows the sequence of gestures and actions on different app screens.

Haptic Feedback Representation

For prototypes that simulate haptic feedback, indicate where and how the feedback would be triggered (e.g., long press or force touch) through a combination of icons and annotations.

Tools and Techniques:

Figma, Adobe XD, Sketch: These tools allow gestures to be simulated via triggers or using plugins like Proto.io, which supports multi-touch gestures.
Marvel, Framer, or Flinto: These tools also allow you to create fully interactive mobile prototypes, including support for pinch, zoom, and swipe gestures.

Implementing these gestures yourself

If you’re handling the prototyping yourself, here’s a more specific approach to incorporating touch gestures into your workflow using standard design tools:

Figma

Interactions Panel: Use the “Prototype” tab to add gesture-based interactions. For example:
Swipe: Link two frames and set the transition type to “Swipe” in the appropriate direction.T
ap/Hold: Add tap or long press triggers to navigate between screens or activate specific elements.
Plugins: The ProtoPie Plugin can extend Figma’s capabilities to handle complex gestures like pinch-to-zoom and multi-finger interactions.

Adobe XD

Triggers & Actions: In the prototype mode, you can define touch gestures by using predefined triggers like “Drag” or “Tap.”
Drag: Use this for swiping gestures (e.g., swipe left/right for navigation or transitions).
Pinch-to-Zoom: While XD doesn’t directly support multi-finger gestures, you can simulate the effect by animating zoom actions between frames.
Auto-Animate: This allows smooth transitions between frames based on user gestures (like a zoom effect).

ProtoPie

Advanced Gesture Support: ProtoPie offers advanced multi-touch gesture support, including pinch, rotate, and multi-finger interactions.
Real-world Testing: You can deploy the prototype to your phone for live testing and get a realistic feel for how the gestures perform.

Prototyping Best Practices

Responsive Feedback: Ensure the prototype provides visual feedback (e.g., highlighting buttons, zooming in/out) when a user interacts with gestures.
Consistency: Use consistent gesture language across the app (e.g., always swipe left to go back).
User Testing: Early on, deploy the prototype to a mobile device to test how intuitive the gestures are and adjust accordingly.

For using touch gestures specifically in Figma, here’s a step-by-step guide to implementing and simulating common multi-touch gestures like tap, swipe, and pinch-to-zoom.

Setting Up Interactive Frames in Figma

Create Frames: Design your app’s screens using Figma’s “Frames” feature. Each frame represents a different state or screen of your app.
Prototype Mode: Switch to the “Prototype” tab (top right) to add interactions between your frames.

Adding Basic Touch Gestures

Figma supports various gesture triggers, such as tap, drag, and swipe. Here’s how to set them up:

Tap Gesture

Select the element or button where the tap will occur.
In “Prototype” mode, drag the blue arrow to the destination frame.
In the Interaction panel, select “On tap” as the trigger.
Choose the animation (e.g., “Navigate To,” “Smart Animate,” “Instant”).

Swipe Gesture (Drag Trigger)

Select the element (e.g., a carousel or card) that should respond to a swipe.
In the Prototype mode, drag the blue arrow to the frame representing the next screen or card.
Set the trigger to “While Dragging” to simulate swiping left or right.
Adjust the interaction type (e.g., “Navigate To” or “Smart Animate”) for smooth transitions.

Pinch-to-Zoom (Simulating Zoom)

Figma doesn’t natively support multi-finger gestures like pinch-to-zoom, but you can simulate this interaction through a sequence of zooming frames:

Step 1: Create a zoomed-in version of your frame (e.g., a map or image) and a zoomed-out version.
Step 2: Set the interaction on the zoomed-out frame in the Prototype tab.Trigger: “On tap” (representing a pinch-in).Action: “Navigate To” the zoomed-in frame.Animation: Use “Smart Animate” for smooth zooming transitions.
Step 3: Repeat for pinch-out by linking the zoomed-in frame to the zoomed-out frame.

Creating Complex Gestures Using Plugins

Figma’s built-in tools may not fully support multi-finger gestures like pinch-to-zoom or rotate, but you can use the ProtoPie plugin to create advanced interactions.

Using ProtoPie for Complex Gestures:

Install ProtoPie Plugin: Go to Figma’s plugin library and install ProtoPie.
Select Frames: Choose the frames in Figma that will respond to advanced gestures.
Add Gesture Interactions: In ProtoPie, you can add more advanced gesture interactions, including:
Pinch-to-Zoom: Assign two-finger pinch gestures to zoom in or out of content.
Rotate: Use a two-finger rotate gesture for rotating objects like maps or images.
Preview on Device: ProtoPie allows you to test your prototypes on a physical device with real gestures, making verifying how users will interact with your app easier.

Testing and Iteration

Preview Mode: After setting up your gestures, switch to Figma’s “Present” mode to preview how the gestures behave in your prototype.
Mobile Testing: You can use the Figma mobile app to preview the prototype on your device. This lets you simulate the app’s feel in a natural mobile environment.
Iterate: Adjust timings, animations, and frame sequences based on how the interactions feel during testing.

Best Practices for Multi-touch Prototypes in Figma

Visual Feedback: To improve user experience, always provide visual feedback (e.g., button highlight, card movement) when a gesture is performed.
Animation Timing: Keep gesture animations smooth but quick enough to feel responsive, typically between 200ms and 400ms.
Test on Actual Devices: Even though you’re working in Figma, testing your prototype on mobile (through the Figma app) is critical to ensure intuitive gestures.

This workflow should help you efficiently prototype multi-touch interactions in Figma while leveraging plugins like ProtoPie for more complex gestures.

Setting up a specific gesture in Figma

Let’s go step-by-step through setting up a specific gesture in Figma. We’ll take the swipe gesture for a card-based interface as an example. This could be used for a news feed or a carousel of items in your multi-touch app.

Create the Initial Frames (Screens)

Step 1: Open Figma and create a new project or file.
Step 2: Create multiple frames using the “Frame” tool (press F). Each frame will represent a different card or screen in the swipeable sequence. Example: Create three frames labeled “Card 1,” “Card 2,” and “Card 3” that users can swipe between.
Step 3: Design each card with content such as images, text, or buttons.

Link the Frames with Swipe Gestures

Let’s add interactions allowing users to swipe between these cards.

Step 1: Switch to the Prototype tab.
Step 2: Select the first card (Card 1) by clicking on the frame.
Step 3: A small blue arrow will appear on the right side of the card. Click and drag this arrow to the next card (Card 2).
Step 4: In the interaction settings on the right, set the following: Trigger: Select “While Dragging” to simulate a swipe. Action: Choose “Navigate to” and select the frame (Card 2) as the destination. Animation: Select “Smart Animate” for a smooth transition or “Instant” if you want an immediate change.
Step 5: Repeat the same process for swiping from Card 2 to Card 3 and then link Card 3 back to Card 1 if you want a loop.

Preview the Swipe Gesture

Step 1: To test the swipe gesture, click the Play icon in the top-right corner of Figma to enter Presentation Mode.
Step 2: In Presentation Mode, you should now be able to click and drag on the cards to swipe between them.

Add Visual Feedback (Optional)

To make it clear that a swipe is happening, you can add minor animation effects to give visual feedback:

Opacity Change: When swiping, reduce the opacity of the current card as the next card comes in.
Scale Effect: Slightly enlarge the following card as it enters the view to give a sense of motion.
Step 1: Select the current card (e.g., Card 1).
Step 2: In the “Prototype” tab, under the Smart Animate settings, set the easing option to “Ease Out” and adjust the duration to about 300ms for a smooth transition.

Testing on a Mobile Device

Download the Figma mobile app on your Android or iOS device.
Open your prototype from the app, and test the swipe gestures in a mobile environment to see how they feel with real touch inputs.

Additional Tips for Swipe Gestures:

Swipe Speed Sensitivity: If the swipe speed feels off, you can adjust the animation speed by modifying the duration in the prototype settings.
Looping: If you want the swipes to loop (i.e., swiping left from Card 1 to Card 3), create links for both directions (left and right).

Well, that’s about it. Go UX.