Subscribe for the latest in UX news and tools

by Ste Grainer on March 11, 2019

productivity organization file structure sketch app layers naming intentional design quality

Creativity and organization feel like polar opposites. Reining in the unbridled passion of a creative mind with some semblance of structure might seem like caging a wild animal. Inevitably, we think, the animal’s spirit will be broken or the cage destroyed. That myth could be true of 100% personal art projects, but when you’re designing things for people and collaborating with a team, unrestrained creativity without some basic foundation of structure will inevitably lead to confusion, frustration, and possible failure.

So why not make things easier on your team and your future self by taking the time to think through how you organize your design work deliberately. Following are a few general guidelines I consider when organizing my own work. This system works for me, but it is by no means a perfect system. Feel free to adopt, adapt, or ignore any of the following advice to best suit your needs and your team. (Many of the details are Sketch-specific because that’s my primary design tool. There are likely comparable options in your design tool of choice.)

Name things meaningfully

I’m not going to sugar coat this: naming things is HARD. In recently getting a puppy, my family went through several debates on names. Some names didn’t fit, while others conjured negative emotions. Thankfully, we don’t have to name living creatures for most design projects. But the sheer abundance of things we do have to name can be overwhelming: projects, directories, files, pages, artboards, groups, layers, and symbols are just a few that come to mind.

Sometimes names are easy. A project name can be the client’s name or their given project title. It could be the name of your product, a codename created by the team, or even just the tentative title of a given feature. Sometimes our tools provide logical layer names (like Sketch reusing the text inside a text layer). Other times the right name takes a bit more consideration.

Here are a few tips I like to use when naming various elements within my design:

• Name things by how you’d explain them to others. It can be tempting to just leave a default layer name in place. After all, you already have 26 other Rectangles in the artboard. What’s one more? But what does the rectangle in question represent? Perhaps it’s a search button or a dialog box. Name it based on how it’s being used so that others will be able to find it and understand its purpose as they look through your file.
• Avoid version numbers in file names. We’re all guilty of creating some monstrosity like Project-Name-Aug-2018-Final-Version-1.psd at some point in our design careers. But after the hundredth time trying to figure out which Final-Version-#-No-Really-Final-This-Time file we actually need, perhaps it’s time to move to something more sane. Try an actual design versioning platform (like Abstract or Trunk). Or use Pages and Artboards within a file (more on these later) to explore variations and consider refinements without completely overwriting existing work.
• Forget the copy numbers. By default, Sketch, Photoshop, and other design tools will append something like “ Copy #” when you duplicate a layer. In Sketch, you can disable this under Preferences > Layers by unchecking the box next to “Rename duplicated layers”. This may be possible in other tools, but you may also have to train yourself to rename layers immediately after duplicating them. (I love how easily I can rename layers in Sketch using Cmd-R. It’s actually muscle memory now to rename every new layer as soon as I create it.)
• And sometimes the default is fine. I use basic shapes all the time to shape complex vectors to my liking. You can be darn sure I’m not renaming a simple rectangle if I’m only going to subtract it from another shape. (I will rename the final shape from Combined Shape to something more meaningful though.)

Use Pages to organize structure

For the first six months after I started using Sketch, I created all of my artboards on a single page. I had no idea that I could even add multiple pages. Imagine trying to find the right mockup on a single screen with hundreds of artboards. Pages are amazing. Lying just above the Layers sidebar in Sketch and collapsed by default, the page section can be easy to miss. In fact, often the first thing I do after creating a new Sketch document is start outlining what pages I want. Here’s how I use pages to organize my designs:

• Create a page for each major feature, app section, or content type. For content sites, I create pages for major content areas like Blog, Events, Products, Contact, About, etc. For an app, I may create pages for app flows like Onboarding, Search, Sharing, Profile, Stream, Glue, etc. (depending on the app’s purpose). For more complex software, you may want to create pages based on individual features or other structures.
• Create a page for project info. I often add a starter or welcome page at the top of my page list that gives basic project details like who worked on it, the client (if needed), and any other supplemental information (like where to find external resources used, guidelines for using the document, etc.)
• Create a Styles page. I also like to document text and layer styles on a separate Styles page, similar to how symbols are automatically collected on a Symbols page. This becomes a helpful style reference as my document gets more and more complex. (And can be a handy place to make changes to styles to then apply them document-wide.)
• Pages are great for exploring significant deviations. Want to explore a completely different direction for a feature or section but still use the styles and symbols in an existing file? Create a new page for variations or explorations so they don’t get confused with existing designs.
• Use keyboard shortcuts to navigate through pages. Want to go from one page to the next quickly? Hold the Fn key and arrow up or down to do it. This is Sketch-specific, but an awesome time-saver when you start using pages heavily.

