Newbie, only a week in. Be gentle. Nomenclature may be off.
Trying to create 1/3-2/3 column layout. Can not figure out how to both make text responsive properly constrained within the grid, and keep sections from bleeding into the following section. The first seems to require constraints (available with frames, but not with autolayout). Second seems to require the “hug” feature (available with autolayout, but not frames). I’ve spent hours nesting every combo I can think of, to no avail. Am I missing something? Am I expecting too much? See attached screenshot for illustration.
The 3rd option is certainly ‘close enough’, but for learning purposes, I’d like to understand how to do this.
This is a current limitation of Figma, also discussed here: either Auto Layout with an even layout, or constraints but without Auto Layout. I’m assuming in the third example you used the “Scale” constraint but would be curious to see the file as well.
Thanks! I had actually seen the second link you provided–that’s how I got as far as I did. I was so happy that the solution was simpler than I thought… then added text to the top left container, and fell down a three hour rabbit hole chasing my tail to solve that issue.
Yes, the third example used scale. Ironically it’s what I started with, until I realized it meant margins also scaled.
Didn’t share file because 1-new and hadn’t figured out how to to that yet, and more importantly 2-file had a lot of the client’s half-finished website design that I figured shouldn’t be out in the world. Copied into new file here, in case there is any solution that isn’t “no solution”:
Which I may use for another thread: how do you align images top and/or left, and have them scale while maintaining that alignment? (I suspect this is also a limitation).
I would say its just a matter of how you set up auto-layout nesting. From what I can tell and what I have done a thousand times is that you want to
Set up an auto layout that has the image and the column
Apply fixed width (or fill container) to the text, image should probably just be cut to the desired size
Make sure they are both set to horizontal direction
Apply desired spacing between
group and convert to frame, make this an auto-layout, horizontal
Add your desired space between these two elements
Alternatively, you can take the two different sizes and group a column of multiple of one size but you then would want to have each column in another auto-layout.
I don’t think you understand the problem. Or I have misunderstood something or missed an assumption in your solution. I think Antoine had it correct, and it is a limitation of the software (a glaring one IMO).
As @Lisa_Lessenger1 described, on part of that row needs to be fixed and the other part needs to be set to filled. Therefore, you should the the 1/3 column to fixed width (your total row width divided by 3). There is no auto fill just a fraction width feature in Auto-Layout itself.
To add onto this thread and, perhaps, clarify the issue, what’s desired is essentially the ability add layout grids to an auto layout and thereby set widths based on the grid (E.g., an element is aligned to 1/3 of the grid and uses “Left and Right” for constraints while another is aligned to 2/3 also using “Left and Right” for constraints), but still have heights set to hug.
Currently, there is no way in Figma (that I’m aware of) to create a responsive layout for something like a layout that has an image filling 1/3 of the grid width and a body of text filling 2/3. You can have the widths auto-adjust if you make a standard frame (no auto-layout) and apply a grid, but when you resize the width of that frame, the frame will not adjust in height as the text reflows.
It would be really nice if they could add a “Fit to Grid” option for widths on Auto Layout elements. Make it so that if you align an element to a grid on an Auto Layout, you can then select “Fit to Grid” to have it hold to the grid alignment on resize.
Yes, I think this is an accurate reframing of the original question.
I burns me that a year later I am still frustrated by this, which seems to me to be a very basic need and expectation.
There is a way to do this, but it’s not very straightforward—so I agree this should be a feature.
To accomplish this, we’re going to make a component and use paired instance swapping—setting one frame to invisible while absolute positioning the other.
I’ll go through an example with a 1/3 left section grid.
Set up a 3 column grid with a gutter.
Make a component called “section”. Add auto-layout (hug, fixed) and your grid to the component
Within this component, make three frames: one called “height-sizer” with auto-layout set to fill horizontal, hug vertical; two called “column-1” and “column-2” without auto-layout.
Set both columns to absolute position and adjust them to fit your grid with L+R, scale constraints.
Inside each of these frames place instances of slot components (a blank component you can instance swap). Make sure they’re set fixed, hug.
Add the same instance swap variable to each corresponding slot.
