How to Organize a Sketch Workflow
For many teams that are focused on meeting deadlines and churning out products, it’s difficult to focus on optimizing the workflow. This was the case for the small UX team that I joined at Focus Brands at the beginning of the summer. The one man team was trying to move as fast as possible to develop the websites for all of the brands (Schlotzsky’s, McAlister’s, Auntie Anne’s, Cinnabon, Carvel and Moe’s) by the end of the year.
When I joined as a UX Intern at the beginning of the summer, I stumbled upon the Sketch file shown above that served as a template for all wireframes created for the website designs. There were many symbols for Desktop and Mobile, without much clear organization. Text styles were used sparingly and inconsistently, and many of the individual wireframes were made up of individual components rather than symbols. We also copied many components from one document to another, which created several duplicate text styles. This is an important point — do not copy text with text styles from one file to another unless you want confusing duplicates.
One of my tasks during the course of the summer was to improve the workflow by cleaning up these styles, organizing symbols and just generally making it easier for the team to build wireframes as quickly and smoothly as possible.
Step 1: Clean up text styles
I started out by going through each and every textbox in the entire document and applying text styles to create consistency. These textboxes appeared on dozens of wireframes for various pages and many of them had repeated styles that were identical.
Unfortunately, I was unable to find a tool to work with duplicate text styles easily. I ended up changing the properties of individual text styles to very large sizes and to bright colors in order to identify where they were used, and changing their text styles to match up with the rest of the document.
When I finally had all of my text styles in order, I added new styles for links and error text and developed a style sheet.
The style sheet showed all of the different text styles exactly how they would appear in a mock, making it easy for any new members of the team to understand how to use them when working with the design system.
Step 2: Symbols
The next major issue with the original workflow was that many components were not actually made into symbols, but would just be a group of rectangles, text and other pieces. This made it much more inconvenient to reuse, them since they would be repeatedly copied and if something had to be changed for all versions of that component, it would have to be done manually.
I went through all of the Sketch wireframes and to create symbols out of these groups. Though this was time consuming, the harder part of this was figuring out the name scheme for these symbols. There was a basic hierarchy of symbol organization in place, but it used very general names and with language that was difficult to interpret as a newcomer to the team. So at first, I tried my best to name within the existing scheme. This revealed the next task for me.
Step 3: Symbol Organization
Symbols are a fantastic tool in Sketch, but one of the most difficult parts of using them has to be keeping them organized. After I had created all of these symbols, I walked my manager through the situation and how we could improve to improve our overall workflow. We came up with an organization based on first the platform (Mobile or Desktop) and then the function of different symbols, either having them fit into a specific page, a general page for frequently used components, misc for specific components and Atomic Symbols for components that made up other components.
Here’s a picture of what the hierarchy looks like:
After that, everything was much cleaner overall, but my symbols page was a total mess, extending for what felt like forever. Eventually, I discovered an amazing plugin called Symbol Organizer. It organizes symbols based off of which level of the hierarchy that you choose and you can vary the distance between everything. When you run it, everything is put into nice clean rows and columns that you can easily move through and everything is alphabetized.
The UX workflow can often be an extremely long and arduous process, and throughout it, many miss out on opportunities to optimize. I found myself in a good position to improve the workflow at Focus Brands. When I first started my internship, getting the wireframe done for a single page could take hours, but now it can be done within minutes.
Thanks for reading!
Special thanks to my manager Brian and Neil Sethi.
If you want to keep up with my design journey, follow me on twitter @nikhilrsethi!
