# Creating preview Images for page builders in Sanity Studio

> Here's a quickfire video showing you how to go from website to page-builder preview images in the shortest time possible with our Figma community file. Shoutout to @amranmohamed377 for the inspiration.

**Published:** 2024-08-13 | **Updated:** 2026-08-11 | **Categories:** Shorts

Watch: https://www.youtube.com/watch?v=SEig1qfOMsg

---

## Transcript

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.

## Frequently asked questions

### How do you make thumbnails for a Sanity Studio page builder?

Build the components on your site first, then take a wide screenshot at around 50-75% browser zoom. Paste the screenshot into a Figma template that already has 3x2 thumbnail frames, crop each one with the fill and crop tools, and export. Naming each export to match its page builder component is what wires it up inside Sanity Studio.

### What aspect ratio should Sanity page builder preview images be?

Aim for a 3x2 ratio. That's what the thumbnail slots inside Sanity Studio render at, so matching it means your previews look clean and don't get awkwardly stretched or letterboxed when editors pick a block.

### How do you add preview images to a Sanity page builder?

Export the thumbnails as image files using the same names as your page builder block components, then drop them into the Sanity Studio folder for the studio to pick up. Once the filenames line up with the schema, the previews appear automatically in the block picker.

### Can I use Figma to design Sanity Studio thumbnails?

Yes. Figma works well because it auto-scales pasted images to fit a frame. Roboto Studio uses a Figma community document with pre-sized 3x2 frames, so you paste a screenshot in, crop it, and export. Figma's centred scaling means even slightly off-ratio screenshots end up roughly correct.

### What is a Sanity page builder?

A Sanity page builder is an array field of section blocks (hero, feature grid, CTA, and so on) that editors compose into a page. Each block has its own schema, and most teams add a small thumbnail per block so the picker shows a visual preview alongside the name.