Complex Button variant and properties

[Alek]

Hi all it’s been a while since I got to use variants and properties in Figma so I apologies for this simple question.

As per image:

On top the Button component
Down below the component stretched.
I would like to keep the angle/cut of the element 2 when I resize.
I would also like to have color properties changing for element 1 and 3
and also that the button stretches when text is longer

What’s the best approach to do this with variants and properties?
I set property for element 1 and 3 to be shown or not but how can I also add color variations just for those 2 elements?

Thanks

[tank666]

In fact, this is not difficult to do. You can see and duplicate my example file here:

Figma

You can change the color as usual—by changing it in the master component or overriding it in the button component or its instances.

[Alek]

Thanks Tank666, got it. Basically you assemble the button “css” stile with 3 elements not by cutting the main shape for the button.

Don’t know why but I remembered you could just stop anchor points from moving.

All clear thanks