Skip to main content

I have a button as shown below, it contains an icon on the left hand side configured as a nested component. The size of the icon in the button component below is 20x20px. The size of the icon itself (as an individual component) is 24x24px.


IMG_8695


My icons are made up of a bunch of strokes, and all icons as their individual component have their stroke width at 1.5px, in the button component it is 1.25px (as scaling from 24x24px to 20x20px scales 1.5 to 1.25).


When I change the nested component instance to another icon, the new icon should remain at 1.25px, however the new icon is at 1.5px. I’ve tried changing all of my icon’s constraints to scale but that didn’t seem to do anything.


TLDR: I want my nested components to resize but also scale accordingly as I change the nested component instance. Right now it’s only resizing them.


Been stuck on this for quite some time, and I’m not sure if this is a bug or if I’m doing anything wrong. Would love some help.

Make sure that the constraints of the lines are set to Scale, not the component.

image

Tried just that, didn’t seem to change anything though.

Hi @Tony_Bao, Thanks for reaching out about this.


At present, if you add Auto layout for every state in your set and applying the appropriate constraints, you should be able to swap between them and observe the correct resizing.


Would you be able to see if using auto layout can resolve the issue? You can check the instruction here: Explore auto layout properties


If the above is not resolve the nested instance resizing issue, I recommend contacting our support team for further investigation: https://help.figma.com/hc/en-us/requests/new

When reaching out to our support team, kindly provide the following details for a thorough investigation:



  • Use the email associated with your Figma account.

  • Share direct links to the file and any associated library files, and grant “can edit” permissions to support-share@figma.com (this will not affect your billing).

  • Specify the frame that is experiencing the problem. (You can share a particular frame by right-clicking on it and selecting “Copy link to selection”.)


If any other members of our community have additional insights or recommendations, please feel free to contribute!


Thanks,

Hey @Junko3 I’m having a similar issue, but in my case the icon size is controlled by a component property of the icon itself. Let me try to explain.


*I have a button component with a nested icon component.

*Both component have sm, md and lg variants, and they should match (button-sm should have an icon-sm, button-md an icon-md and so on).

*On my component set for the button, if I set the size property of an icon to sm, it will set all icons on all variants to sm, even if I don’t expose the properties for the nested component.

*As a result, if I take a button-md and change its size property to sm, the icon’s size property remains as md, and I have to change it manually.


Am I missing something? Is there a way to set different values for the nested icon’s size property on each button variant and make it non-editable? I’m happy to share a file to demonstrate the issue, if needed.

Hi @Jader_Rubini, Thank you for reaching out and sharing the details with us. I appreciate you taking the time to explain the situation.


While I’d love to help out more, it’s challenging for us to investigate this issue without examining the actual file.

Could you please reach out to our support team directly for further assistance? They’ll be able to take a closer look!



Additionally, if you could provide a recording that demonstrates the issue, that would be incredibly helpful.


Thanks again for your cooperation!

Reply


Terms & ConditionsCookie settings