10 Tips to Design Sketch Files at Scale
I want to share how you can methodically design products at scale inside Sketch. I have learned how to do this the hard way by designing the Sketch UI Kit for our open-source design system called Evergreen.
1. Configure your Sketch to sane defaults
Disable Rename duplicated layer in preferences.
Change the move objects default to 8px — if you are using the 8px grid.
Remove all default styles from your default layer
2. Group your layers and name your groups
Groups are the most powerful concept in Sketch for organizing your layers. A better file organization leads to better and more consistent designs—it’s as simple as that.
Use groups for compositions instead of symbols
Symbols work well for atomic components, not so much for groups that have many text layers. Focus on creating groups before using symbols for more complex components.
3. Use transparent layers (bounds) as the base of your group
- This will make it easier to align the contents of your group
- This will make it easier to understand the full width of a component
- This will make it easier for design handoff
- This will make it easier to create lists of the component
4. Use colored bounds to systematically build out layouts
Start with a red color of 10% transparency for you background of bounds when building complex compositions to easily compose layouts.
Select all the bounds when done and remove the fill
5. Use symbols for atomic components
Symbols in Sketch is a great tool to quickly abstract away atomic components such as buttons, icons and inputs. Avoid symbols for components such as dialogs, tables, menus, layouts and other more complicated compositions.
When using symbols, use a slash / to create groups
Use symbols groups for states of a component such as:
- Checkbox / Checked
- Checkbox / Default
- Checkbox / Disabled
- Checkbox / Indeterminate
Use symbols groups for variants of a component such as:
- Button / Primary
- Button / Danger
6. Create scoped or throwaway symbols for quickly prototyping lists and tables
Some top level groups you can use to keep your symbols nice and tidy:
- Ignore / Space Helper: use the ignore namespace for annotations within the sketch files.
- Scratch / Special Table Row: use the scratch namespace for anything you are playing around with, almost like a scratchpad.
- App Specific / Destination Item: use the app namespace to create specific components that are too specific for the design system, but are useful to for the application or marketing page you are working on.
7. Use text styles for headings, paragraphs, text and links
When you encounter an exception that is not in the system, detach the text style
8. Use layer styles
Within our design system most styles used within a symbol (component) are also available as a layer style. When symbols don’t make sense layer styles are useful to add states and variations.
9. Use the keyboard to set sizes and positioning
It can be tempting to use the resize handles and your mouse to position and resize you components and layers. However, it’s hard to get the exact values that you want. Getting used to the keyboard and doing math with operators might be a quicker way to design to get accurate specs. Personally, I rarely touch the resize handles with the mouse.
10. Get some plugins to move faster
Sketch runner
Sketch runner is one of the best tools to quickly find and access symbols in your document. Sketch runner will also allow you to install a ton of plugins with a single click.
Automate plugin
My other favorite plugins
Install all of these with Sketch Runner, like the example above.
Conclusion
I believe the above tips can help you be methodical about your design implementation process and allow you to design products at scale inside of Sketch.
Want to learn more about Segment Design? Check out www.segment.com/design!
P.S. We’re hiring! Ask me about opportunities @ Segment
