Clean up after yourself, designer

A short, practical guide on how to maintain clean design files

How to deliver design files people actually understand and enjoy using. Figma component library included.

I’ve delayed writing this for a while. I thought everyone instinctively knows and does all I’m about to say. Life proved me wrong. Over the years of freelancing and working in-house, I was surprised to see how too many designers deliver almost indecipherable design files. Don’t get me wrong — my intention is not to stand on my high-horse and throw dirt on other people's work. I think this is a low-effort-high-impact problem, which hurts our trade and can have an immediate positive impact if addressed properly. Thus, at the risk of being decorated Captain Obvious 👮‍♂️, I’ve put together this short guide and shared a Figma library of components I use to organize and annotate my design files. Enjoy.

What I mean by “clean”

Maintaining and delivering clean and tidy design files can be a challenge. Tight deadlines, complex systems, indecisiveness, unexpected changes, and many more can all contribute to a messy file. In spite of all that, there’s no excuse to deliver a disorganized file to your team or your client. I’m not talking about obsessive perfectionism. I also know everyone has their own workflow. What I’m suggesting is rather common-sense and it’s about making the minimum effort necessary to make a file legible and easy to parse.

Anyone that picks up your project should be able to immediately understand a few basic things:

• what it’s about
• what part of an app it contains (if applicable)
• what each screen is about
• a general indication of the user flow
• explanations regarding design decisions, content or interface behavior
• links to additional documentation

Why it’s important

The work of a product team is difficult enough. Making files hard to decipher just adds extra, non-productive work. It’s also a stain on the designer’s reputation. No one wants to agonize over trying to understand a design. File cleanliness is not a nice-to-have. It’s a necessity.

How to do it

Below is a list of things I try to keep in mind during and after working on a design. I’ve also created a simple Figma library of components I use to get organized. Check it out and grab your copy 👉 Tools for specs.

1) Use a naming convention for screens

A good baseline you can use is: [section]-[sub-section]-[state]. You can append “-[edge case]” to that if needed. Here’s a real-life example 👇

The Figma renaming feature makes this a breeze even after drawing a bunch of screens. Based on the particularities of your project, you might want to add to the name but don’t overdo it. Try to keep it up to 4 identifies separated by a dash sign.

2) Name and highlight groups of screens

This makes it so much easier to scan a large file and understand what’s going on. Group screens that are part of a section or a flow together and write a headline above them.

3) Indicate the general user flow

No need to get too specific with this. There’s a prototype for that. This is only meant to help understand user flow and information architecture. Organize screens in rows, and use arrows to show how the main ones connect to each other.

4) Give context and direction with annotations

Ideally, this would be a native Figma feature. Hopefully, it’s in the pipeline. Until then, use annotations placed next to or under the screen, to give more context, explain behavior, or link to further documentation.

5) Use post-its to jot down ideas and feedback

I know how it goes… you’re working on something, you get an idea or a piece of feedback, and you rush to implement it before you forget. This happens over and over, turning your file into a huge mess by the end. Avoid that by writing a quick post-it note and drop it on your canvas. You can always come back to it later.

6) Clean up unused explorations

In the heat of battle, all these pleasantries can fall through the cracks. I know, I’ve been there. However, that’s not an excuse to leave it all the mess at the end. Screens that are not used but you want to keep should be moved to a separate page or grouped together away from the final design. Try to make this a habit after each design file

7) Write a general documentation guide

This applies mostly to client projects. Product teams generally have their own process for documentation and sharing design work. Complex projects can’t all live in one Figma document. Usually, there are multiple project files, component libraries, research documents, and more. Bring all these together in a single document which you can send to the client. It can be a Google Drive doc or a Notion page (recommended). Here are a few things to consider including in your guide:

• project title and description
• links to research documents (competitive analysis, business canvas, etc.)
• links to brand guidelines and visual language
• links to design and prototype files
• links to developer documentation
• team members and their responsibilities
• contact details for follow-up questions

Hope you find this helpful. Until next time, stay safe.

Was this useful?
Show some love. Give it some claps 👏

Let’s keep in touch
Dribbble / Linkedin / Twitter / Instagram

Want to work together?
Check us out on contrast.studio