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?
Questions that designers usually get:
Is this a duplicate?
Questions that designers usually get:
Questions that developers usually get:
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:
faster onboarding of new team members
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
The Design System Guide
Newsletter
Writing on topics such as design systems,
design process, design strategy. ✨
© 2022 - 2024 The Design System Guide by Romina Kavcic
The Design System Guide
Newsletter
Writing on topics such as design systems,
design process, design strategy. ✨
© 2022 - 2024 The Design System Guide by Romina Kavcic
The Design System Guide
Newsletter
Writing on topics such as design systems,
design process, design strategy. ✨
© 2022 - 2024 The Design System Guide by Romina Kavcic