Skip to main content
Question

Embedded preferred variant value inside a component variant(?)

  • October 5, 2023
  • 1 reply
  • 273 views

Daniel_Clarke

Hello Figma community! I tried valiantly to see if there was an answer to this question, but if there is one I’ve missed, I apologise!

I’m currently attempting to build out a design system for a team of product designers I’m working with and I’ve run into a little snag.

In the attached screenshot, you can see I have multiple size variants of a button. Nano, micro, default, kiosk and shakeMachine. I have successfully created embedded icons with instance swap properties, however I now need to create variants of the icons at different sizes to account for kiosk and beverage machines. I created a variant of the “Check” Icon, at 24px for the default size, and at 36px for the kiosk size. However, it appears there is no way to set a default variant for a variant! Is there any way this can be set? Would I need to separate out my buttons to variants based on size?

I hope this makes sense, any advice would be tremendously appreciated.

Cheers!

This topic has been closed for replies.

1 reply

Nate_G
  • Power Member
  • 180 replies
  • October 5, 2023

@Daniel_Clarke There are several ways you can go about this.

An approach I’ve used with different icon+button sizes:

I set all the icon art constraints to scale. This will make it so that as I scale up an icon instance it will scale accordingly.

If I want to make my icon’s stroke thickness scale up or down I could do the following:

  • Outline the strokes
  • Or set the icon stroke thickness for each icon within my button variants (sm, md, large).

→ Here is an example file on how you could set up scaling & swappabled icons along with using color modes to change the button colors.


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