Web Design » Figma » What Are Overlays in Figma?

What Are Overlays in Figma?

Last updated on November 25, 2022 @ 6:10 pm

Overlays are one of the most powerful features in Figma. They allow you to quickly and easily add graphics, text, or other elements on top of your existing design. Overlays can be used for a variety of purposes, such as:

To add a new element to your design:

If you want to add a new element to your design, but don’t want to disrupt the existing layout, you can use an overlay. This is especially useful when you’re working with complex designs that have a lot of elements already in place.

To create a pop-up or modal:

Overlays are perfect for creating pop-ups and modals. This is because they allow you to keep the rest of your design in place while still providing access to the content in the overlay.

PRO TIP: Overlays are a powerful tool in Figma, but they can also be misused. Overlays can be used to create false impressions of depth or three-dimensionality, which can be misleading. They can also be used to make elements appear to be floating on top of other elements, which can be disorienting. Overlays should be used sparingly and with caution.

To highlight an element:

If you want to draw attention to a particular element in your design, you can use an overlay. This is a great way to focus the user’s attention on what’s important.

What Are Overlays in Figma?


Style text in HTML using < p >,< b > and < u > tags where applicable:

Overlays are one of the most powerful features in Figma. Overlays can be used for a variety of purposes, such as:

To add a new element to your design:

If you want to add a new element to your design, but don’t want to disrupt the existing layout, you can use an overlay.

To create a pop-up or modal:

Overlays are perfect for creating pop-ups and modals.

To highlight an element:

If you want to draw attention to a particular element in your design, you can use an overlay.

Morgan Bash

Morgan Bash

Technology enthusiast and Co-Founder of Women Coders SF.