Layout Grids Solution

[00:00:00]
>> So our mission here was to implement two grids so this was two-column grid just because it's small, which also if you had a listing of images or something along those lines you could theoretically use a grid like that as well you could also directly have a 12 column grid.

[00:00:16]
And they just span more columns as well either one is fine this just happens to be relatively small canvas so that felt appropriate if you wanted to go rogue and do 12 columns, more power to you. You can go ahead and like I said before, add in we don't want the default grid we want this case it is going to be two columns, with a 36-pixel margin and 16-pixel gutters.

[00:00:47]
That's not a real system. And then here we wanted to have one column in both directions. And we can talk about, why we might want to do that? But you might have noticed why you might want to do it upon implementing it too. So, we can go ahead and we can add in one column and we'll give it with this case, 20-pixel margins.

[00:01:12]
And [SOUND] we can go ahead and add a second one. And we'll change that to rows we'll say one row with 20. And you can kind of see why you might use this as basically, the equivalent of padding and CSS, right? If we wanted to have the ability to snap to what we would normally have as the right padding, we'll have to be like, okay, cool, I'm just gonna like, put this in the right corner and I'm gonna add 20 to the X and the Y over and over and over again.

[00:01:50]
Now we can be like, no, I wanna have some nice padding, I could snap stuff on there super easily, and we have that in place as well. If you didn't have, let's say hypothetically you just had the columns, right, you might increase it a little bit, but that kinda gives you your padding on a mobile scrolling view as well, right, and so you can use a one-column grid to simulate padding and CSS in your Figma design.

[00:02:17]
Where some of the magic happens though, is combining constraints and layout grids. So we saw before with constraints So we can say like, stay in the middle, or snap to both sides and expand a contract that worked great for, did I implement it? Our menu bar, right? But, theoretically, if we had stuff in the middle of the page, we could try to center it, but they stay the same size and just kinda sit there.

[00:02:45]
I mean, we can do it watch. I'll grab, this is my son's artwork. Grab the right stuff. Cool, grab that, and it's not transparent, that's just the layout grid. I could theoretically say stay to the left, stay to the right, and they'd kind of grow and expand but it wouldn't really do what I wanted, I could say center.

[00:03:12]
All these are gonna be sub-par Implementations, actually, this is working cuz layout grid is in place basically with the layout grid the constraints will go to the column or the row that it's in, right, and can stay with that. So it's actually staying at the center of that column, but what I might choose to do is kind of stick it right there in there.

[00:03:38]
And we'll say in this case, left and right. Let's grab another one and do the same thing. Make a copy this time. And we'll say, left and right And now you'll see that they kinda grow and contract like if they had with 100 inside of like two sections or divs in CSS.

[00:04:06]
They kind of behave the way that you think that they should and they don't have a scale property on the up and down so they keep their height. Basically behaving the way that they would in the browser and you basically get it for free if you use layout grids and constraints together, that I will also work kind of in a more like CSS Grid kind of format right so let's pull this up a little bit [SOUND].

[00:04:30]
And we can say let's put this one in here, and I can snap it in there and have it grow to the right size grab another one real quick. We can pop it in there as well. Okay, now we actually want it to scale. We want both them to kind of scale in both directions.

[00:04:53]
So select them both. And we'll say left and right, top and bottom. And now theoretically. They will actually grow and shrink again like they would in the browser. The other cool thing that you can do with frames that we didn't talk about before is, it is not unlikely that you're developing for both especially doing for mobile both landscape and portrait, right?

[00:05:18]
And so in a frame if you ever need to change the device you can actually just hit this drop down, but the other thing that you can do is swap it between, I've broken this frame, let's make it an iPad Pro11. And you can see it's like snapping to the right sizes in each case, right?

[00:05:36]
So to your point before I maybe can't make an app where that will always just take up the right space and anything I drop it in but I could theoretically set up one view and then duplicate the frame, make one an iPad mini, make one Safari on a desktop, make one an iPhone, and then adjust accordingly for each one.

[00:05:56]
And you can see that even as I switch to portrait I might adjust the rows in this case. I might have a set of portrait rows and so on and so forth. But generally speaking, I can kind of switch back and forth, even if it could be cool.

[00:06:12]
Let's see real quick. One of the things we saw before is we can make save styles out of a grid. So let's actually make one I'll call it live coding, so don't get confused. Live coding, port tripped and sweet and then we're going to duplicate this, Over here and let's say that for landscape we want to change this grid a little bit so we'll go ahead and will detach this style and we're gonna say that maybe in portrait mode just do two columns, right?

[00:06:58]
And so what we can do is we can flip this, gotta reset those constraints real quick, Gotta grab the right stuff and we'll set it to those pieces, so the constraints are still there I just had to snap and show the right part of the grid. And then we'll take this frame and you can see that now I can get in a given one because I can make this also a live coding landscape, right?

[00:07:35]
So now as I make more frames, I can apply the correct grid just by picking the grids I've decided that I want. And then theoretically, as I'm copying these frames through, I can just apply the right grids and see all the different views to make sure everything behaves the way that I want it to.

[00:07:50]
Everything's looking pretty good.
>> Is there a way to tell Figma to use different grids depending on portrait or landscape?
>> No, not presently, right? There's a whole bunch of new features coming all the time. One of the things that you can't do yet that I wish, if I have a feature request, if anyone from Figma is watching, is there's no sense of effectively cascading right?

[00:08:15]
And so I would love to set properties on a frame and have the things in there kinda be able to like inherit, or at least be able to tell the properties of its parents. So for instance, yeah, if portrait use this grid, if landscape use the other one, or if dark mode and I drag in a bunch of things use the dark mode version of that component.

[00:08:37]
When we get into components later, there are a bunch of things where I wish that like right now each layer is kind of, they know about the constraints, but l they don't really know about a lot of the other properties of the frame that kind of surrounds it, right?

[00:08:51]
They effectively like the metaphor that you could abuse Is the idea of these are not props that the parent react component passes into the child react component, right? So right now you can't. That said, looking at the number of features that have changed in the last year, I wouldn't be shocked if one day that feature shelter but at the time of this recording you can't.