Skip to main content

Hi guys 🙂

I was wondering if there is a solution to my icon problem. We’re currently establishing a design system for a project, and we’re using the atomic design method (component in component). So we have these special icons that have a color circle and an icon inside. The eye icon is a component itself and I want to create a new icon (component) with the circle. I’ve tried to put in the fill in the original icon and fix the radius, but currently, it’s made out of an original eye icon and a circle. The problem is both of the solutions don’t work if I want to resize the icon (scale works, but we want to change the size in the frame section). The circle is resizing okay, but the eye icon stays the same size. Do you have any idea how to fix this? Creating size variants or changing size by scale is working, but it’s not the solution we’re searching for. We want it to properly change size by resizing the component.

Any help would be much appreciated.

Thank you!

Screenshot 2023-12-07 at 11.13.52

Hello @Maja_Slanc



(scale works, but we want to change the size in the frame section)



I’m not sure to understand which frame you are referring to here, are we talking about the one named Yellow Eye - filled or Eye ?


One things is: you cannot change the value of fixed height/width in a component’s child. So if you’re trying to change frame Eye’s height and width through Yellow Eye - filled component it’s not possible.


What can be done is :



  • On Yellow Eye - filled apply scale constraint to Eye on its height and width (same for Icon). So when you resize it everythings with scale with it (as shown below)

    image

  • You can wrap Eye in an auto-layout. Then set Eye width and height as fill.

    on Yellow Eye - filled set up padding and border-radius so its always round. Then when you resize Yellow Eye - filled your Icon will be the size of Yellow Eye - filled minus twice its padding.


Tip : since you use component you don’t have to create shape in order to have a circle in the background. You can fill the main frame with a color and change its border radius so it’s a circle


let me know if it helped

We’ve figure it out…the original icon has to be set scale in the constraints section…and it works perfectly 👍🏼

Screenshot 2023-12-07 at 14.25.58

Thank you very much for your help @Haroll ! The scale was the right solution 🙌

Also thank you for the tip about the circle…will definitely try this 😀

I was missing this option… Don’t know why… Thank you bro

Reply


Terms & ConditionsCookie settings