04.1 Branding Colour → Primary Hue
We started with our brand’s primary colour—#722ED1. From there, we created a full hue scale with tints and shades. This gave us a flexible system of 10 colour steps, from Primary/1 (lightest) to Primary/10 (darkest).
ABOUT
Scaling Design: My Process for Building a Better System
As our product evolved, so did our Figma files—unfortunately not in a good way. There were no standards. No structure. Just a growing pile of components, screens, and forgotten versions scattered across files.
Our small team was scaling fast, and every new project felt harder to start than the last. Finding final designs? A treasure hunt. Explaining decisions? A memory test. We needed to rethink how we organised, documented, and scaled our design system.
Location
Stockholm, Sweden
Industry
SaaS Startup
Role
2 Product Designers
Methology
Design System, Atomic Design Approach, Naming conventions
MY ROLE
I took ownership of structuring our design system so it could scale with the team and the product. This meant not just cleaning up, but creating a repeatable, intuitive framework that worked for designers, developers, and stakeholders alike.
04. System consistency
After thoughts
This wasn’t just about tidying up Figma. It was about creating a system that made sense—one that could scale with the product, the team, and the company.
By introducing structure—from how we named files to how we tokenised colours—we created a shared language across design and development. Designers moved faster. Developers stopped guessing. Stakeholders had clarity. And we stopped hearing:
“Where’s the final version?”
But this isn’t a one-size-fits-all solution.
For us, the system worked because:
-
We had three distinct platforms (Client UI, Admin UI, Website)
-
A small, collaborative team of designers and developers
-
And the flexibility that comes with working at a startup pace
If I were doing this in a larger organisation? I’d expect more complexity—versioning across teams, stricter documentation, layered permissions, maybe even a dedicated design ops function. But the core principles hold:
clear structure, consistent naming, scalable tokens.
From Brand Colour to Button Component
Here's how we transformed a single brand colour into a complete, tokenised design system used across our UI components.
HOW WE GOT THERE: THE PROCESS
Reorganised Figma files by product tabs with consistent, standardised pages
Introduced canvas sections mapped to the Double Diamond framework
Rebuilt using atomic design principles for clarity and reuse
Implemented naming conventions and design tokens across the board
0.1 File structure
The Problem
Our component library had grown—but not in a healthy way. Components were duplicated across files, naming was inconsistent, and no one could tell which version was the “right” one. Components were built from scratch as and when it was needed. Devs wrote custom styles to match “close enough” components. And worst of all, performance started to suffer—bloated CSS, inconsistent UI, and slow-loading pages.
What We Did
We rebuilt the library using atomic design principles, giving the system structure, logic, and flexibility:
-
Atoms – Buttons, inputs, icons
-
Molecules – Inputs with labels, button groups
-
Organisms – Tables, modals, search bars
-
Compositions – Full-page templates and screens
We cleaned up duplicates, unified naming, and made every component reusable and documented.
But we didn’t stop at Figma. By aligning design and development components, the dev team was able to remove redundant custom CSS, simplify the codebase, and rely more on consistent, systemised components.
The Problem
As our product grew, so did our design files—just not in a good way. Projects were scattered, naming was inconsistent, and there was no logical file structure. Finding anything in Figma felt like rummaging through a digital junk drawer. Designers wasted time hunting for the right files. Developers pinged us constantly for the “final” version.
What We Did
We stepped back and rebuilt the system from scratch, starting with the structure. Using the product itself as our map, we created a naming convention and folder hierarchy that mirrored how users navigated the app:
Company → Platform → Page → Flow – Project Name
We reorganised everything accordingly:
-
Grouped files by product tab
-
Standardised page names
-
We added custom thumbnails to every file.
So now, at a glance, anyone could tell what a file was about without opening it.
Files became findable. Work became scalable. And we got fewer Slack messages asking, “Where’s the latest version?”
02. Process visibility
The Problem
Design handovers were inconsistent. Each designer had their own way of structuring pages, naming flows, and grouping final designs. Some used vague names like “Final”, others buried files mid-canvas.
What We Did
We introduced a clear, repeatable format for every file:
-
Each Figma file is structured by flow, and broken into clear sub-flows (e.g. Add Payment → Manual, File Upload, Checkout)
-
Canvas sections follow the Double Diamond to show process: Discovery → Validation → Ideation → Design
-
Final designs are always placed under “🚀 For Development” page, on Dev Mode.
-
These pages also serve as a source for quarterly design system updates for pages.
This structure made design handoff consistent, visible, and scalable—no more guesswork, no more messy surprises.
03. Component Library
04.2 Style Sheet
The hue scale was documented in our style sheet to keep the design language consistent across teams. Each step was labelled clearly (e.g. Primary/6, Primary/8) so designers could pick the right tone for UI elements, shadows, states, and backgrounds.
04.3 Token Hierarchy
From that style sheet, we tokenised each colour:
-
Raw Hex: #722ED1
-
Design Token: Primary/6
-
Component Token: btn/primary-bg, btn/primary-color
By translating abstract colour choices into contextual tokens, we gave every element a purpose and consistent reference in both design and code.
04.4 Applied to Components
The token btn/primary-bg was then applied to our primary button components in Figma and in code. Even the button’s text colour (btn/primary-color) was tokenised.
Thank you for reading!
Would you like to know more? Connect with me on Linkedin, or send me a message below.