Figma modal components

A modal stops everything. The page dims, the task freezes, and the user deals with your dialog before anything else happens. That's a lot of power for one component, which is why modals are simultaneously the most useful and most abused pattern in product design.

The modal components above cover the layouts; using them at the right moments is the other half.

When a modal is the right interruption

Modals earn their interruption in two cases: a decision that can't wait (usually confirming something destructive) and a short task that benefits from staying in context, like renaming a file or inviting a teammate.

Both share a property: the user finishes in seconds and returns to what they were doing with their context intact. For everything else, Nielsen Norman Group's dialog research is the caution worth reading: every modal has an interruption cost, and long or optional tasks usually deserve a page or a drawer instead.

A useful smell test: if the modal needs a scroll bar, it probably wanted to be a page.

Dozens of layouts, one system

The set covers an unreasonable amount of ground: simple confirmations in standard, warning, and destructive versions, log in and sign up dialogs, payment details and payment method modals, file upload, verification and 2FA code entry, team invites, user and appearance settings, image cropping, calendar events, share dialogs, and more.

Every layout exists in a 1,440px desktop context and a 375px mobile version, so you're never guessing how a five-field dialog collapses onto a phone, and the whole set ships in light and dark mode like the rest of the kit. The destructive versions matter most: a red primary action and a distinct icon treatment make "Delete project" feel different from "Save changes" before anyone reads a word.

Starting from a designed layout also means the edge cases, like where the close X sits or how a long title wraps, were decided once for the whole system rather than per dialog.

Built from modular headers and action rows

Under the layouts sit two sub-components doing the structural work. The modal header comes in left-aligned, center-aligned, and horizontal versions, and the actions row handles the button arrangements: horizontal, vertical, full-width fills, an optional leading checkbox ("Don't ask me again"), and destructive variants of each, with separate desktop and mobile alignments. Consistent action rows are what keep your confirm buttons in the same place across forty different dialogs, which is exactly the kind of consistency users only notice when it's missing.

Prototyping overlays: scrims, blur, and closing

In Figma, modals are overlays. The open-overlay action centers the dialog, adds a scrim behind it, and "close when clicking outside" gives you realistic dismissal without extra wiring; Figma's prototyping guide covers the settings.

For the popular frosted-glass look, give the scrim a background blur fill and the page behind melts appropriately.

In production the same dialog needs a focus trap and Escape-to-close, per the W3C dialog pattern, which is worth noting in handoff.

Or skip the handoff notes entirely: Untitled UI React modals are open source, built with Tailwind CSS and React Aria, with focus trapping, Escape handling, and scroll locking already done.