Harsha Vardhan N
It is important to learn how to make overlays in Figma as it allows you to create interactive elements like pop-ups, modals, and dropdowns. In this guide, we will present a simple demonstration to help make an overlay using prototyping to get you covered.
Make an Overlay in Figma
- Open Figma and sign in with your credentials. Next, click on the design file you’re working on from Recently viewed to open it.
- After the design is loaded, create a screen/frame to which you want add overlay to.
- Next, create a frame to use as an overlay. We have created a sample options menu for demonstration.
- Now, click on Prototype in the Properties panel, select the starting frame, and connect it to an ending frame.
- Doing so creates a connection. Now, build an interaction where Trigger is set to On click and Action is set to Open overlay.
- Now, you will find that the options change according to the overlay. Set the Postion to Manual and place the overlay frame where you want to appear.
- In the end, select the checkboxes and set Animation to Instant. However, if they don’t fit your design requirements, leave them unchecked.
- Once you’ve followed all the steps above, the overlay will be successfully created. To see it in action, click on the Present option in the Properties panel.
If you do it right, you would have a result similar to ours:
Wrapping Up
Congratulations on learning how to make an overlay in Figma!
We have presented a simple demonstration to help you understand how to make an overlay. The above steps act as a basis, and you need to consider them as a reference and experiment with the Trigger, Action, and Animations to create the best overlays.
Related Reading
How To Make a Drop Down Menu in Figma
How To Use Components in Figma
How To Create a Frame in Figma
How To Edit a Component in Figma
