Let’s get this file ready to share with developers. We’ll start by using pages to organize the information.
Cover Image
You can create a thumbnail image for your file in Figma, which makes it easily recognizable from the file list view on the dashboard.
Creating a Custom Thumbnail
- Create a page named “Cover.” I like to keep it at the top of the list of pages.
- Add a frame with these dimensions: 1920 x 960. The thumbnail size will differ depending on your display’s resolution, so keep important content within the 1600 x 960 “Safe Zone” of the frame. You can make a semi-transparent rectangle sized to those dimensions and name it the “Safe Zone”. Toggle the layer’s visibility to confirm the content is in the safe area.
- Set the Background Color of the Page to match the Fill Color of the Frame. This ensures a seamless edge-to-edge thumbnail as it is resized for different displays.
- Right-click on the frame and select Set as Thumbnail. 5.Visit the dashboard to see the thumbnail.
✨ Project Check-in:
In the project file, add a Cover Image.
About Page
You can include an About page to include relevant project information. Contents may include:
- Problem statement
- Hypothesis
- Personas
- Goals
- Relevant links to other documents, such as a project brief, Jira tickets, etc. Did you know you can add clickable links to text in Figma?
Some UX research artifacts, such as user flows, can get lengthy so feel free to put them on a separate page to keep the content orderly.
✨ Project Check-in:
In the project file, add an About page with a few frames for the relevant information mentioned above. It’s ok you don’t know the backstory for this project; use placeholder text.Bonus: Prepare a Presentation
You can even set up these frames as slides, which comes in handy for meetings. Set the frame dimensions to match your computer’s resolution (or aspect ratio), and then design it as you would a traditional slide. Click the Present button and go fullscreen. Now you can arrow left and right to navigate through the slide deck.
Iterations
It’s common to have several versions of a design. Before sharing with others, organize the variations to indicate their status. There are several ways to do this.
Basic Versions
Latest design v3 v2 v1 Scrap
Here, the latest design is labeled at the top, and each version is numbered with a “v.” I also like to keep a “Scrap” page with any designs that I “threw out” while iterating. I keep them on hand, in case they’re needed later.
Software Versions
v1.3 v1.2 v1.1 v1.0 - Public launch v0.2 v0.1 v0.0 - Initial brainstorming
Another option is similar to software versions. Here, v1.0 is the first public launch. The versions leading up to it start in zeros (ex. v0.1) and represent earlier iterations. Everything after the Public launch (v1.1+) is an update after the launch. Small tweaks are denoted in v0.1, v0.2 increments, while large updates are designated with jumps to full version numbers (v2, v3).
Dates
Nov. 30 - Dec. 4 Nov. 16 - 27 Nov. 2 - Nov. 13
You may prefer to use dates instead. If your team works in Agile sprints, it can help your team keep track of the current design.
Status Indicator
Along with versions, indicate the status of the design. Perhaps one version has been approved, but another is in review. Clarify to the developer which version they can start developing and which one is in review so they can provide early feedback on the design. Here’s how you can indicate status at the page level:
? v1.3 - testing a new hero ? v1.2 - new onboarding tour ? v1.1 - copy changes ? v1.0 - MVP v0.2 v0.1 v0.0 - initial
Here I’m using emojis to indicate final status (lock) vs. versions that are in progress or not finalized (lightbulb). Here’s a website that makes it easy to copy and paste emojis. In this example, the MVP (minimum viable product) is ready for development. For those unfamiliar with the term MVP, it is a trimmed-down version of the feature for the initial deployment. v1.1 and above are in progress and not ready to be developed.
✨ Project Check-in:
In the project file, locate the card labeled “FINAL” and place it on a page indicating its status. Put all other iterations on a page named “v0.0 – initial”.
Components
Master Components Page
While it’s perfectly fine and normal to have Master Components all over your design file, it’s much tidier to keep them on one page. You can maintain all Master Components on one page and use instances everywhere else in the file. Developers especially like this because they can see at a glance all the reusable components that will need to be used or built. And ideally, they align with your design system too. While you can inherently see all components in the Assets panel, a Master Components page enables you to add additional labeling and notes alongside the components. Don’t worry about setting up the actual components; we’ll do that later. For now, just set up the page with the master components.
While you don’t need a plugin for this, here is one to streamline this task: Component Page The “Collect stray components” feature moves all master components into the dedicated components page while leaving an instance in place.
✨ Project Check-in:
Add a Master Components Page.
✨ Exercise: Pages
Task summary:
- Add a cover image
- Add an About page
- Locate the card labeled “FINAL” and place it on a page indicating its status. Put all other iterations on a page named “v0.0 – initial”.
- Add a Master Components Page