Figma Dialog

Preview

Figma Dialog

Figma Dialog Component

The Dialog component is a floating window over the main content that provides crucial information or guides users through your website or application interface.

You can use dialogs by pinning them to one of the corners of the screen for events that require users to take action. Compared to Modals or Toasts, its purpose is to grab user attention on specific tasks or messages without interrupting the flow.

Dialog UI Best Practices

Catch focus within the Dialog and return it properly when closed.
Provide obvious ways to close, including using the escape key and overlay click.
Use Dialog Properties to adjust size and positioning for different screen sizes.

Dialog Anatomy

Set	Variants	Properties
Dialog	8	Type Default, InvertedSize Medium, LargeExpanded True, False

Dialog is one set of eight variants — Default and Inverted types, Medium and Large sizes, each Expanded or collapsed — a floating corner-pinned window that keeps users in flow rather than blocking it like a modal.

Dialog AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build a dialog component in Figma as one set of eight variants: Default on a white surface and Inverted on a dark surface, Medium and Large widths, each with an Expanded boolean. Collapsed: a rounded floating card with a leading icon, a bold title, a one-line message and a close icon in the corner. Expanded: the same card grown to show a description paragraph and a footer row with a secondary and a primary button, right-aligned. Give the card a soft elevated shadow so it reads as floating over page content, and add a Position property with Top Right, Bottom Right, Bottom Left and Top Left offsets for pinning to a screen corner. Build the buttons and close icon as nested instances with hover states, and wire the close icon and the Escape key in a prototype to dismiss the dialog. Show a demo frame with the Large Expanded variant pinned bottom-right over a dashboard to document the focus and dismissal behaviour.

Source