Skip to main content
Solved

How to setup Button component with varying icon sizes?

  • February 17, 2022
  • 6 replies
  • 6168 views
dennsi
  • dennsi
  • Active Member
  • 256 replies

Hey Figma & friends! 👋

I need your help because I’ve run out of ideas when building Button components.
For a project I have to figure out how to effectively integrate nested icon components with different sizes.

I already built quite complex Button variants containing options for type (primary, secondary, …), color, size (large, medium, small), icon (left, none, right) and state (normal, hover, active, disabled etc.). But I could not solve different icon sizes properly.

See this screenshot for more explanation:

button-problem

Looking forward to any new ideas!

Cheers ☺️

Best answer by tank666

It’s possible. Could you share a link to the file?

You can also use the forum search where icon resizing is discussed and where you can find sample files.

Here is an example file with variants:

Figma – 17 Jun 21
View original
This topic has been closed for replies.

6 replies

tank666
  • tank666
  • 4873 replies
  • February 17, 2022

Add an Auto Layout container for the icon instance with “Hug content” settings, and set the icon instance to “Fixed width” and “Fixed height”.

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
dennsi
  • dennsi
  • Author
  • Active Member
  • 256 replies
  • February 17, 2022

I’ve already tried that but unfortunately, that doesn’t work either.
The icon still keeps the original components size values.
It seems the width and height cannot be changed as an override.

tank666
  • tank666
  • 4873 replies
  • Answer
  • February 17, 2022

It’s possible. Could you share a link to the file?

You can also use the forum search where icon resizing is discussed and where you can find sample files.

Here is an example file with variants:

Figma – 17 Jun 21
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
dennsi
Celine_
2 people like this
  • dennsi
    dennsi
  • Celine_
    Celine_
dennsi
  • dennsi
  • Author
  • Active Member
  • 256 replies
  • February 17, 2022

Ohhhhhh! 🤯 The icon component itself must be set as an auto-layout container!
I only tried it with a surrounding auto-layout frame inside the button where I placed icon components inside.

Now it works – thank you very much! 🎉

For anyone interested and wondering, here is the link to my example file:
https://www.figma.com/community/file/1076162448890469900/Button-component-with-nested-icon-in-varying-sizes

tank666
  • tank666
  • 4873 replies
  • February 17, 2022
Figma – 9 Feb 22
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
Michael_Hametner

I’ve tried this today and it did not work for me.
But I think I also found out why.

In my situation I have Icons with different with I want to swap.
This works fine (regardless if the icon itself has autolayout or not) until you nest this icon into another master component.

It also seems to make a difference wether the icon is a vector or a union.

If its a vector your method worked perfectly.
With the icon being a vector I had to use the autolayout frame at the icon component already - otherwise it would not work.

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