Categories
Figma

Figma Cover Pages Feed Two Birds with One Scone

View the original post

How creating cover pages can speed up your design process.

Bird #1: Tiny screens in file thumbnails

We’ve all tried finding that long lost design. Scanning each file’s thumbnail for a glimpse of what you’re looking for. Trying to see those tiny screens that might hint at what’s in the file. That’s when creating a “Cover” page for your Figma file comes to the rescue.

Tiny screens in Figma file thumbnails

Bird #2: Larger design reviews are inefficient for smaller updates

Our design team has [somewhat] biweekly hour long design reviews in which any designer who has something new to show to the team can present their work and get feedback. Timing isn’t an issue because we move them around as needed. It’s a great way to do early stage reviews where the structure or direction of the design is still in an exploratory phase. But, it’s not at all efficient for smaller updates or raising awareness.

The Scone

Enter the cover page. A simple page that contains an overview for that file.

Covers can include:

  • Title of project
  • Relevant pages
  • Lead designer
  • Description
  • Goals/Problems
  • Status (Early stage, late stage)
  • Reviews

Title of project

Easy enough to understand. This could be the name of a project or the general term for the file’s contents.

Relevant pages

Depending on how your team organizes its Figma projects and Figma files, relevant pages may make sense in some cases more than others. If every file has pages labeled “Visual research”, “User research”, “Discovery”, “Flow”, and “Ready for development” as the Figma Best Practices suggest, then showing a list of relevant pages won’t be helpful. But if you’ve got a file called “iOS_Profile” with pages: “Posts”, “Bio”, and “Settings”, it would be helpful to know that profile settings can be found in “iOS_Profile” and not “iOS_Settings”.

Description

This could be a general description, the objective, a list of problems that need solving, the solutions to those problems, etc.

Stage

A stage component with “Early”, “Mid”, and “Late” variants could be made to let designers easily switch the stage of a project as it progresses. Our team uses “Early stage” to mean exploratory, “Mid stage” to signify the direction has been chosen but changes are still occurring, and “Late stage” for when most of the design is done and it’s just being fine-tuned.

A stage component with variants

Reviews

A teammate of mine suggested we use our cover pages for quick design reviews as well. The reviews would be geared towards updates like font changes, color changes, and other fine tuning. The above attributes give context into the project, which make it easy for other designers to look at your file and give feedback. Our team drops the Figma link into Slack, asking for a review. Then others will go into the file on their own time, leave comments, and update their approval status. Approval statuses are just color coded dots that mean: “Approved” (green), “Suggestions” (yellow), and “Changes requested” (red).

Components with variants for reviews

Now that you’ve got your cover page ready…

Capitalize on your work by putting a frame around all those attributes, and right click “Set as thumbnail”. You’ll now be able to see all this context before clicking into your file.


Figma Cover Pages Feed Two Birds with One Scone was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.