Figma Support Forum

Bug when trying to set mixed triggers with mixed destinations on the same component instance

I am experiencing a bug when trying to create a prototype using an interactive component to show the behavior of a web input form. The form has the following features:

Structure

  • the component contains the following 3 states/instances
    Default
    Focused-CursorTrue
    State=Focused-CursorFalse

Behavior

  1. when the user clicks the form field, the label “Email” shrinks and moves/tucks into the upper-left corner of the form field
  2. an input cursor appears where the label “Email” was before tucking into the upper-left corner
  3. the input cursor blinks every 300ms
  4. pressing the escape key on a keyboard or clicking the component when it’s in either its Focused-CursorTrue or Focused-CursorFalse state will revert the component to the Default state

In order to achieve the above behavior, I try to set the following interactions in the Prototype panel:
a. Default: “On click” → “Change to” Focused-CursorTrue
b. Focused-CursorTrue:

  • “Key/gamepad” “Esc” (i.e., when pressing “Esc” on a keyboard) → “Change to” Default
  • “On click” → also “Change to” Default

c. Focused-CursorFalse:

  • “Key/gamepad” “Esc” (i.e., when pressing “Esc” on a keyboard) → “Change to” Default
  • “On click” → also “Change to” Default

a., b. and c. above so far are to achieve steps 1., 2. and 4. from the Behavior section described above.
In order to create the blinking cursor effect from step 3. in the Behavior section above:

d.

  • Focused-CursorTrue: “After delay” → “Change to” Focused-CursorFalse
  • Focused-CursorFalse: “After delay” → “Change to” Focused-CursorTrue
    So at step d. I set a delay of 300ms to make the switch between the form field with a cursor inside and the one without the cursor, to achieve the blinking effect.

The bug seems to be that the “Interactions” section of the Prototype tab won’t let me select different destinations on the same instance.
In this case, e.g.: switch from “CursorTrue” or from “CursorFalse,” whichever state/instance is displayed, to “Default” instance when pressing “Key (Esc)” or on “Click” (this means 2 different triggers, but same destination “Default” so far), but switch from “CursorTrue” to “CursorFalse” state/instance and viceversa (depending on whichever state/instance is displayed), “After a delay” set at 300ms (which means 3 different triggers, but also 2 different destinations, hence “mixed triggers with mixed destinations” in the topic title).
What the UI does instead is, it changes all destinations to whichever I last select, regardless of the fact that I am selecting the destination for only one interaction item, making sure I’m not selecting for several at the same time (as you can do if you so intend to).

:bulb:As of Sep. 27, 2021, the bug does not occur every time and applying the above settings sometimes works flawlessly.

:computer: Environment details:
Machine: MBP with Intel chip, 2019
OS: macOS Big Sur 11.6
Figma version: desktop app (latest version as of Sep. 27, 2021, non-beta), Interactive Components beta feature enabled