Sketch Best Practices for Professional Design Teams
Modern design is iterative, collaborative, and cross-functional. Design teams have grown. Powerful design tools and design systems scale designer effort and increase design velocity. Productivity bottlenecks lurk in design workflows. Employing basic Sketch usage guidelines can smooth over many of these bottlenecks.
The Designer’s Evolving Mindset
With the evolving nature of a designer’s job and workflow, the definition of deliverables and completing tasks also evolves. Static images, interactive prototypes, and documentation are still critical. It is now important to create and track design files in an organized, team-centric fashion so other designers can review, consume, maintain, and extend your designs. The designers’ new mindset includes the previous asset deliverables as well as an adherence to communal norms in crafting the source files that generate those assets. This perspective is a given for modern software engineers. For design teams to scale their impact, designers need the same mindset.
Version Control Systems
Using Sketch with a version control system (VCS) allows designers to work together in parallel with a centralized source of truth. With version control, feedback is contextual, stakeholder collaboration is easier, and the design process scales.
The most common Sketch VCS used today include Abstract, Plant, Kactus, and Git. The Sketch product team announced a “Sketch for Teams” beta feature to “track every design iteration with built-in, automatic versioning”.
Choose the VCS that fits your needs and specific requirements. Please, just use one.
Follow a Naming Convention
There are a large number of objects in Sketch. The VCS has more objects. It is crucial to follow an agreed-upon naming convention. Following your chosen naming convention is more important than the naming convention itself. Naming conventions make objects easier to find and can signal the object’s type.
Common naming conventions include camelCase and snake_case. If an object’s name needs a date stamp, use ISO 8601’s “YYYY-MM-DD” format. For enhanced coordination with your software organization, leverage their naming conventions.
The special cases are symbols, layer styles, text styles, and exported objects. These objects’ naming conventions follow Sketch-specific guidance that provides workflow benefits. They are discussed below in context.
Use Pages to Organize Design Topics
A Sketch document can contain any number of Pages. Each Page has an infinite Canvas where designers can place content. While it is tempting to place everything on a single page, this quickly becomes unwieldy and causes performance issues.
Distribute content across different pages in whatever way makes sense for your project. Examples include pages for specific target devices like:
- Desktop
- Tablet
- Mobile
or for specific, separable workflows within an app such as:
- Signup
- Home
- Profile
- Settings
Organize Artboards Logically
Artboards are powerful content containers. Each artboard lives on a page’s canvas. Use artboards for a workflow’s different states, a web page’s different responsive sizes, and different mobile design sizes. One way to organize artboards is for each horizontal row to represent different states of the same view while later rows convey subsequent steps in the workflow.
Sketch does not force specific placement or spacing for artboards. Your team needs specific rules on how to organize your artboards. With communal rules, an artboard’s location conveys its purpose. Specific designs are easier for team members to find.
Sketch plugins help designers follow the team’s standards and ensure consistent artboard layout. Examples of these plugins include Sketch Artboard Manager, Align Artboards, Symbol and Artboard Organizer, and Arrange Artboards Hierarchically.
Use Layer Styles & Text Styles
Layer Styles encapsulate style attributes like fills, borders, and shadows. Text Styles store text properties together in a similar fashion. Layer and text styles provide consistency and reuse across layers. When updating a style, these changes propagate to all layers using the style.
Style Naming and Organization using “/”
Layer Styles and Text Styles have special naming considerations. When a slash ( / ) appears in a style’s name, Sketch treats this as a grouping mechanism and displays the contents hierarchically in Sketch’s UI. Use this mechanism to reduce clutter in some Sketch menus and guide designers to specific collections of styles.
All Layers Need Purpose and Useful Names
The Layer List contains all layers on the current page. Convey a group’s or layer’s purpose by their ordering in the layer list. Name each group and layer to describe its function. Ensure there are no empty groups, groups with only a single layer, or layers that serve no purpose.
Remove Unused Style Attributes from Layers
All layers have style attributes like fills, borders, and shadows. Through iteration and revision, layers can end up with unused attributes. The layer has inactive attributes that could cause confusion. Remove these unused layer attributes. Plugins like SketchCleaner automate this process.
Symbols
Use Symbols, Overrides, and Nested Symbols
Symbols provide power and flexibility. Symbols allow design object reuse throughout a document.
Symbol Overrides provide customization for symbols while maintaining the master symbol’s core design. Common overrides include custom text and icons. Layer and text styles provide powerful override options. For example, override layer and text styles to show different states of the same object.
Nested Symbols provide enhanced power and flexibility. Create a nested symbol by placing a symbol instance inside a master symbol. Along with simpler properties, symbols can be overridden. A nested Symbol can be overridden with another Symbol that is the exact same size. Swapping out an active icon for a disabled icon is a prime example of a nested symbol override.
Symbol Naming and Organization using “/”
Like layer and text styles, create groups of symbols by placing slashes ( / ) in their names. Sketch’s UI displays submenus for these groupings. Providing this organization guides designers to the symbols they desire and reduces UI clutter.
Create the Simplest Symbols
Always create the simplest symbol possible. To build complex symbols, decompose complicated symbols into their component parts. Create each part as its own symbol and combine them into a nested symbol. Overrides and nested symbols result in fewer symbols and more maintainable symbols.
Symbol Override’s Naming
A symbol’s overridable layers appear in the Inspector’s Override panel. Choose a layer name that describes the layer’s purpose. For example, use “Label” as the layer name for a button’s text.
It is important to coordinate layer names for symbols that will be swapped out for one another. For example, use the exact same text layer names for “Button/Pressed” and “Button/Hovered” symbols. When swapping these symbols for one another, Sketch will keep the text label override.
Explicitly and Correctly Set a Symbol’s Overrides
Any text, image, layer style, text style, and nested symbol in a symbol can appear as an override. But you will not always want every possible override to be an override. Manage a selected symbol’s overrides in the Inspector. Decide which overrides to make available to designers utilizing the symbol.
Make Overridable Symbols the Same Size
Nested symbols allow designers to override a symbol with another symbol. Both symbols must have the same exact width-by-height dimensions for this to be an option.
Icons are a common symbol type to override. Create standardized groupings of square icon symbols with the same dimensions. (The icon symbol’s contents do not have to be square but the symbol itself does.)
Create a Clean and Consistent Overrides Panel
The list of items in the Inspector’s Overrides panel appears in the order they appear in the Layer list. Organize the layers in the order designers expect and find most useful.
Create the Tiniest Version of a Symbols and Test It
It is common to resize symbols for specific needs and circumstances. This is especially true for Nested Symbols. When creating a symbol, take care to align and distribute a symbol’s layers to ensure the symbol resizes as expected. Create the smallest reasonable symbol and test how it responds when made taller and wider.
Consider having a specific quality page for symbols. Use this page for symbol instances that are taller, shorter, thinner, and wider than the master symbol. When updating symbols, check the quality page to ensure the symbol is resizing as desired.
Use Generic Placeholder Data
For overridable symbol layers, use placeholders that remind designers of the override’s purpose. For text, use a word or two signaling the expected phrasing. For images, use a generic image that reminds designers to override it. For layer styles, use a fill that stands out like magenta (#FF00FF) or chartreuse (#7FFF00) to remind designers to override it.
Use Sketch Libraries
Sketch Symbols are the most powerful feature to scale design effort. Libraries are a close second.
Sketch Libraries increase consistency and collaboration across designers. A library can be any Sketch document that contains symbols, layer styles, and text styles. Other Sketch documents can include a Sketch library’s contents. When revising library content, a notification appears in documents using the library’s revised content. Preview changes before updating revised content. Libraries ensure designers are using up-to-date versions of the team’s symbols and styles.
There are many ways to share libraries. Store your libraries on a shared drive such as Dropbox or placed in a Github repository. Upload your libraries to the Sketch Cloud as a Shared Library. If Abstract is your VCS, place your libraries in Abstract as Linked Libraries.
Use Varied and Realistic Dummy Data
Using simplistic data often fails to generate designs that address real-world use cases. Using a range of realistic data exposes a design’s pros and cons to meet business requirements. Testing with complex data uncovers hidden development requirements for stakeholders.
Assign randomized content to text and image layers using Sketch’s Data infrastructure. Leveraging this infrastructure, plugins like Sketch Data Faker, Data Populator, and Sketch Data Studio provide a wide variety of structured, randomized data. You can even build your own dynamic data sources.
Use Guides to Design with Precision
For each Artboard, codify your grid, padding, and margins using Sketch’s Guides. Rulers must be visible to create or modify guides. Guides help designers follow layout conventions and any layer moved close to a guide will snap to it.
Guides are only visible on the canvas. Guides are not part of the design and will not appear in exported assets.
Lock Background Layers
There are layers you will place once and never move. Examples include background images that cover the entire screen or headers, footers, and navbars that occupy specific screen locations. Lock these layers so they cannot be accidentally selected and moved. For example, a mouse’s selection rectangle cannot select locked layers. Select locked layers in the Layer list if you need to move them.
Exporting
Exported Asset Naming and Organization using “/”
Use slashes ( / ) in naming exported assets for organizational purposes. Symbols, layer styles, and text styles follow the same convention. Sketch converts slashes into folders when exporting assets. For example, exporting a “Buttons/Play” artboard results in a graphic named “Play” inside a “Buttons” folder.
Export Artboards not Symbol Instances
Every symbol has a specific width and height. The contents of a symbol can be bigger or smaller than the symbol’s defined width and height.
Exporting a symbol instance with content smaller than the symbol’s defined size generates a graphic with the content’s size. To control the exported graphic’s size, wrap a symbol instance in an artboard. Exporting an artboard generates a graphic the size of the artboard.
Let’s use a “Back” icon symbol as our example. The Back icon’s symbol instance is 24x24. The Back icon’s content is 15x24. Exporting the symbol instance generates a 15x24 Back graphic. Exporting the 24x24 artboard containing the Back icon symbol instance creates a 24x24 Back graphic.
Compress Exported Graphics
Compress exported graphics automatically with a Sketch plugin like ImageOptim or SVGO Compressor.
By integrating these guidelines into your team’s design workflow:
- Your team’s designs will be more consistent
- Your design team will be more confident, efficient, and cohesive
- Your stakeholders will have confidence in your design team conquering future challenges