Organize artboards and use labels

Once you’ve arranged your artboards into separate pages, you can organize them further by grouping them logically and labeling them. Think of your artboards on a page like the silverware drawer in your kitchen. If you throw your spoons, forks, and knives in a random jumble, it’s harder to find the right one quickly. Here are a few principles I use to organize artboards:

• Organize left-to-right for flows or general to specific use cases. It can be very constructive to see every step in a multi-step flow laid out as a separate artboard side-by-side from beginning to end. Even better, in Sketch you can use use Fn-Right Arrow and Fn-Left Arrow to navigate sequentially between artboards (left to right, then top to bottom).
• Arrange top-to-bottom for variations, subsections, or related sub-features. Building on the above suggestion, I like to use rows above and below to either explore variations on a design idea or to design related features and subsections. Starting with new rows for these allows me to build out separate flow sequences for these options as needed.
• Add space between less related sets of artboards. Every page is an endless canvas for your artboards. There’s no reason that your artboards need to be smushed into a tiny portion of that never-ending page. I typically use three different spatial distances to organize artboards and their sets: 100 pixels between individual artboards, 200 pixels between closely related sets, and 400 pixels between major subsections. This works for me, but you may prefer more or less; the key is to keep a consistent spacing so things that fit together feel like they’re placed together.
• Use labels to title artboard groups. You don’t have to place elements within an artboard in Sketch. I add headings as labels above each major group of artboards to help document what that set of artboards is meant for.
• Document artboards with external notes. Sometimes artboards need more explanation. In these cases, I like to add notes around the artboard itself. When it’s helpful, I also use flow diagram elements to denote how screens flow from one artboard to the next. I built the Flows & Notes tool in the UX Compendium to help me do this more quickly.

Group and arrange related layers

Every artboard is a symphony of overlapping layers: text, icons, shapes, colors, masks, symbols, and more. It is certainly possible to design by adding layers with little to no deliberate thought about how they’re grouped or arranged. But like a great symphony, your design is more harmonious when all the elements are arranged properly.

• Groups, groups, and more groups. When it comes to organizing individual layers, I take a pretty liberal approach with grouping. As much as possible, I try to group layers similarly to how I might structure the document in HTML. For instance, all of the layers related to a page header might appear in a Header group. All of the layers within that Header group that pertain to navigation might go into a Navigation group. And so on. The most basic way to think of how to group layers is any set of layers that you might want to move together as a single unit should be grouped.
• Reorder layers top-down, left-to-right. This may be contentious because it goes against the default behavior of Sketch, where new layers are always created above the selected layer. As much as possible though, I like to arrange layers in top-down, left-to-right order so that when I’m tabbing through them (yes, another handy keyboard shortcut) the focus follows a logical flow. Because of the way layers stack visually, I may sometimes have to place layers or groups above or below where they might otherwise structurally make sense. And that’s okay.
• Use keyboard shortcuts liberally. Cmd-G groups selected layers, Cmd-Shift-G ungroups them. Cmd-R lets you quickly rename a layer or group. As these become ingrained in your muscle memory, you can group and rename layers with almost no thought. Use Tab, Enter, and Esc to navigate through the layer tree: Tab will cycle through adjacent sibling layers (every layer within the same overarching group), Enter will descend to the top-most layer of a selected group or artboard (it will also open up a selected layer for editing), and Esc will ascend to the containing group or artboard of a layer (or cancel any edits for the current layer if it is in editing mode).

Use symbols for reusable elements

Speaking of grouped layers, symbols are basically reusable layer groups that can be updated and adapted. I’ve written a detailed guide to getting the most out of Sketch symbols so I won’t go too far into the weeds here. Suffice it to say, the same things that I say here about naming and organizing artboards and layers applies to symbols as well.

