Skip to main content

Is there a way to set multiple on click events on one element, or how is it possible to achive this:

Actually i have this as default state (row 1)
When clicking “Add Preset”, second tab should be visible (row 2)
When clicking again on “Add Preset”, third tab should be visible. (row 3)
When clicking again on “Add Preset”, fourth tab should be visible. (row 4)

image

But when clicking on “Add Preset” it jumps directly to row 4.

My on click expression on “Add Preset” look like this:

image

My variables look like this:
image

I see that Figma is running though the complete expression. Therefor it works, but should run again and again each time when i click on “Add Preset”.

Some ideas?

Thank you <3

Hi @Markus_Kegel

Is there a way to set multiple on click events on one element,

Nope, it can’t be done. Every interaction type are unique per element.

But when clicking on “Add Preset” it jumps directly to row 4.

This is because the conditions in your interaction are “useless”. They check if a variable is set to true right after having set that same variable to true.
We could think that sometime the variable is false, but it’s not possible because the 1st step of this interaction is settings the 2_visibility to true which will then trigger all conditions.

There are few differentes ways of doing this (and I’m not going to describe them all) :

Reorganize + Safeguard

If you want all the logic with in a single button you’ll have to reorganize and check for position (as interaction are not aware of the component state)
Create a local number variable (let’s name it #stage) set to 1

if stage == 1
  2_visibility = true

if stage == 2
  3_visibility = true

if stage == 3
  4_visibility = true
  preset_visibility = false

stage = stage + 1

We check which stage we’re one and update the visiblity for the next stage. And only after we’ve checked them all we update the stage.

Simple interaction

I don’t know the background of you application and what you need but given what I see, I’ll just make a simple component with 4 variants inside and link the “Add Preset” button to the next variant

image

Let me know if it helped

@Haroll
Awesome!! Thanks for your answer! This works totally out for me.
For sure it is way simpler to create some variants, but i am actually learning the advanced prototyping stuff in Figma and was just interested how this could work out for me.

Terms & ConditionsCookie settings