Skip to main content
Question

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:

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

This topic has been closed for comments

3 replies

tank666
  • tank666
  • 4863 replies
  • July 2, 2022

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

Figma – 2 Jul 22

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

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
Marlon
1 person likes this
  • Marlon
    Marlon
Alek
  • Alek
  • Author
  • 1 reply
  • July 3, 2022

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

A
  • Anonymous
  • 0 replies
  • August 2, 2022

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings