Behind The Scenes
Published in

Behind The Scenes

5 Steps for Creating a Design System

Insights on how we made our design system in Sketch

Conestoga College Doon Campus Design Foundations Studio
Circuit’s Universal Menu

About Circuit and our design problems, challenges & goals

What is a design system and how does it help?

Table of pros and cons of a design system (chart made with our design system!)

How to create and organize a design system

The end result could look something like this.

Step 1 — Audit your website or app

Step 2— Organize pages

The Atomic Design method (left) and the Pattern Page method (right)
How we organize our design system
The finished Symbols page
One of the Style Guide pages

Step 3 — Create layer styles and text styles (skip this step if you do not have Sketch)

Circuit’s layer styles
Circuit’s text styles

Step 4 — Create symbols/components

Override panel of a card component
Always scale a new symbol to test!
Mockup of a mobile screen showing how overrides are applied

Step 5 — Ongoing updates to the design system



The Circuit Virtual Tours team shares knowledge and best practices about developing virtual experiences and interactive maps.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store