Web Design » Figma » Whats an Overlay Figma?

Whats an Overlay Figma?

Last updated on September 29, 2022 @ 1:24 am

An overlay is a Figma component that sits on top of other interface elements, such as menus, dialogs, and popovers. It allows you to add extra content to your design without affecting the layout of the rest of your interface. Overlays are often used to display extra information, or to prompt the user for input.

There are two types of overlays in Figma:

1. Modal overlays

Modal overlays are commonly used to display extra information, or to prompt the user for input. They are typically displayed in the center of the screen, and can be dismissed by clicking outside of the overlay.

PRO TIP: If you are not familiar with Figma, an Overlay is a potential design element that can be added to your composition. It allows you to easily add extra elements to your design without having to create a new frame or layer. However, if you are not careful, Overlays can quickly become overloaded with too many elements and can start to look cluttered. Use Overlays sparingly and only when absolutely necessary.

2. Non-modal overlays

Non-modal overlays are used to display additional content, such as menus and tooltips. They are typically displayed near the element that they are associated with, and can be dismissed by clicking outside of the overlay or by moving the mouse away from the trigger element.

A modal overlay is a type of Figma component that is commonly used to display extra information or to prompt the user for input.

A non-modal overlay is another type of Figma component that is used to display additional content, such as menus and tooltips. They are typically displayed near the element that they are associated with and can be dismissed by clicking outside of the overlay or by moving the mouse away from the trigger element.

Drew Clemente

Drew Clemente

Devops & Sysadmin engineer. I basically build infrastructure online.