Problem with "Using variants with different sizes"

[ovan]

In the frame called “Using variants with different sizes” I encounter two problems:

1. The screenshots in the explanation do not match the content:
   

   
   
   The contents of the field Change to: shows “Componen…”, but in the layer list of this example the components and instances are labeled differently (menu, menu-item, button). This is confusing.

2. In that same screenshot, you have both actions hooked up to “Change to”, but when I try to do the same, this option is not available:
   

   
   
   This might be because I’m doing the hookup to the wrong component from step 1. I could not find how to fix this example.

[ovan]

Origin of the problem found:

The explanation mentions “to the button that changes to the open menu”. I interpret this as the lower button in the frame, i.e. the one that will demonstrate the interactivity.

Instead, the explanation should make it clear that this is about adding interactivity between the variants in the purple group. In hindsight this is obvious, but one must assume the user reads this without experience.

[tank666]

On the help page, you can see and read how interactive components work:
https://help.figma.com/hc/en-us/articles/360061175334-Create-interactive-components-with-variants

[ovan]

True, and it is well explained over there.

I believe that the examples here could be improved though, as both standard buttons are presented in the same way. I’m thinking of e.g. giving the area where you need to work on a different background color than the presentation area, or repeating the step number (2) near the variants, …

[rgordon]

Agreed Ovan - Some of the responses below are a joke.

I’ve added a screenhot to indicate where exactly the interaction should be applied.