Skip to main content

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!

Capture

@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.

Reply


Terms & ConditionsCookie settings