Figma thumbnails
Oh, how we designers love neat, structured, and tidy things. On the other hand, we also like functional, logical, and consistent.
Let’s cut to the chase: Figma allows us to control the thumbnails of our projects. Fantastic. But why do we use them the wrong way around?
It reminds me of this UX meme.
-Hey, chatGPT, what are thumbnails?
-Hi master, you’re so clever, always with intelligent questions (its words, promise). A thumbnail is a small, reduced-size image or graphic that is typically used as a preview or visual representation of a larger digital asset, such as a photograph, video, document, or webpage.
So, in short, Figma thumbnails help me to quickly skim through dozens of little images, scanning for familiar and recognizable colors, proportions, sizes, distances, structures, etc., to just then look at text (title) for confirmation.
Set as thumbnail
Designers can control thumbnails from inside the Figma file, by right-clicking over a Frame or Section and selecting “Set as thumbnail”.
The solutions
We are using them wrong!
A common way for designers to structure thumbnails is with text cards.
Beautiful, and glamorous… but we’ve just destroyed the main purpose of a Figma thumbnail: the ability to preview the content of a file. Instead, we are filling it with text.
The thumbnails above force me to read and break my ability to scan for content. Only little affordances exist like the colored backgrounds and labels.
A better way
An improved version of this approach includes a thumbnail within the thumbnail, making it clearer what kind of content it contains
They’re still full of text content, but those little thumbnails are helping me out.
The best way
Well, the best way is to use these thumbnails how I believe they were intended to be used: Select the most memorable portion of your design, surround it with a section, and make a thumbnail out of it. Or pick a frame that can be seen as a flag for the type of content and do the same thing: Set as thumbnail.
As for the text, well, Figma has a title right there for you. That’s where the text should be.
“Form follows function”, right?! Figma’s thumbnails are a complementary form to the title that should help you and your colleagues locate content.
