Actions are responses to a fired trigger. Together, triggers and actions create interactions in Play.
Below are Play’s actions and what will happen when each action is triggered.
Set Property
A Set Property action sets the value of one of an object's properties, like height, rotation, or gap.
Target: Select the element that this action will affect
Property: Select the property that this action will change. Options include: Width, Height, Scale, Scale X, Scale Y, Scroll X, Scroll Y, Offset X, Offset Y, Radius, Rotation X, Rotation Y, Rotation Z, Translate X, Translate Y, Translate Z, Order, Depth, Gap, Hidden
Value: Set the object’s resulting rotation in degrees (note, you can use the Expression Editor for advanced rotate actions)
Animate: Choose to add action specific animation with properties like Delay, Duration, and Easing (note, this will override values in animate blocks)
Set State
A Set State action changes the state of a given component.
Target: Select the component that this action will affect
State: Select the state the component should be in at the end of the interaction (note, you can use the Expression Editor for advanced Set State actions)
Animate: Choose to add action-specific animation with properties like Delay, Duration, and Easing (note, this will override values in animate blocks)
Tween State
A Tween State action animates a component between two states based on a percent value. Tween State actions
Target: Select the component that this action will affect
State: Select the state the component should be in at the end of the interaction (note, you can use the Expression Editor for advanced State actions)
Percent: Set the percent, typically done with a custom expression
Set Event
A Set Event action fires an event that a Custom Event trigger listens for.
Event: Select (or create) the event that this action will fire
Delay: Set the number of seconds between the trigger firing and the action beginning
Start Timer
A Start Timer action starts a selected Timer trigger.
Target: Select the Object the desired Timer trigger is on
Timer: Select the Timer trigger to start
Stop Timer
A Stop Timer action stops a selected Timer trigger.
Target: Select the Object the desired Timer trigger is on
Timer: Select the Timer trigger to stop
Reset All Properties
A Reset All Properties action resets every changed property back to their original value.
Target: Select the element that this action will affect
Animate: Choose to add action specific animation with properties like Delay, Duration, and Easing (note, this will override values in animate blocks)
Set User Interaction
A Set User Interaction action lets you specify whether users can interact with a given object or not.
Target: Select the element that this action will affect
Interaction: Choose to enable or disable user interaction on the Target
Set Gyroscope
A Set Gyroscope action enables or disables the device’s gyroscope, thus controlling whether a gyroscope trigger fires.
Type: Choose to start the gyroscope or stop the gyroscope
Set Padding
A Set Padding action changes the padding on one or more sides of an object.
Target: Select the element that this action will affect
Padding: Flip the switch of the sides where the padding should change, and enter a padding value. Options include: All, Top, Left, Bottom, and Right. Selecting “All” will unflip all other switches to allow you to set a consistent value around all sides (note, you can use the Expression Editor for advanced order actions)
Animate: Choose to add action specific animation with properties like Delay, Duration, and Easing (note, this will override values in animate blocks)
Set Safe Area
A Set Padding action adds Safe Area padding or margin to an object.
Target: Select the element that this action will affect
Type: Choose to add Padding safe area as the Padding or the Margin
Top Safe Area: Choose to turn on the top safe area for the selected type
Bottom Safe Area: Choose to turn on the bottom safe area for the selected type
Animate: Choose to add action specific animation with properties like Delay, Duration, and Easing (note, this will override values in animate blocks)
Navigation Actions
Open Sheet
An Open Sheet action opens another page as a sheet/modal on top of the user's current page.
Page: Select the page to open as a modal
Style: Choose if the modal is a Page Sheet or Form Sheet (only for iPad designs—coming soon!)
Page Sheet
Detents: Choose up to four possible modal heights. Options include:
Medium: use the native iOS medium detent size
Large: use the native iOS medium detent size
Custom: set a custom height in points or percent
None: set unused detents to none
Start Detent: Choose the sheet’s initial detent when opened
Corner Radius: Set the sheet’s corner radius (top two corners only)
Grabber: Choose if the sheet’s grabber is displayed
Prevent Dismissal: Choose if the user is able to dismiss the sheet by swiping down
Always Scrollable: Choose if the sheet’s content can be scrolled
Interaction Beneath: Choose if the user is able to interact with content beneath the sheet
Open Page
An Open Page action takes the user from the current page to a destination page.
Page: Select the destination page
Style: Choose how to open the page. Options include:
Default: the page opens natively
Without a navigation bar present, the page will enter from the bottom and will look like a modal sheet but without sheet properties
With a navigation bar present, the page will enter from the right and the nav bar will transition natively
Full Screen: the page will enter from the bottom, fill the full screen, and will need a Dismiss Page action to be dismissed
Custom: the page opens with custom animation
Animation: Choose how the destination page animates into view. Options include: None, Move In, Scale In, Push In, Fade In, or Scale Up
Move In From: Choose the direction that the destination page animates into view from. Options include: Top, Left, Bottom, or Right
Load on Root Level: Choose if the new page should load on top of all page containers
Animate: Choose to add action specific animation (note, this will override values in animate blocks)
Dismiss Sheet
A Dismiss Sheet action closes an open sheet/modal.
Animate: Choose if the modal animates as it closes
Close All Sheets: Choose to close all open sheets or just the top sheet
Dismiss Page
A Dismiss Page action takes the user back to the previous page. Dismiss Page actions inherit the action settings of the Open Page action that took the user to that page.
Duration: Set the number of seconds the action will take to complete
Easing: Choose the action's easing curve. Options include: Default, Linear, Ease In, Ease Out, Ease In & Out, Spring, or Custom.
Toggle Nav Bar
A Toggle Nav Bar action lets you show or hide a nav bar.
Visibility: Choose whether to show or hide the nav bar
Toggle Tab Bar
A Toggle Tab Bar action lets you show or hide a tab bar.
Visibility: Choose whether to show or hide the nav bar
Animated: Choose if the tab bar animates as it leaves view/comes into view
Go To URL
A Go To URL action takes the user to a set URL in their browser of choice. Note, this is different from a web view element.
URL: Enter the full URL for the destination
Set Page Loader
Target: Select the page loader that the action will affect
Select Page: Select the page that is loaded into the page loader
Remove Page: Choose if the previously loaded page should be removed
Effects Actions
Set Layer Blur
A Set Layer Blur action increases or decreases the blur on a layer.
Target: Select the element that this action will affect
Value: Set the object’s resulting layer blur radius (note, you can use the Expression Editor for advanced blur actions)
Animate: Choose to add action specific animation with properties like Delay, Duration, and Easing (note, this will override values in animate blocks)
Set Progressive Blur
A Set Progressive Blur action increases or decreases the progressive blur on a layer.
Target: Select the element that this action will affect
Value: Set the object’s resulting progressive blur (note, you can use the Expression Editor for advanced blur actions)
Animate: Choose to add action specific animation with properties like Delay, Duration, and Easing (note, this will override values in animate blocks)
Set SF Symbol Effect
A Set Symbol Effect action adds motion to an SF Symbol in one of six animation types.
Target: Select the SF Symbol that this action will affect
Animation: Choose the animation type (note, you can use the Expression Editor for advanced blur actions). Options include:
None: "Turns off any animation effects"
Appear: "Causes a symbol to gradually emerge into view"
Direction: Specify how the icon is animated into view. Options include:
Up: the icon scales up as it fades into view
Down: the icon scales down as it fades into view
Disappear: "Causes a symbol to gradually recede out of view"
Direction: Specify how the icon is animated out of view. Options include:
Up: the icon scales up as it fades out of view
Down: the icon scales down as it fades out of view
Pulse: "Varies the opacity of a symbol over time"
By Layer: Choose whether to animate the full icon at once or each layer sequentially (only applicable to some icons)
Speed: Choose how fast or slow the animation should be. Options include: 0.25x, 0.5x, 1x, 1.5x, and 2x
Repeat: Choose how many times the animation should repeat before ending. Select "continuous" to repeat indefinitely by sliding the slider all the way right
Bounce: "Briefly scales a symbol with an elastic-like movement that goes either up or down and then returns to the symbol’s initial state"
Direction: Specify whether the icon scales up or down from its original size as it bounces. Options include: Up and Down
By Layer: Choose whether to animate the full icon at once or each layer sequentially (only applicable to some icons)
Speed: Choose how fast or slow the animation should be. Options include: 0.25x, 0.5x, 1x, 1.5x, and 2x
Repeat: Choose how many times the animation should repeat before ending. Select "continuous" to repeat indefinitely by sliding the slider all the way right
Scale: "Changes the size of a symbol, increasing or decreasing its scale"
Direction: Specify whether the icon scales up or down from its original size as it bounces. Options include: Up and Down
By Layer: Choose whether to animate the full icon at once or each layer sequentially (only applicable to some icons)
Speed: Choose how fast or slow the animation should be. Options include: 0.25x, 0.5x, 1x, 1.5x, and 2x
Variable Color: "Incrementally varies the opacity of layers within a symbol"
Layer Style: Choose which layers are visible as they animate in. Options include:
Cumulative: layers animate in and stay visible until all layers are visible
Iterative: layers animate in one at a time, with each layer disappearing as the next layer comes into view
Hide Inactive Layers: Choose to show a lower opacity version of all layers at all times (on) or only show the active layer
Auto-Reverse: Choose whether to ping pong (on) or loop (off) the layers' opacity
Speed: Choose how fast or slow the animation should be. Options include: 0.25x, 0.5x, 1x, 1.5x, and 2x
Repeat: Choose how many times the animation should repeat before ending. Select "continuous" to repeat indefinitely by sliding the slider all the way right
Content Actions
Set Text
A Set Text action adds copy to a text element.
Target: Select the text element that this action will affect
Text: Set the text that will be added to the text element (note, you can use the Expression Editor for advanced data actions, like setting a variable to a text element)
Delay: Set the number of seconds between the trigger firing and the text updating
Set Image
A Set Image action sets a photo to an image element.
Target: Select the image element that this action will affect
Image: Set the photo that will be added to the image element
Remove Current Image: Choose if the current image data is removed
Transition: Choose how the new image will transition into view
Set Video
A Set Video action adds video content to a video element.
Target: Select the video element that this action will affect
Video: Set the video that will be added to the video element
Remove Current Video: Choose if the current video data is removed
Delay: Set the number of seconds between the trigger firing and the video being added
Set SF Symbol
A Set SF Symbol action replaces one SF Symbol with another.
Target: Select the SF symbol element that this action will affect
SF Symbol: Select the new icon
Variable Progress: Turn on your new icon's variable color (if applicable) and choose its progress
Replace Animation: Choose whether or not to animate the new icon into view
By Layer: Choose whether to animate in the full icon at once or each layer sequentially (only applicable to some icons)
Direction: Specify how the icon is animated. Options include:
Down Up: the existing icon scales down and fades out; the new icon scales up and fades in
None Up: the existing icon fades out; the new icon scales up and fades in
Up Up: the existing icon scales up and fades out; the new icon also scales up and fades in
Native Device Actions
Set Haptic
A Set Haptic action plays haptic feedback.
Type: Select the type of haptic feedback. Options include: Notification haptics, Impact haptics, and Selection haptics
Notification / Impact: When the type is Notification or Impact, this property will appear with options
Notification options include: Success, Warning, or Error
Impact options include: Light, Medium, Heavy, Rigid, or Soft
Delay: Set the number of seconds after the trigger fires that the haptic should play
Set Status Bar
A Set Status Bar action changes the appearance of your device's status bar.
Appearance: Set the status bar's style. Options include: Auto, Light, and Dark
Show Status Bar: Choose if the status bar is visible or not
Animation: Choose to add action specific animation with properties like Delay, Duration, and Easing (note, this will override values in animate blocks)
Native iOS Control Actions
Set Segment
A Set Segment action selects a certain segment of a segmented control.
Target: Select the segmented control that this action will affect
Segment: Choose the segment to select
Delay: Set the number of seconds after the trigger fires before the chosen segment is selected
Dismiss Keyboard
A Dismiss Keyboard action dismisses any open keyboard.
Delay: Set the number of seconds after the trigger fires before the keyboard should dismiss
Set Focus
A Set Focus action focuses on a text field and opens the keyboard.
Direction: Choose to focus on a specific text field or cycle through all text fields. Options include:
Select Target: Focus on a specific text field
Target: Select the text field to focus
Forward: Cycle forward through all text fields on the page
Start Tag: Select the tag of the text field that should focus first
Wrap: Choose if the focus should cycle through all text fields again once they've all been focused
Backward: Cycle backward through all text fields on the page
Start Tag: Select the tag of the text field that should focus first
Wrap: Choose if the focus should cycle through all text fields again once they've all been focused
Delay: Set the number of seconds after the trigger fires before the text field focuses
Native Camera Actions
Open Camera
An Open Camera action opens the device's camera above the UI.
Output: Select the image element that the captured photo will fill
Camera: Choose if the camera should open as a front or back camera
Allow Editing: Choose if the user can crop their photo
Flash: Choose if the camera should have flash. Options include: Auto, On, or Off.
Delay: Set the number of seconds after the trigger fires that the camera should open
Open Library
An Open Library action opens the device's photo library.
Output: Select the image element that the selected photo will fill
Allow Editing: Choose if the user can crop their selected photo
Delay: Set the number of seconds after the trigger fires that the library should open
Capture
A Capture action takes a photo using the device's camera.
Mode: Choose to capture a photo or a video
Target: Select the camera view element that will preview the camera
Output: Select the image element that the selected photo will fill
Save to Library: Choose if the captured image or video should be saved to the device
Set Lens
A Set Lens action changes a camera view element's lens.
Mode: Choose to capture a photo or a video
Target: Select the camera view element that will preview the camera
Lens: Choose the resulting lens type. Options include: Ultra Wide, Wide, Telephoto, and Front
Digital Zoom: Set the level of zoom on the camera from 1x to 8x
Animate Zoom: Choose if the camera zoom should animate in
Set Preview
A Set Preview action sets the appearance of a camera view element's preview.
Target: Select the camera view element that will preview the camera
Preview: Choose if the camera view should or should not preview the camera's subject
Preview Quality: Choose the quality of the camera view element's preview
Preview FPS: Choose the frames per second of the camera view element's preview
Native Video Actions
Play / Pause
A Play/Pause action pauses, plays, or stops a targeted video.
Target: Select the video element that this action will affect
Playback: Choose if the video should play, pause, toggle between play & pause, or stop when the action is triggered
Delay: Set the number of seconds between the trigger firing and the action beginning
Seek
A Seek action unselects a currently selected map pin.
Target: Select the video element that this action will affect
Type: Choose if the video should seek to a certain point in the video or seek by a certain number of seconds
Seek To: Seek to a particular second in the video
Time: Choose the time mark in seconds
Seek Percent: Seek to a particular percentage in the video
Seek Percent: Choose the percent
Seek By: Seek forward or backward by a set number of seconds
Direction: Choose if the video should rewind or go forward
Seek Amount: Choose the number of seconds to seek
Loop Video
A Loop action will turn loop (continuously reply of the video) on or off.
Target: Select the video element that this action will affect
Loop: Choose to turn loop on or off
Delay: Set the number of seconds between the trigger firing and the action beginning
Native Map Actions
Set Map Pin
A Set Map Pin action selects or unselects a pin on a map.
Type: Choose to select or unselect a pin
Map: Select the map that this action will affect
Pin: Choose the index of the selected pin
Move to Pin: Choose if the map should move to the selected pin
Altitude: Choose how zoomed in the map appears (the Z distance)
Offset X: Offset the pin horizontally from the center of the map
Offset Y: Offset the pin vertically from the center of the map
Animate: Choose to add action specific animation with properties like Delay, Duration, and Easing (note, this will override values in animate blocks)
Rive Actions
Play / Pause Rive
A Play / Pause Rive action controls the playback of a Rive animation.
Target: Select the Rive element that this action will affect
Playback: Choose if the action should play, stop, pause, or restart the Lottie (please note, pause and stop Rive will have the same effect)
Delay: Set the number of seconds between the trigger firing and the video being added
Rive / Set Text
A Rive / Set Text action controls the playback of a Rive animation.
Target: Select the Rive element that this action will affect
Text Name: Enter the Text Name
Value: Enter the Rive text's value
Set Rive Input
A Set Rive Input action lets you control Rive's interactive values, like states and inputs. To read more, check out Rive's State Machine support page.
Please note Rive inputs only work if the animation is playing, so you'll often want Autoplay turned on in the Element Settings.
Target: Select the Rive element that this action will affect
State: Set the Rive's state, which can be created in Rive
Input: Set the input type, which you'll create in Rive as a Boolean (on/off), Trigger (specific animation with a start and end), and Numeric (a number associated with a value).
If your trigger is distinct (like tap or press), you'll set the input's value
If your trigger is continuous (like pan or scroll), you can set a range of input values to move through
Logic and Other Nodes
Set Variable
A Set Variable action assigns a new value to a variable. You can set multiple variables in the same action by clicking the + button.
Select Variable: Choose the variable to update. If no variables exist, you can define one in the Variables Panel.
Enter Value: Set the variable’s resulting value (note, you can *and should* use the Expression Editor for advanced variable actions)
A Print action lets you debug your interactions by displaying a value on your device, outside of the UI. You can print multiple values in the same action by clicking the + button.
Title: Choose a title for each printed value
Value: Set the value you’d like to display
Duplicate
A Duplicate action lets you duplicate any object on your page within the prototype. This action will not affect your design file's layers.
Target: Select the object to duplicate
Duplicate to: Select the location of the duplicated object. Options include:
Same Parent: make the original and duplicated objects siblings
Page: make the duplicated object a parent of the page
Custom: choose a stack to place the duplicated object
Insert to: Choose if the duplicated object should be the first sibling or last sibling
Animate In: Choose whether or not to animate the duplicated object into view. Options include: Fade, Scale and Fade, and Blur and Fade.
Remove
A Remove action lets you remove any object from your page within the prototype. This action will not affect your design file's layers.
Target: Select the object to remove
Animate Out: Choose whether or not to animate the object out of view. Options include: Fade, Scale and Fade, and Blur and Fade.
Remove Child: Choose to remove one of the target's children, selected with the Index property
Condition
Conditions are the primary way to use logic in Play. They let you use a trigger to fire different actions in different circumstances.
Animate
An Animate block lets you add a delay, duration, and easing curve to multiple actions at once.
Delay
A Delay block allows you to add a delay without animating the resulting action.
Timer
Timers fires repeatedly at a given interval for a given number of repetitions.
Loop & Loop Children
Loop Children lets you target each of a selected container’s children using a single action. Loop iterates through a range of numeric values (from Start to End) that can be used in an action.
Group
A Group helper groups triggers, actions, and helpers together so they can be easily moved or collapsed.