Interactions tutorial

On this page, we’ll explore interactions and state by building a simple FAQ website. You should already have a basic understanding of how to use Plasmic Studio. You can follow along in this project or start your own fresh project.

Connecting state to UI

Connecting state to UI is the first step to adding interactivity. Let’s start our FAQ website by adding two questions and answers. Try to build a page similar to this:

interactions 01 initial

The page is functional but not interactive yet. We want the answer text to only show when the switch is on. We can achieve this by connecting our answer texts’ visibility to our switches’ state. Select the first answer text and, on the right panel, find the “Visibility” section. Click the three dots and click “Use dynamic value”.

interactions 02 visibility dynamic value

A data picker with the list of available state variables should pop up. Select switch1 → isChecked (you might need to rename your switch “Switch 1” first) and click “Save”. Here, switch1 refers to your switch’s name, and isChecked is the name of the switch’s state variable.

interactions 03 data picker

Do the same for the other answer text. You should no longer see the answers on the canvas because the switches are off. Preview your project and fiddle around with the switches!

Adding interactions to update state

Our users are complaining about needing to click each individual switch now. Let’s add a button that turns on all the switches together. Select the button and, on the right panel, find the “Interactions” section. Add a new onClick interaction.

interactions 05 button on click

A dialog for customizing your interaction should pop up. Fill out the form like so:

  • Action: Update state variable
  • State variable: switch1 → isChecked
  • Operation: New value
  • Value: true (this means the switch is on, false means the switch is off)

Then, click “Add new action” and do the same for the second switch.

interactions 06 button on click interaction

Close the dialog, and test out your new feature!

Adding state variables

In the above scenarios, we’ve been using state variables from built-in components. Sometimes you can’t rely on built-in components. What if we wanted to remove the switches and allow users to click anywhere in the question box?

To solve this, we’ll need to add state variables to our page. Click on any element and, on the right panel, under your page name, click the expand button to show your page settings. Find the “State variables” section and expand it. You should see your two switch states here. Add two new state variables. You choose the names, but make sure to set the type to “Boolean” (a data type that can either be true or false).

interactions 08 state variables

We can’t delete the switches yet because they’re still being referenced by our answer texts (go ahead and try). Let’s select our answer texts and update their visibility now.

Since the answer texts are hidden, it’s impossible to select them from the canvas. One way is to select the switch first and toggle the “Is checked” variant to reveal the answer text. A quicker way is to use the left panel’s outline tab.

Either way, select each answer text, find the “Visibility” section, and update the dynamic value to your newly created state variables.

interactions 09 visibility update

Now we need to update the state variables. Select each stack and add a new onClick interaction just like we did earlier for the button. Choose the corresponding state variable and change the operation to “Toggle variable” (this toggles a boolean variable back-and-forth between true and false).

interactions 10 stack on click

Finally, let’s update the switch all button. Select the button, find the “Interactions” section, and click the existing onClick interaction which should show “2 actions”. Edit each action, replacing the switch variables with your new state variables.

interactions 11 button on click update

Since the switch variables are no longer being used, we can finally delete the switches.

Extra credit: Select each stack, on the right panel, find “Effects” and set “Cursor” to something that feels clickable.

Here’s the final FAQ website!

Next steps

You’ve learned the basics of interactions!

Was this page helpful?

Join 3000+ Plasmic users on Slack