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 faster 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, 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 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 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).
- You go here clone the Figma community file to your local workspace
- You open up the URL for your website development environment
- You zoom out to a good size by pressing
⌘ -or⌘ + - Take a screenshot of the block trying to get roughly 3:2 ratio
- Go to the figma file
- Click the checkerboard artboards and hit
⌘ + v - If the image isn't good, retake the screenshot or play with Figma crop
- 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.
