A cleaner way to use Sketch?

It starts with how we are using Sketch as a team, both designers and developers could follow good practices to ensure that:

• we are understanding each other by using the same language
• we will be ready for small changes like adapting the size of a text, changing the font of every text in a button or even the main color of the app

This article is a thought based on experiences in couple projects working closely with different team as an iOS engineer. At some point, some text styles were offs, it wasn’t the one that was designed in Sketch. Where did we failed? Well, there is couple identified issues:

• we had a lot of text styles, are they all used? Where exactly?
• we didn’t define those in one place and re-use it in our implementation
• text layers weren’t using a single definition/name, it was “this label should have a kern of 0.4, using font Arial with size 14 and a blue color”

Define and use text styles everywhere

Every text layers should use a text style, therefore, a text style should be defined for every variants needed in the project.

Text style are defined by typeface, weight, color, size, alignment, spacing.

It’s a simple rule which require us to be meticulous. It’s also dangerous because a text style can be altered from any layers. But in the same time, it will allow us to apply changes accross the whole project for a specific text style?

Each variant needs to be defined

So when we add a text layer we should use a defined text style if possible, if not, we will have to create a new one. But is the new one really different from the existing one? Can I, Should I, limit my usage of different text styles?

This good practice will make your project more consistent and easier to apply changes. You will not have to go through different pages, artboards and layers just to change the color and size of every text contained in a button for instance.

Define shared style for colors

Color as style guide

In a same way, colors used in your app should be defined as shared style and used as much as possible.

List them in a specific page

By doing that, you will have a reference that developers should use to define them.

Experience it: You can try on your latest sketch project, let’s take the main color and change it. How much efforts do you need to update it to every artboards? Do the same with a text style, change the size to be bigger..

Have generic name based on the usage

And use this name to communicate inside your team

It’s tempting to name it with one of the variants like the font name, size or even the color but by doing so… when you will need to change one of these in a specific text style, you will also need to update the name right? What’s the impact in the dev side? Maybe he was using this name and he will need to update it in each file who were using the old name.

But if you figure a good way to have a generic name for text style or color, you will reduce the amount of effort.

Developer note

- Hey let’s refactor it, those text style are similar. There is only one thing which is not the same between text style 1 and text style 2!

Then, you might want to have one method with a parameter which will be give you back either the definition of text style 1 or text style 2? Like:

setup() {
   titleLabel.attributedText = NSAttributedString(
      string: "Goodbye everyone", 
      attributes: TextStyle.textStyle(fontSize: 12, color: Color.blue)
   )
}

By doing so, we are allowing mistake by passing the wrong argument? In this case, we need to play it dumb and we want just one argument: the name of the textstyle.

setupWithTextStyle(textStyle: TextStyle) {
   titleLabel.attributedText = NSAttributedString(
      string: "Goodbye everyone", 
      attributes: textStyle.TextStyle1Attributes
   )
}

What now?

I’m currently working on a sketch plugin. It’s still in progress, but the idea is to be able to export defined colors (as shared style) and defined text styles as code. So far, it’s exporting those as swift code.

thomas-sivilay/Sketch-Pal