Creating a first Product Design System in Sketch – uxdesign.cc

My journey on creating the first Product Design System at Agorize.

The first days

I remember the first day I joined Agorize, I asked the PM if there was a styleguide I could use in Sketch. He told me we didn’t have any styleguide and only had some screens designed, most of them in Photoshop.

The problem is that we have a product with a consumer-facing side and a client-facing side, and that they were based on 2 two different front frameworks. He told me that my main mission was to find a way to visually merge the 2 parts of the product.

I understood I will have to make a styleguide, to have one source of truth and make our product consistent, while working on new features planned in the roadmap.

Two weeks later, another designer joined the team, so we decided to quickly make a first styleguide. It looked like this:

Our first design styleguide

We used this sketch file as a template starter file, but we didn’t use symbols at this time. After some weeks working together, we started to face some problems. We had to design many features and faced many inconsistency issues as the product was becoming more complex. It was also often difficult to stay synced together, and with developers.

So we decided to take some time to find a solution to those problems and improve our workflow. We were loosing too much time doing always the same small tasks. At this time, I had heard about design systems but hadn’t worked on one.

The day we started to build the system

I was really inspired by design systems from big companies like Atlassian, Salesforce, Carbon (IBM), Buzzfeed… so I started to learn everything about design system to understand how to build one. I also searched for the best design workflow and got really inspired by all the great content written on Medium.

The Unicorn Workflow, Design to Code with Atomic Design Principles and Sketch
Wish your design could be as modular as your code? Click through to find out how to make it happen!medium.comSketch symbols best practices (now that nested overrides are a thing)
Version 2: Best practices for designing high quality reusable symbols in Sketch.medium.com
Mirrored atomicity: designers and developers speaking the same language
How to make it happenuxdesign.cc
The full stack design system – Inside Intercom
UI methodologies like Atomic Design bring logic and structure to individual screens. Now it's time to extend that…blog.intercom.com

It was time for us to start making things. Here’s the process we followed:

Step 1: UI Inventory ?

We started with an UI Inventory. I searched and listed all the missing components in our style template.

Form Components To Do list sample

Step 2: Create Spreadsheet to track progress ??

I then created a Google Spreadsheet to track progress of the different steps (design, documentation, code snippets…) for each item. Obviously, this spreadsheet has to be shared and updated.

Google Spreadsheet to keep track of the progress

Step 3: Design missing simple components ✍?

After that, we started to design the missing simple components. We only design atoms & molecules at this time, so we can use them once they are converted into symbols to build organisms later.

It was a long process but we finally designed almost all the components.

Step 4: Convert atoms and molecules into symbols ??

We convert only atoms, molecules and some organisms into symbols and nested symbols.

We use the plugin Auto-Layout to managed the spacing and flexibility. We now try to replace it with the new resizing feature in Sketch.

Step 5: Build organisms and page templates with symbols created ??

Trying to get that card resizable ?

We try to make our components responsive with Auto-Layout and Sketch resizing feature, so we can reuse those components when designing for others devices or layouts.

Overrides for a symbolized card
A page template. Only for recurrent pages

Step 6: Create a shared Design Library to collaborate with other designers ?

To share all the symbols with the other designer and create a living styleguide I can share with others teams, I first used the plugin Zeroheight.

This plugin is fantastic, it automatically generates an online styleguide with our Sketch components.

But now Sketch Libraries is out, I don’t know if we’ll keep using Zeroheight (sorry guys).

Step 7: Write documentation and best practices ✍?

Write documentation (specifications, guidelines, best practices…) with other designers and engineers to make sure everyone is on the same page and agree on them.

We are currently writing our doc so I’ll edit this part or write another article soon.

Step 8: REPEAT ?

Keep building and maintaining your Design System together.

The outcome (so far)

This is how the design system looks like for now.

Preview of Agorize Design System

All artboards are organized with Atomic Design principles in mind, and by categories like Colors, Icons, Illustrations, Form components, Navigation etc…

Agorize Design System in Sketch
Form Atoms in Agorize Design System
Icons in our auto-generated styleguide on Zeroheight.com

We still have many things to do so keep in mind it’s a work in progress ?

Conclusion

Working on this design system took a lot of time, energy, and headaches, but I can already see that it already significantly improves our workflow, consistency across our products, and collaboration.
We still have a bunch of things to do but we know we are on the right track.

Here are the main lessons I’ve learned:

  • Don’t try to convert everything as symbols. You should only convert atoms, molecules, and some organisms.
  • Get inspiration from others, but make sure your design system solve your own problems.
  • It’s ok to not have a perfect design system. It’s a product that is always in movement, you will always have to improve it, update it and maintain it.
  • Communicate on it and involve others early in the process.
  • Documentation is key. When something is written down, you can’t discuss it, you can’t make mistakes.

I’ve also learned a lot about creating products that scale, mastering Sketch tricky features and Sketch Plugins, and collaborating with engineers.

Author: Alexandre Trimoulet

Collect by: uxfree.com

Comment

Top