Home > User Experience > Figma Cover Pages Feed Two Birds with One Scone | by Elena Pearson | Feb, 2021

Figma Cover Pages Feed Two Birds with One Scone | by Elena Pearson | Feb, 2021

Figma Cover Pages Feed Two Birds with One Scone | by Elena Pearson | Feb, 2021

How creating cover pages can speed up your design process.

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.

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.

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”.


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


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.

Source link