When you want to add an element to your design that isn’t a traditional frame, you can use an overlay. Overlays are semi-transparent layers that sit on top of other elements in your design, and can be used to create popups, modals, and more. You can add as many overlays as you want to a design, and they can be rearranged in the Layers panel.
To add an overlay:
- In the Layers panel, hover over the layer you want to add the overlay to
- Click the Add button (+) that appears next to the layer, and then select Overlay from the menu
- An overlay will be added on top of the selected layer
To style text in an overlay:
Since overlays are semi-transparent, you’ll want to make sure that the text is legible by using a dark color for the text. You can also use the Text tool to add a text box to an overlay.
To open an overlay in Figma:
-
In the Layers panel, hover over the layer you want to open the overlay for.
PRO TIP: If you are not familiar with Figma, we recommend that you do not attempt to open an overlay. Overlays can be tricky to open, and if you are not careful, you may end up opening the wrong one. -
Click on the three dots that appear next to the layer name, and select Open from the menu.
Your turn!
-
Open Figma and create a new file or open an existing one.
-
Add a couple of different types of frames to your design.
-
Add an overlay on top of one of the frames.
To open an overlay in Figma: In the Layers panel, hover over the layer you want to open the overlay for. Click on the three dots that appear next to
