Creating preview Images for page builders in Sanity Studio

Hey, how's it going? So this is a quick video to basically create icon arrays, so creating the little thumbnails that sit inside of Sanity for page builders and things like that. Now everybody has their own way of doing this, but we have a fast way to do it if you already have the components built. And more importantly, this actually will match the aspect ratio of the little thumbnails that are in there and look really, really clean if you do it this way. So let me show you how we work with it. So this is the existing Ralo Studio website, and we don't currently actually have the thumbnails. So what we're going to do, we're going to hit command and minus a couple times until we hit around 75, something like 50% could even work. I'm on a MacBook 14 inch, so essentially the screen size isn't big enough to be able to take a massive screenshot around it. So this is how we get around it. Just remember the size that you're doing it for because you have to do all of them by the same zooming out ratio. So here we go. What we're going to do is we're going to take a screenshot of this. I'm going to take a big old screenshot, try and leave as much space around it as possible, and we're going to go into Figma. And we're going to use this new community plugin that we, or community document that we've just used inside of Figma, and we're going to open it up and it looks something like this. Now what you're going to get is this array field of thumbnails. Now you can just straight away command click one of these trees that are in here and paste it in. So you can hit that, and there's how it will look inside of the Sanity development environment, inside of the Sanity Studio. However, we have these 3x2 examples here which you can also do. So again, command click (I believe it's control click on Windows), you want to click this and you basically want to paste it in, and that's how it will look. Now you can do this for every single one of these. So for example, I'll do the next one down, and all we're doing is we're trying to get it roughly 3x2. Sometimes it's a little bit bigger, sometimes it's going to be wider like this. But the lucky thing about Figma is because of the way that it actually scales the image up and down, even if I hit this now where it's a much wider version, it should kind of zoom it into the center. Now this doesn't look perfect and it's going to drive me crazy, so what I'm going to have to do is I'm going to have to do it again and try and leave more space in there. Now that's probably pretty close. Remember, you're trying to hit 3x2, so if you make sure that you're following that same ratio, it will hit roughly the same ratio perfectly there. Now I'm not going to be able to live with that either because it's got those next icons below it. So what you can do in these situations is hit the little fill section at the side, hit crop, and just shift it about however you want and shift up the size to get it to work. So if you see there, that to me looks great. And you can do that for every single one of your components. And all you will do at the end of this is you will export them with the same name as the page builder components and put them inside of the Sanity Studio folder. And from that point onwards, it all works perfectly. But this is a great way to basically template these screenshots and make it easier for you and much, much faster than the traditional way of doing it. So have a great day. Hope that's helpful. Bye.