menu

Figma

Figma is the first collaborative UI design tool built in the browser. Join our growing community and kick off a conversation!

Channels
# All channels
view-forward
# General
view-forward
# Start Here
view-forward
# Announcements
view-forward
# Design Systems
view-forward
# Plugins & API
view-forward
# Made with Figma
view-forward
# Prototyping
view-forward
Team

Project Thumbnails

May 22, 2018 at 2:12pm
The Figma community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →

Project Thumbnails

May 22, 2018 at 2:12pm
I tweeted about this and it got a fair amount of traction, so I thought I'd share it here too!
Are you tired of your project feed looking like a small screenshot of a bunch of screenshots? Follow these simple steps and you can make your project thumbnails look great!
Step 1: First page in your project only has one frame at 620x320
Step 2: Create a cool design in it with fairly large text.
Step 3: Set the canvas color but leave the frame transparent.
Step 4: Bask in the glory of your opulence.
See attachment for before and after!

May 22, 2018 at 2:46pm
Ben, great tip!
like-fill
3
  • reply
  • like
Another tip I've seen is to color code these preview to indicate status. That would make it really easy for people outside the Design team to know whats going on.
  • reply
  • like
sweet
  • reply
  • like
yeah, that reminds me Abstract. it helps a lot
like-fill
1
  • reply
  • like
Been doing this as well, nice tip to change the page's background color to match!
like-fill
1
  • reply
  • like
just curious, what do you call this first page?
  • reply
  • like
I just call it Intro or cover, and move it to the the page 1 position.
like-fill
2
  • reply
  • like
I named it "Library Thumbnail", but that feels a bit verbose.
like-fill
1
  • reply
  • like
😂 nice, it's fine
  • reply
  • like
this is making me irrationally happy today thanks
like-fill
2
  • reply
  • like

September 18, 2018 at 7:48am
I can't do it. Frame color to 0%, 620x320 and first position before every other frame. :/
  • reply
  • like

September 18, 2018 at 3:12pm
I can't do it. Frame color to 0%, 620x320 and first position before every other frame. :/
I think you need to put it in a page as the only frame. Make sure it's the first page as well. :)
  • reply
  • like

September 21, 2018 at 4:53pm
Did something happen with these? Looks like Figma is ignoring canvas background colors for project thumbnails now :(
  • reply
  • like

September 25, 2018 at 8:09pm
Some of mine are glitched as well. Not all. Just some.
  • reply
  • like

November 1, 2018 at 2:17pm
like-fill
7
  • reply
  • like
Love this Paul - such a simple but versatile system thanks for sharing!
like-fill
3
  • reply
  • like

November 5, 2018 at 7:31pm
Thank you soooooo much! ❤️
like-fill
2
  • reply
  • like

April 4, 2019 at 5:43pm
I can't get this to work for me consistently. I am following instructions posted here. sometimes it works, sometimes not. anyone else have this experience?
  • reply
  • like

April 8, 2019 at 2:37pm
I've had my thumbnails disappear or struggle to update once a file became too big. What kind of issues are you having?
  • reply
  • like

April 14, 2019 at 10:46pm
— biggest thing is making sure there's else on the first page — interested to learn about what other problems ppl are running into! We haven't had any issues...but we do keep our filesizes fairly small.
  • reply
  • like

April 15, 2019 at 11:36am
Here is our setup. Did this awhile ago, and rely heavily on color coding. I highly recommend color to help make things glanceable. And limit words as much as possible. Color is used for status. I like the resource, and archive versions I might have to incorporate that.
like-fill
5
  • reply
  • like

April 19, 2019 at 5:08am
nice!
  • reply
  • like
Show more messages