Naming in Sketch done right: text & shared styles
Naming symbols and shared styles poorly done will not only distract you and make your search unnecessarily through a file for a zillion of times, but also quite surely ruin your teamwork.
Making your Sketch files clean seems a bit of a pedantry until you start to work for large scale projects. Then the way you name your symbols and shared styles do influence not only the work of other designers in the team but also the developers who later on turn your design into a working application.
In my career, I’ve seen many quite crazy naming conventions designers used, but the most frequent case was no naming convention at all. However, it is not rocket science to create a naming convention that will speed up your work and keep your design neat even if you are far from being a prig.
What do you need to name in Sketch?
There are four main object types in Sketch that are worth naming reasonably because of the impact it has on the workflow. These are:
- text styles
- colors (layer styles)
- symbols
Naming conventions: what is BEM?
A thing that UI, UX, graphic, or product designers, no matter how called, can surely learn from front-end developers is taming the creative chaos by applying some simple and usable structure. And this is how naming conventions work.
There are a couple of main naming conventions that are commonly used in front-end development such as Atomic Design, OOCSS, SMACSS and others, but the wide-spread conventions that are super easy to apply for working in Sketch is BEM.
BEM is an abbreviation for the “Block Element Modifier,” which basically is a self-explanatory definition of what is it all about.
Block is a stand-alone element that has a meaning on its own. Element, however, does not have a standalone meaning and is knot to the block in order to gain meaning. The modifier though changes its behavior or appearance. Hence the naming convention for any new class that needs to be created:
.block — element-modifier {css!}
That allows us to quickly understand the relationships between classes and what is what in the code.
What does it mean for designers?
Obviously, designers do not (usually) chose CSS as their primary design tool — an industry-standard in a large number of companies is Sketch, which is quite flexible in terms of creating naming conventions for any shared items — be it text styles, layer styles or symbols that one wants to create. Basically, the only rule that one has to follow is that in order to create a path from a big category to a subcategory and item or item with modification, one has to name a new shared style like:
category/subcategory/item/modification
Reinventing the wheel is usually a pretty costly and ineffective way of dealing with stuff, therefore instead of creating a new custom naming convention, you can use BEM and name your styles the following way:
block/element/modifier
Super simple.
Naming text styles
In every typographic system, one needs to define headers, body text and different functional kinds of text (f.ex. such as label text style). So it works for the text styles you can define in Sketch to make your design consistent.
Why?
The major advantage of creating neat text styles at the beginning of the project is that what is key for well-designed typographic systems are the proportions between its different elements — the h1 to h2 ratio, h3 to the body text, body to label text and so on.
If you define that on the beginning, you can easily create a couple of screens of different text usage (f.ex. homepage with no body text at all, article page with a lot of body text, settings with small headers and sign up with labels, hint text, text links and headers) in order to check how the proportions of your text styles work with one another. Does something need to be changed? You change the text style settings and the text style is fine everywhere throughout the whole design.
How?
First, you have to define the blocks — the elements that have standalone meaning in your typographic system. I recommend to use standard HTML naming for that — the big header gets the name “h1”, smaller header “h2”, body text “body,” label text “label,” and so on.
However, it’s likely you will need to apply something that goes in pair with your block — element. This can be a size like on the example above or color like on the example below. It’s also quite likely you’d like to have a couple of modifiers to that element — f.ex. have it in multiple colors or versions of alignment.
Basically, to decide which property you set up as an element and modifier, you have to use a bit of your common sense and design expertise. The hierarchy that I use is that the change of size is more significant than a change of color, and a change of color is more significant than the change of aligning type.
To nicely create the tree of styles, just name them “block/element/modifier” or look on the following example:
Naming shared styles
Why?
Shared styles are extensively useful things in Sketch — basically, it’s a feature that allows you to save properties (fill, border, shadow, other effects) of a layer and then reuse it in your whole design. Owing to that, you do not need to create five symbols for buttons if you’d like your buttons to go in 5 colors. You can create share styles for those colors that you’d like to use, create one style for symbol and then select them from overrides panel:
How?
Just as with text styles, first define the basic property that gives your layer style the standalone meaning. Usually a color/gradient = block. Then you can have a need to add another property that changes the purpose of usage or just changes the looks significantly (element), f.ex. definition if the color is fill or outline if there is a shadow to the layer and so on. Then you define modifiers — f.ex. what are the types of opacity that you nee, what are the shadow types, what are the outline weights, and so on.
Naming Symbols
Why?
With symbols, we come to the point when one can experience the true advantages of using the BEM naming convention. Taming the wild powers of “creative” mess (let’s face it — absolute chaos in design files has nothing to do with creativity, just with the lack of thoughtful work organization) pays off, because you start to work so much faster with a bit of initial effort.
How?
The topic is large and worth a separate tutorial (and I am actually working on it), but this example is intended to give you a glimpse of how to work with that. Basically, the component that has some standalone meaning for users is your block — in this case, it is a slider. It consists of elements — a label, a progress bar, and a milestone circles. The elements do not have standalone sens (what would you do with a circle just hanging around?), yet they build the block. Depending on the state of interaction and the context elements come in different modifications — a milestone circle can be checked/active/not checked.
Nesting symbols and naming them thoughtfully are worth another tutorial, which is obviously coming, but should you need some other things to be explained, do not hesitate to write a request in the comments below and share the stories of how naming your Sketch styles right helped you do a better job!
