Learn how to prototype web and mobile apps

How to quickly create tabs in your interactive prototypes

In this tutorial, we will show you how to use the OnVariableChange for the creation of tabs in your interactive prototypes.

This new event trigger, introduced with the latest release, prompts events when a variable value changes. It’s a very powerful feature that can be used as an event template, and as a result, many events are now easier to make!

For instance, learning how to create tabs is something that we’ve explained in previous tutorials, but we’ve since made them easier and quicker for you to make!

You can download the below example here and try it out for yourself by following the steps below:

1. Create a new web prototype and drag a Rectangle widget onto the canvas. Re-size it, depending on how you wish your tabs to look, and copy and paste it three times. Add text within the 4 tabs (i.e. Tab 1, Tab 2, etc, as in the example).

Important: you must enter text within each tab in order for the simulation to work, since the variable value corresponds to the text in this case.

Create tabs with four rectangle widgets

2. Place the rectangles in a row and drag a Dynamic panel so that it’s lying on the bottom borders of the tabs. Create 4 sub-panels in the dynamic panel. In the Properties tab, add a border to each sub-panel.

3. Let’s go back to the Rectangles/Tabs: change their color (in the example we used green), but leave the first one white. Select the first and change its bottom border to white as well. Right-click on it and bring it forward, so that it is lying on top of the the top border of the dynamic panel and looks like a selected tab.

Change the color of the tabs in your prototype

Now it’s time to add events: we want the selected tab and its bottom border to turn white in each case. To do this, we should add an “On click” + “Change style” event to each tab, and make sure that all of them become the desired color when another tab is selected. Previously, this required a lot of events, but with the OnVariable Change, it’s now possible to simplify all the process! Let’s see how.

4. First of all, create a variable and name it “menu-selector”.

In the properties tab create a variable

5. Select the first tab and add an “On click” + “Set Value” event. Select “variables” as the component that will display the value, and – at the bottom of the events dialog – set the value as “Calculated”.  Click on “Add expression” and, in the expression editor, drag the first tab to the expression builder. Click OK twice to return to the canvas.

Create a set value event in your interactive prototype

6. Select the first tab again, and add an “On variable change” + “Change style” event by clicking on “Add Event” in the Events tab. In the tab displaying “Any variable”, select the “menu-selector”. The style should be a ‘selected tab’ style, e.g. white background and white bottom border for the tab.

7. Add a condition to the event, by clicking “Add condition” next to it in the Events tab. The expression editor will pop up, where you will build the following condition: when the value of Tab 1 equals (=) the menu-selector variable. Click OK to return to the canvas.

Create a change style event in your interactive prototype

8. Add an action, by selecting the gear icon “Do” next to the Change Style event in the Events Tab: add an “On variable change” + “Set active panel” event, to ensure that when Tab 1 is selected, the right content is displayed (in this case, sub panel 1). Make this event happen WITH the previous, by selecting the little icon between the two events in the events tab.

9. Click on the “Else” link in the Events Tab to specify what the tab should do when the condition is not met, i.e. change its style to the unselected tab one. Add another “On variable change” + “Change Style” event, this time changing the style to a green background and green borders.

Create an event for when the condition is not met

10. Now copy all these events to Tabs 2, 3 and 4, by clicking the “Copy” icon in the Events tab, and then “Paste” them to each Tab. Make sure that the active panel in the “Set Active Panel” event relates to the relevant tab each time.

Interactive prototypes: copy/paste all events

And that’s it! You can now simulate the tab navigation in your web prototype and enjoy!

Next tutorial > Simulating random content in your web wireframes