Skip to main content
Question

Resize component when I change layout grid size


Cristian_Banu

Hi everyone,
I am trying to do something, not sure it’s possiblw with Figma, but it can’t hurt to ask.

Let’s say I have a website with a certain grid size, say 70px column/30px gap, 12 columns. I alingn and size all the components to the grid. If I change the grid size for example to 60px column, 20px gap, is there a way to have all the components resize to the new grid automatically, without me touching them?

Thank you kindly,
Chris

5 replies

ksn
Figmate
  • Community Support
  • 1611 replies
  • March 11, 2024

Hey @Cristian_Banu – are you using auto-layout? I think that this may be the solution for you.

When you say grid in this scenario, the grid you’ve created is in a frame, correct?

If so, set auto layout to the frame. Then, select the components within the frame, and select “fill” in the right hand panel. On the frame level you can then make adjustments to the properties on the frame to suit your design.

I’m making some assumptions, so I may be incorrect in my response 😅


Cristian_Banu
  • Author
  • Active Member
  • 109 replies
  • March 12, 2024

Hi @ksn
I’ll make a video tomorrow to show what I mean 🙂
Thanks,
Chris


Cristian_Banu
  • Author
  • Active Member
  • 109 replies
  • March 28, 2024

Hi @ksn
I made a quick video. Basically, if you see how the components behave in the second example, that’s what I would like them to behave in the first example if I change the size of the grid (width and gutter). Basically, I wanna be able to simply change the grid size I applied to my frame, and everything that was aligned to the grid to change its position and dimensions based on the new grid 🙂

Thanks,
Chris


ksn
Figmate
  • Community Support
  • 1611 replies
  • April 4, 2024

Thanks @Cristian_Banu! This should work, as long as your constraints are set up correctly.

I checked in with a member of support, and they recommended this page: https://help.figma.com/hc/en-us/articles/360039957934-Combine-Layout-Grids-and-Constraints

Does this seem to help? This one is a little out on my particular knowledge set, but I’ll do my best to help further 😅


Cristian_Banu
  • Author
  • Active Member
  • 109 replies
  • April 8, 2024

hi @ksn
Doesn’t really help 🙂 I did make some huge stuff and worked around it, basically I created my own grid as a component, repeated it in a autolayout component and attached the components I want resized, but it’s a shitload of work 🙂 It could have been a very simple task using Figma’s grid feature.


Reply


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