STEP 1

STEP 1

STEP 1

First, breathe!

First, breathe!

First, breathe!

Let me guess... You must deliver new features, prototypes, and product improvements daily. When you're in a rush, there is no time for consistency, writing documentation, and proper handoff. Putting fires down doesn't make your process scalable.

You can achieve that with a design system.

I'm not talking just about a set of components but bringing together the whole organization. Defining foundations is pretty straightforward, but the magic and hard work lie in shared understanding and unified language.

Creating a design system isn't an easy task and can be overwhelming. There's no one-size-fits-all process, and this mini book outlines what I've found to work best. You will need to tweak the steps, but I'm confident you'll know how to adapt them to your needs once you understand the logic.

Let me guess... You must deliver new features, prototypes, and product improvements daily. When you're in a rush, there is no time for consistency, writing documentation, and proper handoff. Putting fires down doesn't make your process scalable.

You can achieve that with a design system.

I'm not talking just about a set of components but bringing together the whole organization. Defining foundations is pretty straightforward, but the magic and hard work lie in shared understanding and unified language.

Creating a design system isn't an easy task and can be overwhelming. There's no one-size-fits-all process, and this mini book outlines what I've found to work best. You will need to tweak the steps, but I'm confident you'll know how to adapt them to your needs once you understand the logic.

Questions that designers usually get:

Questions that designers usually get:

Questions that developers usually get:

Questions that developers usually get:

Is this a duplicate?

What is our brand color?
What shade of grey are we using here?
Do you have 5 min for a wireframe?
Can you redesign this CTA button?
Where is our latest user flow?
Where's our logo?

Questions that designers usually get:

Is this a duplicate?

What is our brand color?
What shade of grey are we using here?
Do you have 5 min for a wireframe?
Can you redesign this CTA button?
Where is our latest user flow?
Where's our logo?

Questions that designers usually get:

This flow doesn't match the UI design.
Where are the assets?
Does this meet the code standards?
When will you finish the MVP?
Where is the latest documentation?
Any transitions? Do you have examples?
This doesn’t work. Let’s have a call.

Questions that developers usually get:

This flow doesn't match the UI design.
Where are the assets?
Does this meet the code standards?
When will you finish the MVP?
Where is the latest documentation?
Any transitions? Do you have examples?
This doesn’t work. Let’s have a call.

Questions that developers usually get:

STEP 2

STEP 2

STEP 2

Start with these questions

Start with these questions

Start with these questions

Before diving too deep, I think you should have answers to the questions below. Having a clear understanding of where you want to go, it will help you build the plan.

Before diving too deep, I think you should have answers to the questions below. Having a clear understanding of where you want to go, it will help you build the plan.

Before diving too deep, I think you should have answers to the questions below. Having a clear understanding of where you want to go, it will help you build the plan.

Who is the design system for?

What is our goal?

Why is it important for us?

How it will help us?

Do our interfaces look consistent?

How many resources can we put into building it?

How many resources can we

put into building it?

Will our design system be static or dynamic?

Will our design system be

static or dynamic?

How much time do we spend on reduntant tasks?

How much time do we spend

on reduntant tasks?

How much time do we spend cleaning up design or tech debt?

How much time do we spend

cleaning up design or tech debt?

Do we want to build a public or internal design system?

Do we want to build a public or

internal design system?

I have gathered over 50 questions to help you start with the design system. Check the link below.

With a well-oiled machine expect
more 

benefits like:

resources

resources

resources

The Design System Playbook

The Design System Playbook

The Design System Playbook

Essential questions for kick-starting a design system.

Essential questions for kick-starting a design system.

Essential questions for kick-starting a design system.

STEP 3

STEP 3

STEP 3

Design Audit

Design Audit

Design Audit

A design and UX audit is a comprehensive evaluation of a product's user interface, functionality, and overall design.

A design and UX audit is a comprehensive evaluation of a product's user interface, functionality, and overall design.

A design and UX audit is a comprehensive evaluation of a product's user interface, functionality, and overall design.

Once you know where to go with your design system, it is time to evaluate the current product design, user flows, branding, and all the marketing materials. Yep, it is a lot of work to understand the current situation, but you need to do this step, because you need to understand why some decisions were made, the current state of User Interface Design, collaboration style, etc.

I wrote more about Design Audits in the next chapter.