Create text and layer styles for more consistency

Just as symbols are reusable collections of layers, styles are reusable collections of, well, styles (or layer settings). Text styles are great for ensuring you are consistently using the same font family, size, color, line-height, etc. when you add or copy text elements. Layer styles let you define reusable visual patterns for things like buttons, text boxes, icons, and more.

When you change a parent style, you can choose to transmit the change to all layers with that style applied. (Or you can leave the change as a one-off for the layer you changed, thus separating it from the main set of styles.)

You can organize your text and layer styles by naming them with slashes to nest them into groups. For instance, naming a text style Headings / H1 / Red would create a text style of Red within a group named H1 inside another group named Headings. These nested styles only come into play when there is more than one style with a matching hierarchy.

Use libraries for reusable components across projects

For maximum reusability, libraries are the bees’ knees. With external libraries in Sketch, you can reuse symbols and styles between different projects and automatically update them when changes are made to the original library.

Using external libraries with a team can be tricky, though. Make sure to establish firm norms on how to update the external library, where it is stored, and how to communicate changes so that team members aren’t surprised by changes. Consider using a versioning system like Abstract or Trunk to help manage versions and collaboration more easily. If your design team is big enough, you may even benefit from having someone (or even a team) manage your design libraries full-time as if they were a product (which they most definitely are).

Learn to let go

As any Marie Kondo fan can tell you, a big part of good organization is cutting the clutter. Every design project carries with it old concepts, unapproved variations, and half-explored tangents. Take time to delete these or at least move them to a separate archive file. After I’ve explored a number of variations on a design, I like to cut the ideas that didn’t work out (in many cases literally cutting artboards from a Sketch file). If they seem worth saving for later, I’ll paste them into a separate file (usually with a name like *Project*-Retired).

Ideas that don’t work for one project may work great in another. By capturing these in a separate archived file, I can resurrect them quickly if need be. But by filing them away separately, they don’t clutter my main design files and leave me confused about which direction was the chosen route.

Let’s talk folder structure

Everyone has their own way of organizing files and folders. Maybe your file system works for you, or maybe you’ve never really put much thought into how you organize it. Perhaps that’s come back to haunt you when you struggle to find the right file. Here are a few key thoughts that have helped me build a more organized file system. (It’s nowhere near perfect, but I get less anxious about finding files than I used to.)

• Create broad overarching folders for your main types of projects. For instance, I have folders for personal projects, client projects, in-house work, learning projects (things I create while learning), and general documents. By sorting projects into broader categories like the above, I have a solid foundation to start looking for specific projects. This can get a little tricky when projects cross boundaries — like say a learning project becomes a personal project —but you can always move or “symlink” projects as things change.
• Let your file system reflect your process. The design process is filled with artifacts. These can quickly fill up your file system if they all live at the base folder of each project. For large projects, I like to create folders that roughly mirror my design process to collect the appropriate artifacts at each step along the way. I then add numbers in front of the folder names so they sort automatically in the order of my process. Here are some examples I regularly use:
  • _Archive: Files created that won’t be used or referenced for one reason or another
  • _Business: Contracts, client exchange, and other information related to the business of the project, if not the output
  • 00 Research / Input: To collect all research questions, results, client input, and documentation about the project
  • 01 Exploration: Initial exploration of design ideas including inspiration, mood boards, style tiles, wireframes, etc.
  • 02 Design: The bulk of the design work including prototypes, design systems, production-quality UI, and design documentation
  • 03 Code: When projects require code (web, mobile, whatever), it goes here.
  • 04 Final / Output: This is primarily for projects with a handoff to others. Production-ready graphics, code, and documentation go here.
