This is pretty basic, however, I am not able to find solution, maybe you guys can help.
I am trying to create a component with rectangle, text and two icons. This element will be reused in different screen sizes so it’s width should be easily resized by keeping icons exactly the same distances from edges.
The icons stretch when I am just using constraints:
Is there any other way to create such kind of component?
Best answer by Gleb
What exactly are you trying to resize? From the picture it seems like the icon is attached not to the component but to something bigger. Are you resizing a group by any chance? Groups ignore all constraints and resize objects inside proportionally, only frames/components resize/move elements based on constraints.
What exactly are you trying to resize? From the picture it seems like the icon is attached not to the component but to something bigger. Are you resizing a group by any chance? Groups ignore all constraints and resize objects inside proportionally, only frames/components resize/move elements based on constraints.
Hey, thanks!
I was trying to resize a group. The same thing works perfectly when converted to a Figma component. Thanks for fast response!
If I am understanding what you are trying to accomplish.
You need to set the icons to fixed width and height and then copy to auto width. Then in the auto layout you set the icons to fixed and the copy to fill container. That should keep the icons square and the copy will push them to the left and right sides as you have depicted.
hold ctrl then stretch.
Simple response but this helped me in 2023. Thanks
Put Icon in a seperate frame and then put that frame into the frame you are working with. Then turn the frame with an icon in it into a component. The Icon will not shift anymore if you resize anything and you can set better constraints on that new component.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
