In this guide, we will show you how to build a dialog.

Interactive prototype - click to interact:





Build the basic structure



As a reference, this will be our final structure:





First let’s create the basic elements.

Lightbox

We need a container Lightbox .

• Set the background color to a transparent black
• Set the layout to center, width and height to stretch.
• Also we set it to float because we want it to be above all the other elements on the screen.
• (Deactivate clip content)



Dialog

Also we need another container Dialog which needs to be placed inside the Lightbox container. Apply styling as you like. This should now look something like this:



Let's move on adding some more elements to the dialog itself.

We add another container Header inside the Dialog . We set the width to stretch and the height to 50px.

In there we put a Headline text element which we set the width to stretch and we add an Icon for closing the dialog later on.

Apply styling as needed.



Finally, we add a Content container to the dialog. Width and height should be set to stretch.

You can add some elements to the content if you like to. If you decide to do so, you can change the height of the Dialog element to shrink so it adapts to the content.







Creating the widgets

We start by making a widget out of the Icon. This is needed, because we want to have an interaction on this element later on. You can add states if you like to.

Next we create a widget out of the Lightbox .

• Set the Content to individual, we do this to have the flexibility to put different content inside
• Add a custom state Collapsed where we set the visibility to collapsed





Make it interactive

To be able to trigger the Dialog we add another element first. Just create a rectangle Button with a text element inside.

• Add a left click interaction to it
• Change the linked cell to the Lightbox
• Choose change state and select the Normal state

Since we need a similar interaction for closing the dialog, copy the interaction you just created and paste it to the Icon button. The only thing we need to change is the state, selected Collapsed instead.

Now it's time to test your interaction. If everything works accordingly, we now take care of the animations.

Animations

Basically there are 2 approaches for this. We can animate the states ourselves, but for this we need to set all the required properties. For this reason we choose the second option, using effects.

One advantage of using effects is that we can combine different animations. For example, for the lightbox we only want a fade in, but for the dialog we use a slide in effect from the bottom.

Lightbox fade in

• Select the Button again.
• Add another action
• Choose Effect and select Fade in





Dialog slide in

Since the second animations should be applied to another element we:

• Add another group
• Link the Dialog
• Choose Effect and select Slide in up





Now we should have working animations when clicking on the Button . We need similar interactions for the Icon Button.



Lightbox fade out

• Select the Icon button
• For the already existing action, change from with previous to after previous
• Add another action
• Choose Effect as the action and select Fade out
• Move this action above the change state action





Dialog slide out

• Add another group
• Link the Dialog
• Choose Effect and select Slide out down