• Automate your folder structure. What’s that? You’re intrigued about having a more detailed project folder structure, but don’t want to deal with the hassle of setting it up for every new project? You can automate it (using Automator for Mac or using a third-party app on Windows), or create a set of blank folders that you keep elsewhere and copy / paste them into any new project.
• Consider using a versioning system—even for personal projects. This is particularly useful if you work from multiple devices or collaborate with others. But I even like to keep personal projects on versioning platforms like GitHub or Bitbucket. I do this for several reasons: I feel safe that the project is backed up to some degree. I can make changes on one device and feel comfortable knowing that working from a different device won’t completely break things. I can also track the history of what I’ve done and potentially revert to an older version if I mess something up badly enough.
• Back up and archive old projects. Back up, back up, back up! Backups never feel important until it’s too late. Back things up to multiple places. I like Backblaze for off-site cloud backups and Time Machine for local backups to a dedicated hard drive. I also have numerous CDs and DVDs of even older files. Make your backup system automatic so you don’t have to worry about forgetting to do it.
• Re-evaluate from time to time. Does your file system still work for you? Does it help you collaborate with teammates and clients? Are there things you could do to improve it? There’s nothing wrong with shuffling things around to make them work more efficiently.

Use or make templates for your design artifacts

Some designers have a tendency to look down on templates. But in this case, creating or using templates for your design artifacts can help you move more quickly, present the right information consistently, and ensure you don’t miss an important step in your design process. You don’t have to use templates to create your final designs, but they can be immensely helpful in presenting pre-design work such as personas, scenarios, user journeys, site maps, style tiles, wireframes, and more.

If you create these artifacts already, there’s a good chance you may reuse them from project to project already by just copying old versions and modifying them for the next project. In that case, it may be worth updating them to create formal templates. Add instructions, replace project specific details with general placeholders, and modify them to be reusable in the software they’re made in (or recreate them in software that is friendlier to templates). You can then share the templates with your team and incorporate feedback and changes to make them even better.

Not sure where to start?

Want a good starting point for common UX templates and libraries? Over the last few years, I’ve built the UX Compendium as a starting point for my own design work. It has libraries for easily building flow diagrams, site maps, wireframes, and more. It’s packed with templates to quickly create personas, scenarios, style tiles, and printable sketch sheets. Think of it like a starter kit for your entire UX process.

A wish list of things I’d love in Sketch

Sketch has been consistently updating and adding features that make it easier and more intuitive. Even just a few years ago, my wish list would have been much longer so kudos to them for the amazing work they’ve done. That said, here are a few things I’d still love to see some day:

• Preference or shortcut for reversing layer copy/order: This one is mostly my own personal preference. As I mentioned above, I prefer to order my layers top-down, left-to-right as much as possible. In Sketch this means a LOT of manual reordering because every new layer is created above the selected layer by default (or at the top of the stack if no layer is selected). I’d love either a toggled preference for layers to default to copying / creating below the selected layer OR perhaps a keyboard modifier to allow me to copy/create the layer below when I hold a key, like Opt perhaps.
• Nested or grouped artboards: I’d love to group related artboards, labels, and notes together into meaningful data that can be easily moved, organized, and exported together. Yes, you can export a group of artboards and notes using a Slice, but the Slice doesn’t collect the grouped content for organization the same way a group or nested artboard might.
• Artboards with states or non-symbolized reusable artboards: Sometimes I want to change a few small things about an artboard to show either the next step of an interaction, a different status, or a slight variation. Yes, I can quickly duplicate an artboard and make the changes. But if I then modify the original artboard, there’s no easy way to propagate the changes to the new one unless everything in the original artboard is made of symbols. I also don’t want to clutter my symbol library with a whole bunch of artboards that are mostly one- (or two- or three-)offs. I’d love to be able to tie an artboard copy back to an original and have it reflect any changes made to the original while preserving differences as well. (I know there are some HUGE technical hurdles with this request, but it wouldn’t be a wishlist without at least one unicorn.)
• Symbol anchoring and masking: Finally, I’d love to see symbols become more aware of the layers around their instances. For example, if I “anchor” a symbol instance to a text layer, I’d love to have that instance move up or down as the text layer grows or shrinks. Similarly, I’d love to be able to use instances as a mask for layers above them from time to time.

Dive in to further options:

Here are a few more great resources if you want to get better about organizing your files systematically:

• Best Practices for Organizing Your Sketch Files
• A Better Sketch File, a Better Designer, a Better You
• How to Organize Your Design Files for the Perfect Developer Handoff
• How do you organize your design files?
• How to Organize Files in a Design Agency