Design + Sketch App — Medium | Christopher Deane

Welcome to an ongoing series of articles and tutorials that will lead to the creation of a free, open source design system.

What is a design system?

To quote Ara Abcarians, a design system is:

Everything. From typography, layouts and grids, colors, icons, components and coding conventions, to voice and tone, style-guide and documentation, a design system is bringing all of these together in a way that allows your entire team to learn, build, and grow.

For the last 5 years, design systems have been a way for the personal and client projects I’ve worked on get designed, developed and deployed more efficiently. Before this I’d design and code responsive sites using Photoshop, HTML/CSS and PHP before integrating them onto pre-built CMS’s like WordPress and Drupal. A process I’d go through every time I started a new project with little of it being reusable.

It was around 2010 that site building frameworks started to surface in online marketplaces like Envato’s Themeforest. Squarespace was maturing and it became easier to “build” a page in a site instead of designing or coding it from scratch.

2012

The more I explored page builders the more patterns I would see. Aside from assigning a header and footer, you would build sections of a page like this:

1. Module — fixed or full width, background image or solid colour, parallax or scrolling.
2. Columns — 12.5%, 25%, 33%, 50% or a combination of these to create the layout you wanted.
3. Components — Cards, carousels, accordions, form fields.
4. Elements — Images, video, illustrations, buttons and icons.
5. Styles — Headings, h1, h2… paragraph text, colour palette, shared styles.

I realised that designing like this needed to be done in reverse. As I researched this the phrase Atomic Design came up and did exactly that. You start with the smallest elements, wrap them in others then wrap them again and again until you end up with a system that can build almost anything you want.

Sounds amazing right? Well, there was one problem. We were still using Photoshop for design while coding modulated, option controlled sections inside sites like Curve Live:

Industrial Design & Product Design Magazine | Curve

In desperation to find a faster workflow I resorted to something a little crazy and crafted my first design system inside Omnigraffle 5.

Here’s what it looked like:

Omnigraffle UI Kit displaying desktop modules.

Then something amazing happened…

2013

Sketch. A scrappy design tool had been taking over UX/UI Design and after trialing it out on a small project we soon found that the workflow we had been dreaming of was here, even if it was really buggy at the time.

I created a Sketch UI Kit that included brand, colour palette, typography and a suite of symbol based modules, cards and elements.

Sketch UI Kit with sections broken out into separate pages and shared styles.

Our designers and developers were happy and we could:

• Wireframe at high fidelity quickly
• Prototype near final screens and get client feedback on tangible designs
• Commit more time to creativity and interactions, the quality of our projects increased
• Development handover became easier and more accurate

We had a design system and the next step was to turn it into a development platform.

2015

The goal was to create a backend framework and align it with the Sketch UI Kit in a development led process.

Sketch was now a key part of a development platform, not just a tool for Experience and Visual Design.

When you have the Sketch part of this process already fleshed out into a UI Kit it’s easy to update it with a new clients assets:

• Replace the logo and colour palette
• Update typography
• Create new icons
• Modify existing symbols and modules to match the clients requirements

2016

What a great year for designers everywhere. So many amazing things happened in 2016:

• Sketch launched nested symbols
• The auto layout plugin from Anima turned those nested symbols into responsive cards and modules
• I was beta testing Invision’s prototyping acquisition of Silverflows, prototyping inside Sketch was on the way and then they released the Zeplin-like Inspect
• Atomic.io, an online prototyping tool became good enough to do delightful object level interactions and screen transitions
• Airbnb Design released Lottie, a library that helped convert after effects comps into native app animations

Along with tools like Figma, Principle, Framer, Flinto, Marvel, Origami and Webflow (just to name a few) it had never been a better time to explore, try things out and have fun while you worked.

I changed companies and created a Responsive Web, iOS and Android Design System for a Fintech company based in Sydney. It included it’s documented counterpart in the form of a Digital Assets Portal that resembled Yelp’s Style Guide and other public design systems like Westpac’s Gel.

The web section was converted into reusable Web Parts inside Kentico CMS, were documented then delivered to the client to give them more control over their digital properties and the systems that built them.

2017

The Design System we were using evolved every time our clients requirements couldn’t be met by the existing system. Continuous improvement became a methodology, where every update was absorbed into the overall design, development and documented ecosystem.

After a few months I started contracting for one of the “big four” Australian banks. It’s here where this article ends and our journey to an open source design system starts.

Next up…

Design Systems: Preparation – software, services and plugins.

Design Systems: Preparation – software, services and plugins.

For updates:

Follow me here at Medium, Twitter and YouTube.

5 years of Design Systems. A personal journey into scalable design was originally published in Design + Sketch on Medium, where people are continuing the conversation by highlighting and responding to this story.