“When you’re a carpenter making a beautiful chest of drawers, you’re not going to use a piece of plywood on the back, even though it faces the wall and nobody will ever see it. You’ll know it’s there, so you’re going to use a beautiful piece of wood on the back. For you to sleep well at night, the aesthetic, the quality, has to be carried all the way through.”

Steve jobs

As designers, we don’t make a chest of drawers. Rather, we make design files and documents. I believe Steve Jobs is right. If you are a craftsman, the quality has to be carried all the way through the file. One of my top criteria for hiring a designer is my sense of this level of craftsmanship.

Specifically, this means your design file should have the following characteristics:

• Thoroughly and neatly organized
• All layers are named appropriately
• Old iterations and cruft are removed/archived
• Easily understood
• Easily demonstrated by others
• Easily extended by other designers

I believe doing this will yield the following benefits:

• You will design faster
• Engineers, PMs and other Designers will respect you more
• The design will be better
• It will be easier to collaborate with other people

Inside peek to blogging: I have written this blog 4 times now. I have a history of Layers and Hand-Offs. Details on design tools over the years. The post was getting too long. So I kept erasing it and starting again. Writing is like designing. Iterations and even starting over is normal.

Rule 1: Name/Organize your layers

Look at this example of messy layers. Everything is on the same level. Every layer is named Shape 18 or Layer 2. This is common for most designers.

No one believes this is high craftsmanship. Either you think this is gross or you think it doesn’t matter. Designers who think it doesn’t matter have never designed in an organization that takes this sort of thing seriously.

I name my layers as I design. There are times when I am quickly roughing things out in Figma and I let it get messy. Then, the pendulum swings, and I clean them up. The cleaning up actually coincides with me fixing bugs in the design. As I am naming and organizing, I realize mistakes in the UX.

Rule #2: Organize the file content

Don’t just throw all your screens into the canvas. Think about what you are doing. Let’s say you have three user flows. Make three distinct sections with clear labeling.

In the above example, keeping the sections labeled and organized really helps everyone understand what is going on. It doesn’t take more time to organize. It takes less time. You lose time when you can’t find what you are looking for.

Rule #3: Use a design system early

A design system radically increases the speed of design. The one I use now is great. (Shout out to Tiffany!) It allows me to make a design flow using off the shelf components that I modify to suit my needs. I hardly ever create a new component in a design.

Chudo Loo (Great designer I worked with years ago) had a metaphor that I have since adopted regarding design systems. Every UI component is like an animal on your farm. You don’t want 6 kinds of cows on your farm. Too many makes running the farm difficult. Ideally you have one of each kind of animal. See post on consistency for more details.

If you make your file with tons of one-off components, you will waste a ton of time updating things. If you use components for everything that is repeated, you can update a whole file in a few minutes.

DRY – Don’t Repeat Yourself. This is a common phrase in engineering. Don’t have the same code logic in two places. The same goes for your file. Don’t have repeated (non-component) UI elements.

Rule #4: Wire up your prototype

So many design files I have seen in Figma are not set up for prototyping. Either they have no prototype functionality wired up or they are actually storyboards that only allow a single thing to be clicked. A prototype allows (almost) everything to be clicked.

Either way, make the presentation. Don’t just scroll around the canvas zooming in and out like a maniac. Make a nice presentation of the use cases and make it easy for anyone to demo. See below and example meant to be browsed by anyone without designer supervision.

Summary

Most designers are messy. Most hiring managers don’t care. I am in the minority. However, I think it’s a better way to design and a better way to work. I think craftsmanship and attention to detail goes beyond what the design looks like. It speaks to a higher level of working and collaborating with others.

If you ever want to work with me, you will have to adopt these rules. Your file is representative of you as a professional. Your file has your name on it. What does your file say about you?