Related Videos

• Prototype triggers

  Before you start

  Who can use this feature

  Users on any team or plan.

  Users with can edit access can create prototypes.

  New to Prototyping? Check out our Getting Started with Prototyping guide.

  The Trigger determines what type of interaction with the hotspot will cause the Prototype to advance. This could be a mouse or touch interaction like tap, drag, click, and more.

  While most of these transitions are self-explanatory, we have a few tips for how you can use them.

  This article covers our Prototyping Triggers in more detail.

  On Click/On Tap

  Triggers the action when the user Clicks (desktop) or Taps (mobile) on a hotspot in your prototype. You can add click or tap triggers to lots of different elements in a screen.

  You can use them for navigation like opening links, using menus, or exploring websites. They can also be used when you need a user to click on buttons, fill in forms, or confirm and dismiss alerts.

  On Drag

  Allows you to perform an action when you drag an element on the screen. This can be the entire frame or a single element like a slider.

  You can use the On Drag in any direction: Left, Right, Up or Down. This is great for simple swipe gestures, or for more complex animations like a drag to refresh.

  Drag allows you to move back and forward through the transition. This creates a continuum, instead of performing the action after a swipe gesture.

  While Hovering

  Triggers the action when you hover over the hotspot. You can use this to replicate tooltips, on-screen prompts, or changes in state.

  We will return the user to the original frame when they move the cursor off the hotspot. This makes it a great interaction when you don't want to take users away from the current screen.

  While Pressing

  Triggers the action when you click and hold the mouse or trackpad on a desktop. Or, when you tap and hold on a mobile device.

  You can use this trigger for navigating drop-down menus, or replicating long-press interactions like viewing a preview using 3D Touch on iOS.

  When released, we will take the user back to the original Frame. This makes it great for Overlays that capture temporary interactions or state changes.

  Keyboard and Gamepad Shortcuts

  The Keyboard / Gamepad trigger lets you replicate interactions with a keyboard shortcut. This applies to user inputs from keyboards, controllers, and gamepads.

  A trigger can be a single key or button, or a combination of keys.

  For example: a trigger can be based on the user pressing the Enter key or ✕ button on a controller. Or using a shortcut like Shift – K.

  Note: We officially support the Xbox One, PS4, and Nintendo Switch Pro Controllers. Other controllers may work, but buttons displayed in Figma may not accurately reflect the controller.

  Mouse Enter

  This shows the Destination frame when the mouse enters the hotspot area. This could be a small area like a button, or an entire section of the screen.

  You could use this to expose the options in a drop down menu as your mouse enters the field. The menu will stay open until the user performs another interaction like selecting an item or clicking out of the field.

  Note: We don't reverse the transition on leaving the hotspot, so you will need to set up the next step in the prototype.

  Mouse Leave

  This shows the Destination frame when the cursor leaves the hotspot area.

  You could use this for on-screen prompts, like an alert when you haven't completed a field or checked a box.

  Mouse Down (Touch Down)

  This triggers the Destination frame when you first press the mouse or touch pad. For mobile devices, this is when the user's finger first touches the hotspot.

  Mouse Up (Touch Up)

  This triggers the Destination frame when you release the mouse or touch pad. For mobile devices, this is once the user's finger no longer touches the Hotspot.

  • Apply the Mouse Down trigger to the menu header to open an Overlay.
  • Apply the Mouse Up interaction to the menu item in the Overlay.
  • When they release the mouse, we take the user to the relevant Frame.

  Tip! Use the Mouse Down and Mouse Up triggers together to replicate a user navigating a drop-down menu.

  After Delay

  The After Delay trigger allows you to trigger an action after the user has spent a certain amount of time on a given frame. You will need to set the duration of the delay in milliseconds (ms). You can only apply this to a top-level Frame, not a specific layer or object.

• Prototype animations

  Before you start

  Who can use this feature

  Users on any team or plan.

  Users with can edit access can create prototypes.

  New to Prototyping? Check out our Getting Started with Prototyping guide.

  Animations can be used to create smooth transitions between pages and define the behavior for actions like expanding a menu, swiping between pages, or opening a gallery.

  Instant

  The Instant transition will immediately display the Destination Frame, when the hotspot is interacted with (clicked, hovered over, or pressed).

  

  Dissolve

  The Dissolve transition will fade in the Destination frame, on top of the original frame.

  Supports:

  • Duration
  • Easing

  

  Smart Animate

  Smart Animate looks for matching layers that exist across multiple frames. For layers that match, we recognize what's changed and apply transitions to seamlessly move between them.

  Supports:

  • Duration
  • Easing

  

  Move In / Move Out

  The Move transition will slide the Destination frame into or out of view, above the original frame.

  Supports:

  • Easing
  • Direction
  • Duration

  

  Push

  The Push transition will push out the original frame, as the Destination frame is moved into view. This is the perfect transition for replicating a swiping gesture.

  Supports:

  • Direction
  • Easing
  • Duration

  

  Slide In / Slide Out

  The Slide will move the Destination frame into or out of view. Slide will slowly offset the frame as it dissolves, while the Move transition keeps the original frame stationary.

  Supports:

  • Direction
  • Easing
  • Duration

  

  Tip! Use prototype easing and spring animation curves to give your animations a unique and natural feel.

