Design Systems: Using Sketch to Manage Rebranding Interruptions

Have you ever planned a five-course dinner party? It starts with selecting multiple recipes, then shopping and preparing all the ingredients to create a culinary masterpiece. But what if in the middle of all the planning and preparing you learn that half of the guests are vegan? Well, there goes the butter, the cheese, the meat; the whole carefully planned meal now needs multiple adjustments! How can you take the recipes curated for this dinner party and make the necessary changes without losing too much time?

Design systems are like recipes; taking many smaller components to build something much larger. So when a branding change requires the need to swap out elements, it’s vital to understand how software can help to make efficient changes.

Sketch, a design toolkit software program, allows you to clearly define and set color fills and typography. Once the new brand guidelines have been identified, the changes necessary will affect your files on a global scale. Best practices recommend laying in the groundwork ahead of time, the following tips will help maintain an agile design system.

Design Systems Elements

Create a color page that outlines your primary and secondary colors, including their defining code (HEX, RGB, Pantone). Above the code include a shape that has the matching fill set.

Once the fill and or border fill are set to your preference, create a layer style of the color.

Now, whenever you create a button, header bar, or any other element, use this layer fill style. When it’s time to replace the primary color from, say a Blue to a Green, return to the color style page. Adjust the fill of the box you created to the new color. Then in the same menu where the layer style was created, update the layer style. This will change the color everywhere the layer style was applied.

Typography

Create a typography style page that defines the fonts, pixel size, and any extra styling.

Using the same menu as the Layer Style, create a Text Style. The naming convention in this process should follow the same as a CSS document for transparent communication when handing off to a developer.

Once you have created your H1 or H2 styles, to change them, it’s the same process as updating the color. Make the desired changes and update the text style.

You should see the changes throughout the pages in the document.

Note that if you have multiple designers collaborating and creating their pages in separate files, it’s best to save the styles as a library file that you can load into Sketch and this will update all linked documents when changes are made.

Nothing in design is ever as simple as a quick swap out. Inevitably, once the new branding is in place there will be adjustments to make on the page level. By following this best practice of creating a shareable library and reference document, you can save time, and hopefully many headaches during the changeover process. The same way developers use CSS to streamline the process to build out a website, Color and Typography styles save UI and UX designers time by keeping their designs well organized.

If you want to learn more about building out a design system or implementing Sketch, please contact our experienced UX team today.