1.2 Button Press Feedback
What you are building
A button that visually responds when pressed and released.
On touch down, the button reacts immediately.
On touch up, it returns to normal and completes the action.
This is what makes buttons feel responsive and physical in iOS.
How to think about it
A button press is not a single moment.
It has a beginning and an end.
Touch down acknowledges the finger.
Touch up completes the action.
Good interfaces respect both.
Recreate this in ProtoPie
Start by creating two layers:
Button: the base shape
Label: the text inside the button
The Button reacts visually.
The Label maintains contrast and clarity.
Step 1: Add touch down trigger
Select the Button layer.
Add a Touch Down trigger.
This fires the moment the finger touches the button.
Step 2: Change button color on press
Add a Color response.
Target: Button
Set the fill to an active or pressed color
This visually acknowledges the press.
Step 3: Update label color
Add another Color response.
Target: Label
Set the fill to a color with good contrast
This keeps the label readable during the press state.
Step 4: Scale the button down
Add a Scale response.
Target: Button
Set scale by Factor
Set X and Y to 96
This gives the button a subtle physical press feel.
Step 5: Add touch up trigger
Add a Touch Up trigger to the Button layer.
This fires when the finger is released.
Step 6: Reset button color
Add a Color response.
Target: Button
Set the fill back to the default color
This restores the button’s original state.
Step 7: Reset label color
Add another Color response.
Target: Label
Set the fill back to the default color
This keeps visual consistency.
Step 8: Scale the button back
Add a Scale response.
Target: Button
Reset scale to default
Use the same duration and easing for symmetry.
Step 9: Add haptic feedback
Add a Vibrate response.
Keep it subtle. This confirms the interaction without distraction.
Step 10: Preview and test
Press and release the button repeatedly.
Check for:
Immediate feedback on touch down
Clean return on touch up
Clear visual contrast throughout
If the button feels alive, it is working.
Try this next
Change scale amount and compare feel
Add easing differences between down and up
Trigger navigation on touch up
