Central to Figma is the idea of easy collaboration. Once your designs are complete you can create interactive flows in Prototype Mode and share your prototypes easily in Presentation View. Used together, these features are great for design critiques and presenting to clients. 

Prototype Mode

Once you have your designs arranged in Frames on your canvas you can construct a prototype by linking frames to frames or by creating hotspots between objects and other frames. 

First, select the PROTOTYPE tab at the top of the Properties Panel. Select the first frame you would like to be used in your prototype. Any top level frame, or object within the frame, can be selected to reveal a circular transition bubble. 

Click and drag the node to create connections. These connections turn your frames into a prototype. 

Once you create your first connection a blue box with an arrow will appear next to the first frame of your prototype. You can click and drag this box to wherever you would like your prototype to begin.

Connections can be made between top-level frames, or between child elements in one frame and another top-level frame. It's not possible to create hotspots between multiple objects inside frames at this time. 

Another useful feature is the ability to change the prototype background color without needing to change the background color of the design file. 

For more advanced prototyping, we do have an integration with FramerJS. You can read about that here and here. You can also check out this video on importing your Figma files into Framer.

Transitions

Prototyping Transitions make it possible to add common transitional animations as you move between Frames.

Once you’ve created a prototyping connection, you’ll see Transitions available under the Prototyping tab in the Properties Panel.

From here you’ll be able to select one of four simple animations for your transition between frames:

  • Instant: On tap, the Destination Frame will immediately appear. 
  • Dissolve: The Destination Frame will fade in at a pace which you determine. 
  • Slide: The Slide effect applies a slide on the Destination Frame. You can change the direction from which the Frame slides in. This is convenient when working with different types of layouts.
  • Push: Finally, the Push effect “pushes” the old frame out of the way to make the Destination Frame visible. Just as with the Slide Behavior, it is possible to customize the direction.

With the Dissolve Effect, along with the Slide and Push effects, you can specify both the Duration as well as the Easing behavior. 

Duration: The default duration is 300 milliseconds, but this can be adjusted using the Duration input box. The minimum duration is 1 millisecond and the maximum is 10 seconds.

Easing:

  • Ease In sets the transition to be slow at the beginning, but faster towards the end. 
  • Ease Out sets the transition to be fast at the beginning, but slower at the end. 
  • Ease-In-and-Out just means that the transition will be fast at both the start and the finish.

Typically, when layers or objects are moving out, the Ease In option will be best, and when those layers or objects are moving in, the Ease Out option will work best.

Check out this video to see Prototyping Transitions in action!


Did this answer your question?