···

    State management for prototypes

    Before you start

    Who can use this feature

    Available on any team or plan.

    Anyone with can edit access to a file can create prototypes.

    In prototypes, we want to our interactions to feel as much like the real thing as possible—especially when moving back and forth across multiple frames.

    State management allows us to maintain object properties and states when navigating in and across frames when playing prototypes.

    State management can be used with interactive components, scroll position, and videos in prototypes in three ways:

    • State memorization: Preserve the state of an object when you leave and return to the frame
    • State sharing: Share states between matching objects in different frames
    • State reset: Reset object states on each interaction

    State memorization

    When you navigate back and forth between frames, objects re-open in their last set state.

    Interactive components

    Figma memorizes the last set variant of your interactive component.

    For example, you might have an interactive component for a checkbox. If you set the interactive component to the checked variant, Figma remembers the state of that variant. This means that if you navigate away from that frame and come back to it later, the interactive component will remain in the checked state.

    A prototype showing an email settings page. A few settings are checked off. When the prototype navigates to the next frame, then back to the original frame, the same settings are still checked off.

    Scroll position

    Figma memorizes your scroll position.

    For example, you might have a map with horizontal and vertical scrolling enabled. If you scroll to a specific location on the map, Figma remembers the position of your scroll. This means that if you navigate away from that frame and come back to it later, you will remain scrolled to the same location on the map.

    A prototype showing a map. The user scrolls to a specific location on the map, navigates away, and then returns to the map, which is still scrolled to the same location.

    Videos

    Figma memorizes the play state of any videos used in your prototypes.

    For example, you might start playing a video on one frame. When you get to the 5 second mark, you navigate to another frame. If you go back to the original frame, the video will continue playing from the 5 second mark, right where you left off.

    A prototype of a video player. The video starts playing, then the user navigates to another frame. When they return to the video, the video resumes playing where it left off.

    State sharing

    When you navigate between frames with matching objects, the state of the first object is shared with the second object.

    Interactive components

    Figma shares states between matching interactive components. States are only shared after the component has been initially interacted with.

    For example, you might have an interactive component for a checkbox, with an instance of the unchecked variant on each of two frames. When you play your prototype, you check the checkbox in the first frame. Then, when you navigate to the second frame, the matching component on the second frame will also be set to the checked variant.

    A prototype showing an email settings page. A few settings are checked off. When the prototype navigates to the next frame, the matching interactive components are also checked off.

    Scroll position

    Figma shares scroll position between matching objects.

    For example, you might have a map with horizontal and vertical scrolling enabled on each of two frames. If you scroll to a specific location on the map, then navigate to the second frame, the matching map object on the second frame will be scrolled to the same location.

    A prototype showing a map. A user scrolls to a location. When the prototype navigates to the next frame, the matching map object is scrolled to the same location.

    Videos

    Figma shares video play state between matching objects.

    For example, you might start playing a video on one frame. When you navigate to a second frame with a matching video object, the video on the second frame will continue playing from where you left off.

    A prototype showing a video player. When the uesr navigates to the next frame, the matching map video object on the next frame starts playing from where the first video left off.

    State reset

    When users are navigating through prototypes, an object’s state may need to be reset on specific interactions. Object states should be reset on the interaction that navigates to the next frame.

    1. Click on a prototype connection to open the Interaction details panel.
    2. In the State Management section of the panel, check off any of the following settings:
      1. Reset scroll position: Reset to original scroll location
      2. Reset component state: Reset to original component state, as set on the canvas
      3. Reset video state: Restart the video from the beginning, and reset to its original play state

    reset_state_settings.png

    Note: The reset settings only appear on the Interaction details panel if they are relevant to the currently selected interaction. For example, if the interaction connects to a frame without a video, there won’t be a Reset video state setting.

    Interactive components

    Reset interactive component states to their original state, as set on the canvas.

    For example, you might have an interactive component for a loading bar with empty and complete variants.

    You want the loading bar to restart on the empty variant when the user clicks a reload button, so you check off the Reset component state setting on the button interaction.

    A prototype showing a loading page. When the prototype navigates to the next frame, the loading bar restarts.

    Scroll position

    Use Reset scroll position to return to the original scroll location, as set on the canvas.

    For example, you might have a map with horizontal and vertical scrolling enabled. You want to return to the original scroll location when navigating between frames, so you check off the Reset scroll position setting on the interaction.

    A prototype showing a map. A user scrolls to a location. When the prototype navigates to the next frame, the scroll location resets to its starting position.

    Videos

    Restart the video from the beginning, and reset to its original play state, as set on canvas.

    For example, you might start playing a video on one frame. When you get to the 5 second mark, you navigate to another frame. When you return to the original frame, you want to restart the video from the beginning, so you check off the Reset video state setting on the interaction.

    A prototype showing a video player. When the user navigates to the next frame, the video restarts from the beginning.

    What are matching objects?

    Objects are considered matching if they have the same layer name and the same set of parents across top-level frames.

    Tip: If you don’t want the state to be shared across two objects, you can rename them so they no longer match.

    Top-level frames are frames directly placed on the canvas. Since top-level frames don’t have parent objects, you can match them by using identical layer names or layer names with matching strings. For example, a top-level frame with the name Checkout / 1 will match another top-level frame with the name Checkout / 2, since everything before the forward slash is identical.

    To identify objects that match between frames:

    1. Open the Prototype tab in the right sidebar.
    2. Hover over an object or layer in the canvas.
    3. Figma will highlight the matching object in any other frames it exists in.

    Multiple frames are shown on a Figma canvas. There are matching bottom navigation bars on all three frames, highlighted in blue.

    Tip: Smart animate is another prototyping feature that relies on object matching. Learn more about smart animate and matching objects →

    Update to new state management

    Figma updated to its current state management controls on May 24, 2023.

    For prototype interactions that were created before May 24, 2023:

    • Interactive components cannot share states across frames
    • Scrolling objects cannot memorize their state when re-opened
    • Scrolling objects can share states across frames only if the Preserve scroll position setting is checked

    Note: The Preserve scroll position setting is only available for interactions created before May 24, 2023. In new interactions, scroll position is shared (i.e., preserved) by default, and can be reset if needed with the Reset scroll position setting.

    To update any older interactions to the new state management controls:

    1. Click on a prototype connection to open the Interaction details panel.
    2. Click Update.

    A side by side of old vs. new Interaction Details modal.

    Tip: To update all interactions in a file at once, right-click on the canvas and select Update all interactions.

    Related Videos