Design Systems, preparation: Software, services and plugins

Getting ourselves ready to create a free design system called Dezin.

About this series

What is it?

I’ve been creating and using design systems for over 5 years and you can read about that journey here:

It’s time to take everything I’ve learnt over this time and create Dezin with a series of video tutorials that will help you master Sketch and learn how to create your own design system along the way.

A practical approach

I’ll keep things practical and won’t weigh you down with a lot of documentation before anything even exists. The principles and guidelines will be informed and formed as we go.

About me

I’m a Dad and when I’m not at work I’m all about my wife and daughter. When they’re asleep, I’ll be working on Dezin and should get a tutorial out once a week.

When you consider the nature of design systems it’s going to keep growing and continue to be refined over the months that follow. If you stick with it and stay for the long run, it’ll be very rewarding… so let’s prepare 😃.

Preparation

If you Google “Quotes about preparation” you’ll get a few indirect results before finding this gem:

Give me six hours to chop down a tree and I will spend the first four sharpening the axe.
- Abraham Lincoln

To set ourselves up for success we’ll talk about discipline and the software, plugins and services you’ll need for this series.

Discipline

The most valuable thing you’ll learn in this series is discipline. Building an entire design system inside Sketch that has hundreds if not thousands of individual elements, is robust, clean, easy to use and brings a new level of efficiency to your company or project is a big challenge.

The ability to follow a workflow and each step in its process will turn your team into a design symphony where anyone can be the conductor.

There is intent behind everything we’ll do. From workflow, naming conventions, folder and layer structure, to colours, shared styles and symbols; When it all comes together you’ll become a more efficient and purposeful designer.

Sketch

Dezin will live inside the most popular design tool, Sketch. If you’re not already using it, do yourself a favor and buy a license for it. It’s helped renew my love for design, given Photoshop back it’s day job of being a photo editor and became my go-to app for illustration.

Sketch Libraries

We’ll harness the power of Sketch’s Libraries feature, make a set of external libraries you can daisy-chain to use in a new project and have all of the linked libraries symbols ready to go.

You can read more about this approach here:

Open Sketch, then…

Customize your toolbar

Take the tools and actions you use more often and place them in your toolbar by right clicking or control clicking on your toolbar, selecting Customize Toolbar and dragging items to it or from it. The one I use the most is the symbol icon, it becomes a great way to place symbols and build layouts from one place.

I turned this

The default Sketch Toolbar.

Into this

Where I can now add a Symbol, Styled Text or Create Symbol. Easily place a Rectangle, Oval, Line, use the Pen Tool, add Text, a Slice or an Artboard and edit paths with the Scissors.

We’ll rely on these less as we move through this tutorial series and start learning some new keyboard shortcuts. Speaking of which…

Customize your keyboard shortcuts

If you want to override Sketch’s keyboard shortcuts with your own, follow these steps:

  1. Open the System Preferences app
  2. Select Keyboard
  3. Select Shortcuts
  4. Select App shortcuts
  5. Click the + icon
  6. In the drop down menu select Sketch.app, enter the exact name of the menu item you want to make into a shortcut then in the last field press the keys you’d like for the shortcut
  7. Select Apply

You’ll now be able to use the shortcuts that make you more efficient. I turned the existing ones that move a layer forward or backward and show your grid and guides into the ones I had used in Photoshop for many years.

Plugins

The Sketch community has spent years giving us more functionality with plugins. We’ll install a few that will help us achieve those out of the box tasks and save time.

Sketch Runner

Run menu commands, jump to pages and artboards, insert and create symbols and shared styles and install plugins. Once installed we’ll use it to install all the plugins in this list.

Auto Layout

We’ll use Auto Layout by Anima, the original plugin solution for Sketch that creates responsive layouts and pinned nested symbol setups when Sketch’s own resizing options aren’t enough for our requirements.

Renameit

Rename multiple layers at once. This one is a massive time saver.

Stark

Check the contrast of two layers and simulate colour blindness, great for accessibility.

Sketch Style Libraries

Import all of your typography and shared styles from a Sketch library into the file you’re working on. A great way to keep up to date with your design system and distribute it’s styles with team.

Versioning

We’ll be using Abstract to host the master Sketch files. It acts like Github for designers. Their free account is all you’ll need to manage your own design system.

This is an optional step but if you’re working with multiple designers I’d suggest you use it. It will allow you to quality check new commits to the design system and keep the master Sketch file clean of duplicate symbols and shared styles.

Sign up for an account, download the desktop app and get ready to create your first project so you’re ready for when I finish the next part of this series.

Congratulations!

You’re ready for the rest of the series where I’ll be adding new parts every 1–2 weeks:

For updates:

Follow me here at Medium, Twitter and YouTube.

Like what you read? Give Christopher Deane a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.