Like all design workflows, ours is ever evolving. Here’s an example for an iOS project.

Pages

At the top of the list is the symbols and styles page, distinguished with a two forward slashes. Production screens get double pounds, and throwaway stuff get two hypens. Don’t ask me how I came up with those, they change all the time anyway. :)

// symbols & styles

Colors

The colors don’t include hexes since those are time consuming and can be generated for developers with a plugin or Avocode. Included in the colors artboard are usage rules (e.g. Medium Gray is used for secondary text and icons). Determining colors first helps everything stay consistent. I prefer a smaller color selection for simplicity and consistency, and to avoid questions like “which of the 12 shades of gray is this line supposed to be?”.

These colors are dropped into the Document Colors panel for quick access.

Type Styles

Every type style lives on the artboard and is turned into a document text style. Yes, creating these is a pain. But it’s worth it. One, it means every piece of text has a style, and two, I can quickly change styles throughout the doc with one action. Being disciplined with this helps me rein in creating too many styles.

Branding and Icons

Sketch now allows you to nest symbols within symbols, so icons are all used as symbols in our workflow (artboards on top as artboards as you can see above). Again, this is a pain to setup, but the work upfront allows you to see all of your icons in one place and rapidly change them throughout the app. Like type styles, it also encourages discipline in icon consistency.

Symbols

Below the style artboards are all the symbols. Each symbols is nested in a folder (e.g. form/option-unselected). Each column represents a different folder (header, form, list, etc.).

Since nearly every element is a symbol, the folder feature is indispensible for organization.

Symbols can be added through the symbol menu above, or by selecting an existing symbol and selecting the dropdown on the right panel as seen below (nice for switching form styles, for example).

## screens iphone

Depending on the project size, screens may be broken up into pages by flows or device. For smaller projects I do all iPhone screens on one page and all iPad screens on another. For larger projects or bigger document file sizes I break down pages into screen flows (e.g. login, onboarding, settings).

When the project is on page (which I prefer, so I get a birds-eye view of the whole project) I break up flows into sections with labels. This saves me from spending time on maintaining a separate screen flow document.

I can also quickly create an artboard around an entire flow for client presentation:

While iterating, I screenshot feedback from the client right next to the screen to be worked on:

One perk of using symbols and text styles: beautiful layer lists.

— — screenshots

This page is for collecting screenshots, which may include feedback, old UI, design inspiration, and photography assets. I’m not a digital hoarder so I go through this every so often and delete anything unneeded.

— — exploration

This page is for iteration, exploration, and storing unused designs I may need later. Since ##screens iphone is for production, this page allows me to copy an artboard many times, making small changes to each version.

Like the screenshots page, I like to periodically delete screens I no longer need. This helps file size and load time.

So there you have it. I get pretty excited about workflow improvements so please share what you do!