Switching to Figma & Building a Design System
What is a Design System?
A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
Up until 2017 we had been using Photoshop and Illustrator for designing. We had a pattern library for Sports Interaction, a series of files containing various details on repeated site elements and brand guidelines. We had a file for all the colours and typography, another for the standard buttons and bet buttons, site header and footer, et cetera. These files were static, difficult to maintain, and laborious to use. On the front end there was also no component library and we experienced numerous inconsistencies and bugs between repeated elements on the site regularly.
Consistency and design issues are like barnacles on a ship: if there are only a few, then they don't make much of a difference. But on-mass, they drag on the experience.
The Photoshop and Illustrator pattern library
Enter Figma
In 2017 it was clear to me and the team that we needed a better tool for interface design, and hence we switched to Figma. It was a design tool suitable for design systems and this was exactly what we were looking for. As early adopters of Figma there was limited recourses online so we had a lot of trial and error figuring out the best to use the new tool. It wasn’t long though before we were reaping the benefits:
Simplified handoff
Figma allowed better communication between designers and developers because developers could read styles and measurements from a Figma file rather than relying on annotation. They can also copy code straight from designs, like a specific animation that a designer had spent time perfecting.Real-time collaborative environment
Multiple designers can work on a single project in real-time and can edit, comment, discuss, view who’s working on what, track changes, and modify the file as they see fit, all remotely and without the need for in-person meetings or having to share heavy files via email.Seamless prototyping
Prototyping in Figmas is highly user-friendly, has a short learning curve, and puts a wide variety of tools and functionalities such as smart animations, advanced overlays, transitions, scrolling and hovering interactions, auto layout, and many more . It allowed us to test and demo UX/UI designs to business owners, validating ideas without having to develop a full-fledged feature, saving time and money.
Prototyping different interactions on desktop
Building our component library, aka the “Bible”
We knew the biggest challenge facing us was going to be convincing our tech leaders to prioritise work on the design system against other roadmap priorities. So to help with that we began building our Figma component library, which would become the backbone of the DS (design system). We took an agile approach and created a Kanban Board to plan out the initial phases, starting with the most frequently used components, then the components that we most commonly had issues with:
Buttons
Colours
Type
Inputs
Modal
Messages
A snippet of the messages component from the “Bible”
Building a business case
Once we had the bones of our Figma “Bible” in place we set to work building a case for the existence of a design system. We knew it made sense to have one and could speak clearly about its benefits to the customer, the front-end developers and designers. However our tech leaders would need more to convince them to prioritise work on the DS against other work that more clearly showed profitability.
Working with our QA department we used the following metrics to get the DS project green light:
How many fewer bugs will we get?
How many user errors will we save?
How many inconsistencies will we remove?
How much value will we add?
How much easier will testing be?
SIA Design System fully realised
Conclusion
Although the metrics we used were hard to quantify, Tech leaders later admitted that they gave the go-ahead based on faith in the individuals concerned; not necessarily based on faith in the idea itself. However the value of the Design System was truly revealed in 2022 when new gambling regulations were brought in that meant we needed to create a brand new site in 4 months. You can read more about that in my Ontario case study.