How to build a responsive interaction
We will walk you through a detailed step-by-step tutorial on how to create a responsive interaction using the below features. Suppose you are designing a pop-up quiz that needs to work on both mobile and desktop devices. In the images below, both interactions perform the same function but initially had to be designed separately for mobile and desktop versions. However, with the responsive feature, this can now be achieved in a single interaction, making the process more efficient and user-friendly across different devices.
-
Begin by creating a new interaction. By default, the interaction is in mobile mode, so it's best to start designing for mobile first.
- In the new interaction, the view is initially at the edge of the screen on desktop mode. Lets make it bigger and drag the view to center. The red magnet lines will indicate that the view is perfectly centered.
- Next, let's include a Rectangle Shape element to serve as the background for the other elements. Simply drag the shape element to the top-left corner of the view and adjust its size to fill the entire view. This action will activate the stretching mode, ensuring that the background adjusts accordingly in both directions as the view size changes.
You can confirm this by checking from the placement panel, where the stretching feature will be activated.
Note: Based on our observations, it is advisable to avoid filling the entire screen when designing interactions. Instead, leave some padding around the edges for a cleaner appearance. In this example, for the rectangle shape we added 30 pixel padding.
For older interactions, when we enable the responsiveness, an additional padding will automatically be added.
4. Apply styling to the Rectangle shape using the Styles Settings menu. This includes adding rounded borders and a top-right closing button. To create the closing button, insert a button element and change the button text to '✕' or use a close icon.
|
|
|
5. Now, let's add text, button and image elements to showcase a real-life scenario. Select the image element and make sure that the constraint type is set to the stretch bottom.
  |
6. To simplify the process of aligning text and button elements in both mobile and desktop modes, it is recommended to group the elements together. This allows for easier positioning of a single grouped element rather than adjusting each one individually.
- select the text elements and buttons
- right-click to open the context menu and choose the group option
Once grouped, the elements will appear together, making it easier to manage their placement within the interaction.
|
Before Grouping elements
|
After Grouping elements
|
7. Now that we have finished designing the interaction for mobile devices, let's take a look at how the interaction appears on both mobile and desktop platforms.
|
Mobile Mode
|
Desktop Mode |
If you would like to create a different layout for the desktop version, please refer to the section on how to use breakpoints.
|
Mobile Mode
|
Desktop Mode
|
