Creating a Dialog pop-up

Similar to a Popover, a Dialog is a floating element on your screen but slightly different as it will darken all content behind it and it will always be centered horizontally and vertically in the entire browser window.

In Figma, you will need to have this Dialog be a part of the component that you want to use to launch it. This doesn’t need to be in an Auto layout or even in the exact correct position but simply just be inside the component you’re using as Dialogs are automatically placed in the center of the screen with a backdrop.

For the dialog feature, you need to specify the open property – which is a boolean that tells when the dialog should be open. You also need to specify a function to be called on close of the dialog.