• Prototype easing and spring animations

  Before you start

  Who can use this feature

  Supported on any team or plan.

  Anyone with can edit access can create prototypes.

  New to Prototyping? Check out our Getting Started with Prototyping guide.

  Prototypes have many moving parts. Add easing and spring animation presets, or customize the easing of transitions, to communicate movement, emotion, and make your prototype more like the real thing.

  Easing determines the acceleration of the transition between a starting frame and its destination, also known as keyframes, by using a mathematical function. Keyframes can be two frames in an interaction, like the transition from one screen to another, or the beginning and end states of a single frame, like an object changing color.

  In the example animations below, easing is represented by a curve on a graph where time is applied to the x axis and the transition, such as Move In, Slide, or Smart Animate is on the y axis. The keyframes are represented by the beginning and end points of the line of curve in the graph.

  Learn more about adding interactions to prototypes →

  Tip! Hover over the preview window in the Interaction details modal to see a preview of your animation.

  Easing Bezier presets

  Linear

  This is the default acceleration and is applied in a constant straight line. As objects in nature rarely move at a constant speed, linear curves can look unnatural or robotic.

  

  Ease In

  Creates an animation that starts slowly and accelerates as it reaches the end of its duration. This works well for smoothly transitioning objects out of view. One downside is it can feel sluggish.

  

  Ease Out

  Ease Out is the opposite of an Ease In curve, where the animation starts fast and slows down as it reaches the end of its duration. It works well for moving objects into view and reinforcing important visual information.

  

  Ease In And Out

  Starts the animation slowly, accelerates in the middle, and slows at the end of its duration. For most motion, it feels smooth and responsive, but can feel unnatural or too perfect when applied to everything.

  

  Ease In Back

  Ease In Back is when the animation goes past the initial keyframe’s value and then accelerates as it reaches the end. This creates a bounce in the animation that serves as an anticipatory action, preparing the audience for and reinforcing the main action. Much like Ease In, Ease In Back can work well for smoothly transitioning objects out of view.

  

  Ease Out Back

  Is the opposite of Ease In Back. The animation starts fast, then slows and goes past the ending keyframe's value. This creates a bounce in the animation that serves as a settle that creates a smooth ending transition for the main action. Similar to Ease Out, Ease Out Back works well for moving objects into view.

  

  Ease In And Out Back

  Starts the animation slowly as it overshoots the initial keyframe’s value, then accelerates quickly before it slows and overshoots the ending keyframes value. This creates an anticipatory bounce at the start, a quick motion, with a rebounding motion before the final state.

  

  Custom easing Bezier

  Select the Custom option from the list to manually set and adjust easing values. Figma will show a graph, or Bézier curve editor, based on the preset you have previously selected.

  You can use the Bézier curve editor to adjust the curve of an existing preset, or to create an easing curve of your own.

  You can copy and paste numerical values to other interactions to replicate easing. It's not possible to save a custom easing curve for future use.

  1. A cubic Bézier curve is defined by four points. These points are represented by the square perimeter in the graph.
  2. The graph's axes represent a curve on a graph where time is applied to the x axis and the transition, such as Move In, Slide, or Smart Animate is on the y axis.
  3. There are two keyframes that indicate the start and end state of the animation. These are fixed at 0,0 and 1,1. Click the keyframe to reset the Bézier handles.
  4. A continuous curve shows the object's values over the duration of the animation. This is the easing curve.
  5. The adjustable handles allow you to change the values of the curve. If you're customizing an easing curve with no handles, click and drag the keyframe to activate the handles.
  6. You can use this field to enter numerical values.

  

  Tip! You can use these numerical values when translating the Bézier curve to CSS notation: cubic-bezier(x1, y1, x2, y2)

  Note: It's possible to extend the curve beyond the graph's dashed perimeter. You can use this to create an anticipatory bounce at the beginning, or a rebounding effect at the end of the animation. The Ease In and Out Back preset shows both of these effects in action.

  Spring animation presets

  Combine spring animations with Figma’s animated transitions.

  

  You can pick from the following presets or create your own:

  • Gentle: A gentle animation is the most neutral option of the spring curves. Great for subtle spring movement when scaling content.
  • Quick: A bit more spring great for toasts and notifications.
  • Bouncy: A quirky preset for delightful animations like a heart bounce.
  • Slow: A steady, natural way to scale up fullscreen content.
  • Custom: Set your own spring animation curves ↓

  Custom spring curves

  Customize your spring animation by editing the Stiffness, Damping, and Mass values in the Interaction details modal and by dragging the animated graph.

  

  • Stiffness: influences the number of “bounces” in the animation and can be adjusted by dragging the graph.
  • Damping: influences the level of spring in the animation and can be adjusted from the graph.
  • Mass: influences the speed of the animation and height of the bounce. You’ll need to manually adjust the value in the Mass field. Adjusting mass also changes the millisecond value for the duration setting.

  You can copy and paste numerical values to other interactions to replicate spring animation curves. It's not possible to save a custom curve for future use.

  Learn how to create interactions and adjust animations →