Introducing Overlays—taking Prototyping to the next layer

Designing for today’s interfaces is more than just static screens linked together. And because designers often need to experience these interactive flows for activities like user testing, they create prototypes to bring their designs alive. But the process of creating prototypes is often repetitive, time consuming and downright painful — especially when designers want to show content on top of other content to mimic elements like sidebars, modals and popovers. 

Today we are happy to announce that prototyping just got a whole lot more fun in Figma! With Figma’s new Overlays feature you can now show content flexibly on top of other content, interact with it and even open multiple overlays. Read on to learn how Overlays in Figma works…

How it works

Simple Overlays

We reimagined the basic delivery of overlays. Now after you add a prototype link to connect two frames, you will see a new option in the property panel. This option will allow you to set the destination frame as an overlay. Once selected, you can customize where the overlay is placed and how it should appear.

Our relative positioning supports use cases like modals and action sheets where you want to show the overlay in relation to the device. For other other use cases like tooltips and dropdowns, you can manually position it in relation to the object from which it is being opened. 

Multiple Overlays

But we didn’t stop there. In our increasingly interactive world, there are often situations where more than 2 overlays need to work together - think multi-step purchase flows and confirmation dialogues. We’re excited that now in Figma, designers can add multiple overlays on top of one another. And, best of all, setting up multiple overlays is just as simple as setting up a single overlay.

Interactions on Overlays

Because prototypes are interactive experiences, we thought carefully about how to allow interactions on overlays. After connecting two frames, you have the choice to swap the frames. Swapping will replace the entire frame with the new one, but not dismiss an overlay. This allows you to add interactions, like hovering a button, to overlays, too!

Other nitty gritty details

You can now select Back or Close directly on the canvas while dragging the overlay connection instead of selecting these options in the Layers panel.
Keyboard shortcut: While dragging and hovering over your destination frame, you can hold the option key to quickly select the swap connection.
Pro Tip: Leverage swap links for a more flexible ‘Back’ action that will skip over swap links to show the last frame from which you used navigate instead of defaulting to the preceding frame.

Check out this video to watch a step by step walk through and reference our documentation here.

In conclusion

We hope Overlays will streamline all of your use cases for showing content flexibly on top of other content. It also compliments all the other powerful prototyping functionality that you already can access in Figma today - interactions, transitions, device frames, fixed objects and advanced scrolling.

We want to give a shout out to everyone who helped us build this feature over the past few months - your feedback was incredibly valuable and helped shape today’s release. Take it for a spin and head over to our Spectrum community to leave feedback. We’re always happy to hear from you!