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.

Sketch preferences: Layers

Change the move objects default to 8px — if you are using the 8px grid.

Sketch preferences: Canvas

Remove all default styles from your default layer

Sketch > Layer > Style > Set as Default Style

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.

Dialog component
Select Menu component.
Table component

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
The text layer exists above the bounds
Hold the Alt key to see redlines. Making alignment easy.

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.

Use a transparent red color for your bounds to easily compose layouts

Select all the bounds when done and remove the fill

Hold command + shift to select layers across different groups

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.

Use symbols for atomic components

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
Use a slash to group your symbols
Using the symbol in Sketch

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.
Creating a App Specific symbol

7. Use text styles for headings, paragraphs, text and links

Using text styles in Sketch

When you encounter an exception that is not in the system, detach the text style

Detach from 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.

Using layer styles

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.

Quickly comply to the 8px grid by simply doing math in the inputs
Use shift-Up/Down to change the value by 10

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.

Using Sketch Runner to insert a symbol

Automate plugin

A lot of common pain points are fixed with the automate plugin
Install Automate with Sketch Runner

My other favorite plugins

Install all of these with Sketch Runner, like the example above.

Align Artboards
Batch Create Symbols
Symbol Organizer
LayerRenamer

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