Once you know where to go with your design system, it is time to evaluate the current product design, user flows, branding, and all the marketing materials. Yep, it is a lot of work to understand the current situation, but you need to do this step, because you need to understand why some decisions were made, the current state of User Interface Design, collaboration style, etc.

I wrote more about Design Audits in the next chapter.

Once you know where to go with your design system, it is time to evaluate the current product design, user flows, branding, and all the marketing materials. Yep, it is a lot of work to understand the current situation, but you need to do this step, because you need to understand why some decisions were made, the current state of User Interface Design, collaboration style, etc.

I wrote more about Design Audits in the next chapter.

STEP 4

STEP 4

STEP 4

Create an inventory file

Create an inventory file

Create an inventory file

Start gathering design decisions and have a complete overview for your components and tokens

Start gathering design decisions and have a complete overview for your components and tokens

Start gathering design decisions and have a complete overview for your components and tokens

It is good to have an overview of all your components, design tokens, or Figma variables. If you want to have a complete overview and you don't use any of the design system platforms, I recommend you create a dynamic spreadsheet with Airtable.

It is good to have an overview of all your components, design tokens, or Figma variables. If you want to have a complete overview and you don't use any of the design system platforms, I recommend you create a dynamic spreadsheet with Airtable.

It is good to have an overview of all your components, design tokens, or Figma variables. If you want to have a complete overview and you don't use any of the design system platforms, I recommend you create a dynamic spreadsheet with Airtable.

STEP 5

STEP 5

STEP 5

Test the workflow

Test the workflow

Test the workflow

You need to experiment with the workflow, before you decide to choose one.

You need to experiment with the workflow, before you decide to choose one.

You need to experiment with the workflow, before you decide to choose one.

A lot of times, I see companies taking decisions too lightly just because OKRs are connected with their goals. In the long run, this won't help you. Create a few components, choose a few tools, and test the workflow. It will be much easier to decide what works for your organization. Of course, there are differences between budgets, but there are a lot of tools that are open-source and can help you immensely, even when you are starting out.

A lot of times, I see companies taking decisions too lightly just because OKRs are connected with their goals. In the long run, this won't help you. Create a few components, choose a few tools, and test the workflow. It will be much easier to decide what works for your organization. Of course, there are differences between budgets, but there are a lot of tools that are open-source and can help you immensely, even when you are starting out.

A lot of times, I see companies taking decisions too lightly just because OKRs are connected with their goals. In the long run, this won't help you. Create a few components, choose a few tools, and test the workflow. It will be much easier to decide what works for your organization. Of course, there are differences between budgets, but there are a lot of tools that are open-source and can help you immensely, even when you are starting out.

BENEFITS

BENEFITS

BENEFITS

Design system brings

Design system brings

Design system brings

One source of truth

Structured collection of reusable components, guided by clear standards.

Maximized effectiveness

Enhanced collaboration and

streamlined teamwork.

Enhanced collaboration and

streamlined teamwork.

Increased ROI

Speed up your work, reduce repetative tasks, save a lot of costs.

More time for important stuff

Structure saves time so that you can focus on high-level tasks.

With a well-oiled machine expect more 

benefits like:

With a well-oiled machine expect
more 

benefits like:

a more methodical and optimized workflow

faster onboarding of new team members

less design and technical debt
faster rapid testing and prototyping
the product of collaboration
cross-functional collaboration
up-to-date documentation
faster time to market
scalable solutions
added value

3, 2, 1

3, 2, 1

3, 2, 1

Let's get into details

Let's get into details

Let's get into details

Without further ado, let's start crafting your design system! But before you start, my best advice is that you don't try to copy tech giants at the start. Start with the "MVP," nail the process, and advance step by step. 





Without further ado, let's start crafting your design system! But before you start, my best advice is that you don't try to copy tech giants at the start. Start with the "MVP," nail the process, and advance step by step. 





Without further ado, let's start crafting your design system! But before you start, my best advice is that you don't try to copy tech giants at the start. Start with the "MVP," nail the process, and advance step by step. 





The Secret Of Getting Ahead Is Getting Started

The Secret Of Getting Ahead

Is Getting Started

© 2022 - 2024 The Design System Guide by Romina Kavcic

© 2022 - 2024 The Design System Guide by Romina Kavcic

Newsletter

Writing on topics such as design systems,

design process, design strategy. ✨

© 2022 - 2024 The Design System Guide by Romina Kavcic