# Creating the perfect array thumbnails

> Are you using the new thumbnails for Sanity, and want to speed up your whole screenshot process. We've got the perfect tool for you.

**Published:** 2024-08-13 | **Updated:** 2026-07-23 | **Categories:** Sanity
---

You know some folks really get hell-bent on something minor, and it's very difficult to stop your brain from whirring away to try and find a better, faster, easier solution to a problem. Unfortunately, I am that person. We've been getting bothered by the perfect thumbnail for page builder arrays from as soon as they came out. Before I jump in the deep-end, I first want to dedicate this blog post, to a lovely comment on YouTube.

So you may or may not know we have a [YouTube channel](https://www.youtube.com/@robotostudio), it's only 20-something subscribers at the time of writing, but we really appreciate every comment and lovely message we receive (and we do read every one).

We got a great comment from [@amranmohamed377](https://youtube.com/@amranmohamed377) who told us about `3:2` being the perfect aspect ratio. With that being said, we wanted to throw some free stuff back and build something useful for the community. Which is why we created this [Figma community file](https://www.figma.com/community/file/1404904715260176924/arrayfield-template-for-sanity) to easily build.

## Quick note
You can build these thumbnails within Figma at the time of creating your wireframes. However, I do typically find that the easiest way and most accurate for clients to get a 1:1 representation of what it will look like is to use the website itself.

It also speeds the entire process up significantly and stops you from getting questioned on: *"why the hell did you spend a day and half to create pixel-perfect thumbnails for our page builder"*

## I got the community doc, now how do I use it
Well lucky for you we actually have a video in the section below, but for the sake of brevity, I'm going to list out the steps (and definitely not for SEO purposes).

1. [Clone the Figma community file](https://www.figma.com/community/file/1404904715260176924/arrayfield-template-for-sanity) to your local workspace
1. You open up the URL for your website development environment
1. You zoom out to a good size by pressing `⌘ -` or `⌘ +`
1. Take a screenshot of the block trying to get roughly 3:2 ratio
1. Go to the figma file
1. Click the checkerboard artboards and hit `⌘ + v`
1. If the image isn't good, retake the screenshot or play with [Figma crop](https://help.figma.com/hc/en-us/articles/360040675194-Crop-an-image)
1. Once you're happy export matching name of block in Sanity

## Now watch the video
Yes it was hot, yes we don't have an aircon in the recording room. The lengths we go to, to make sure you have good thumbnails.

## Update: there's now a Claude Code skill for this

Since this post went up we've automated the whole flow, no Figma step or manual screenshots required. If you'd rather skip the screenshotting altogether, read [How to automate creation of Sanity thumbnails](/blog/automate-sanity-thumbnails).

> **Sanity CMS development**: We set up schemas, page builders, and editorial workflows that your content team will actually enjoy using. [Learn more](/services/sanity)