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. 

Presentation View

You can present your designs with, or without, hotspots enabled. With the DESIGN tab selected, press the Play button in the upper right corner of the toolbar. Your file will open in a separate tab. 

When you make changes to connections in prototype mode you don’t need to refresh the presentation view. When you go back to presentation mode it will update automatically—and we won't keep opening additional tabs. 

Click Share Prototype to send a link without needing to share the design file itself. 

Anyone with view permissions to the file can leave Comments while in presentation view. 

If someone happens to resolve comments too quickly, you can toggle on Show Resolved Comments in the View Settings.

If your design does not have explicit connections, the prototype will automatically include all top-level frames. You can navigate between them by using the arrow keys on your keyboard. 

If your design does have connections, you can navigate through presentation view the same way. In addition, if you have added hotspots to objects inside frames, when you click on the frames you will see a light blue visual indicator pointing you to the location of the hotspot. You can toggle this feature on/off in the View Settings if you prefer.

Observation mode
Avatars for all users simultaneously viewing the presentation will appear in the toolbar. Select an avatar to see what others are seeing. This is a great way to let other team members lead the presentation.

Scale Modes

If you have a frames in your prototype that are larger/longer than the viewport in presentation view, you can toggle the Scale Mode in the upper right corner of presentation view to Display at 100%. This will allow you to scroll up and down. 

  1. Create all your connections in Prototype Mode
  2. Click the Play icon
  3. In Presentation view, click the dropdown icon next to Fill and select Display at 100%

We don't offer animations in prototypes at this time, but it's something we may consider down the road. 

For 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.

Check out our Prototyping video to see this feature in action!

Did this answer your question?