Press Effect
Learn how to use Press Effect to customize a layer’s pressed state with scale and color overlay settings for responsive, tactile interactions.
The Press Effect lets you customize how a layer looks while it is being pressed (mouse down or touch down). This helps make interactions feel more responsive, tactile, and polished.
By default, layers have no press effect applied. You can opt in and customize it per layer.
What is a Press Effect?
A Press Effect controls a layer’s down state: the visual feedback users see while they are pressing a layer, before releasing it.
You can use Press Effect to:
Slightly scale a layer up or down
Apply a color overlay
Adjust the opacity of that overlay
This is especially useful for buttons, cards, and tappable UI elements.
When Should You Use Press Effect?
Press Effect is ideal for:
Buttons and CTAs
Tappable cards or list items
Any interactive element where visual feedback improves clarity
A subtle scale change or light overlay often feels more natural than a static element.
Where to Find Press Effect
Select a layer in the PLAY editor
Open the Interactions section
Click the Press Effect Properties button
Press Effect Properties Popup
Clicking the Press Effect button opens the Press Effect Properties popup. When the popup is open, the selected layer will appear as if it is currently pressed in the viewport, updating live as you change values.
The panel includes:
Set Scale
Color Overlay
Opacity
Reset to Default button
Note: By default, the Press Effect opacity is set to 0%. If you change the color without increasing the opacity, the color overlay will not be visible on the layer.
Previewing the Press Effect
While the Press Effect panel is open: The effect is applied directly to the layer in the viewport so you can preview changes instantly.
When the panel is closed: The preview is removed, and the layer returns to its normal state.
This allows you to fine-tune the pressed appearance without repeatedly clicking the layer.
Scale
Set Scale controls how much the layer grows or shrinks while pressed. The scale transition is eased in and out automatically, creating a smooth and responsive pressed interaction.
Range: 0% – 1000%
Default: 100% (no size change)
Examples
95% → Layer slightly shrinks when pressed
105% → Layer slightly grows when pressed
50% → Layer becomes much smaller when pressed
This is commonly used to create a subtle “press-in” feeling.
Color Overlay
The Color Overlay lets you tint the active (visible) pixels of a layer while it is pressed.
Color
Choose a color or enter a hex value
Default: Black (#000000)
Opacity
Controls how strong the color overlay appears
Range: 0% – 100%
Default: 0% (no visible overlay)
How it works
When pressed, the layer’s visible pixels are overlaid with the selected color at the specified opacity.
Reset to Default
The Reset to Default button quickly removes all press effect customization.
When clicked, it resets:
Scale to 100%
Color Overlay to Black (#000000)
Opacity to 0%
Use this if:
You want to remove the press effect entirely
You want to start over with a clean slate
You’ve experimented and want to return to the default behavior
Best Practices
Keep scale changes subtle (typically between 90%–110%)
Use low opacity overlays for a polished look <20%
Test the effect using the viewport & preview before finalizing
Remember: If opacity is 0%, the color overlay won’t be visible
Last updated