Marie Kondoing for UX Designers: Figma files
By: Raquel Piqueras
Tags: UX Design, Figma, Productivity, Organization, UX

Since I color-coded the status, at a first glance is easy to understand what is done, what is in brainstorming state and what is in progress. I created these covers with the primary information that I find most helpful based on my team and projects, but every designer works differently! Ask your stakeholders what would they like to see in the thumbnail.

Mine contains:

Status: Although my design process at Microsoft is more complex than this, I have three basic status to determine the state of the design: Brainstorming (So expect wireframes, and nothing set in stone), In Progress, and Finalized. I color-coded each with a status bar to help visualize them. Semester: In my team, we work in sprint-based semesters. Tracking in which one the project was done helps my team and I keep track of what we delivered on that period and is also useful for me to list my work done in my performance reviews. Product name and project name: This has the biggest font to read at a glance. Ideally, the product name should match the Figma file name to avoid confusion. Contacts: It is important to list the designer name (Especially if multiple ones work on a project) the PM, the DEV and the Researcher when possible. This allows other stakeholders viewing the file to understand the key points of contact.

An example of my covers

How do I create a cover?

1. Set up a new page and name it cover. Keep it always at the top to make the thumbnail preview it.

2. Add an artboard 620 x 320 px and set it to transparent. Make the workspace background Black #000000. Please note that this is important because when working on different screens, the thumbnail will resize accordingly. Having the background black and the artboard transparent will ensure you no gaps.

3. Start designing your cover! Make sure to use big size fonts (Mine are between 16px–40px) to have readability in your thumbnails.

PRO TIP: Categorize status in different frames, so you can turn on and off quickly as the design evolves.

With a quick organization by frames, I can keep only visible the status I am at, and swap them quickly. In my cover, the status frames contain the top tag (Icon + Status name in a pill), and the progress bar.

2 | Organize your pages

My PMs and Engineers struggled to find the latest iteration in my Figma files. Organizing by pages allows me to keep track of the number of iterations, and help me understand how long it takes me to design certain features. Here is how I typically organize my pages:

Cover: Always at the top, to use it as a thumbnail preview. Iterations: I number my iterations to help everyone understand which one is the latest (Example: Iteration 1, Iteration 2, Iteration 3) And I keep the latest at the top organized in descending order. I found extremely helpful to add the date where I start a new iteration. It helps me discuss excessive churn, and allows me to understand how long it takes me to build certain designs. Discarded explorations: Sometimes I test different approaches/design patterns. I like to keep the final (or finals if I am going in multiple routes) under the specific iteration where it belongs and save my explorations under this page. I let my Eng and PM always know that this page is chaos and mess, and everything here is discarded designs (I even add the word discarded to the title of the page). But is worth keeping them to document your process for portfolio, personal growth, or to potentially revisit it). Current State: (Perhaps the most important page!) Sometimes I do a refresh on an existing design, or I add a feature to an existing UI. Before I start, is worth to take some screenshots to document how the UI was before I started working on it. I find this extremely valuable to keep track of the evolution of the product, to tell the story in design reviews or with other stakeholders, and to use in your performance reviews. This small effort has paid off so many times! Competitors: If you get a hold of some competitors UI, add screenshots here. This would be again a tool to better tell the story of your designs and would help you understand how other designers tackled a similar problem.

An example of my pages. In this instance, I put together Current UI and Competitors. I always keep discarded explorations at the bottom and organize my iterations by adding the newest one first.

3 | Organize your working space

Finally, your working space is the place where most people will go to present your designs, make comments, inspect the CSS, etc. For this reason, is important to add clarity and a sense of organization here.

1. Covers for flows

I find helpful to present my flows in a horizontal layout, from left to right. this is useful to make prototypes and also to keep dragging the screens as you present your design flows. In front of each flow, I like to create a cover with the basic information about it:

An example of my cover

1. Type of design: In blue, I like to specify if this is a User flow, a Wireframe flow, or if they are Additional screens. I find useful to number the specific flow to refer to them in meetings (For example, in a very busy workspace with +5 flows, you can refer to “Flow 2”).

2. Title of the flow: I try to make it as clear and concise as I can to be self-explanatory.

3. Description: I use this part very rarely. But sometimes I like to add additional information about the flow. It helps my PM’s to present our ideas without me in the room, or to others with limited background about the project to make a better sense of it. This section contains very different context types depending on the project (Sometimes I add design reasonings, sometimes the goal, sometimes the persona background, etc).