Chapter 8
Design System Tools
Chapter 8
Design System Tools
Chapter 8
Design System Tools
EVERYTHING SYNCED
EVERYTHING SYNCED
How to choose the right tools?
Start by answering these questions:
Start by answering these questions:
Start by answering these questions:
How will other teams contribute?
How detailed guidelines you want to add?
In what form will you add your code snippets?
Do you want to include the code
or embed stories from Storybook?
Will you provide live code previews?
Do you want to include the code
or embed stories from Storybook?
Do you want to include downloadable assets?
Do you want to include
downloadable assets?
Who are our consumers?
How many design system maintainers do we have?
Then, consider the following:
Ease of use
How easy is it to embed designs, code, downloadable assets, connect pages, etc.
Integration with other tools
How easy is it to connect with other tools? Is it plug-and-play, or is there much going back and forth for things to work?
Collaboration
How easy is it to add new team members? How expensive is it to add the whole team? Can you add specific rules? Can you lock certain content (for public use, for example)?
Built-in resources (templates, guides)
Does the tool provide any guidance for setting up the whole ecosystem? Do they offer some templates for writing or structure for adding content?
Does the tool provide any guidance for setting up the whole ecosystem? Do they offer some templates for writing or structure for adding content?
LEVEL UP
LEVEL UP
Your design maturity level
When you are starting fresh
When you are starting fresh
When you are starting fresh
If you are new to the design systems, I strongly advise creating a few components in Figma and experimenting with various tools. Try out the workflow before you decide on the tool.
Tools may seem very similar, but there are differences in ease of use, features, connecting APIs, adding documentation, and sharing the design system documentation around.
If you are new to the design systems, I strongly advise creating a few components in Figma and experimenting with various tools. Try out the workflow before you decide on the tool.
Tools may seem very similar, but there are differences in ease of use, features, connecting APIs, adding documentation, and sharing the design system documentation around.
If you are new to the design systems, I strongly advise creating a few components in Figma and experimenting with various tools. Try out the workflow before you decide on the tool.
Tools may seem very similar, but there are differences in ease of use, features, connecting APIs, adding documentation, and sharing the design system documentation around.
It is also good to know that you will make many mistakes in the first year. It could be naming conventions, architecting the whole system, or creating a contribution model. That's why it is wiser to choose one of the "off-the-shelf solutions." Having an app that removes the decision fatigue for building a custom CMS will give you more time to think about the important stuff.
It is also good to know that you will make many mistakes in the first year. It could be naming conventions, architecting the whole system, or creating a contribution model. That's why it is wiser to choose one of the "off-the-shelf solutions." Having an app that removes the decision fatigue for building a custom CMS will give you more time to think about the important stuff.
It is also good to know that you will make many mistakes in the first year. It could be naming conventions, architecting the whole system, or creating a contribution model. That's why it is wiser to choose one of the "off-the-shelf solutions." Having an app that removes the decision fatigue for building a custom CMS will give you more time to think about the important stuff.
Invest in an advanced documentation site after you figure out what you need. But don't make it custom just because the internet says so.
Invest in an advanced documentation site after you figure out what you need. But don't make it custom just because the internet says so.
Invest in an advanced documentation site after you figure out what you need. But don't make it custom just because the internet says so.
When you want to update your design system
If you want to update your
design system
If you are a big corporation managing multi-level brands, you already have a design system in one form or another. Don't throw everything in the trash if you plan to upgrade it. Determine what went well, what it lacks, and where you want to go. You can add the rest of the brands when you figure that out. Otherwise, everything will become chaotic, and the work will start duplicating.
If you are a big corporation managing multi-level brands, you already have a design system in one form or another. Don't throw everything in the trash if you plan to upgrade it. Determine what went well, what it lacks, and where you want to go. You can add the rest of the brands when you figure that out. Otherwise, everything will become chaotic, and the work will start duplicating.
If you are a big corporation managing multi-level brands, you already have a design system in one form or another. Don't throw everything in the trash if you plan to upgrade it. Determine what went well, what it lacks, and where you want to go. You can add the rest of the brands when you figure that out. Otherwise, everything will become chaotic, and the work will start duplicating.
When you need to follow legal rules
My advice changes a bit for companies with security issues (for example, banks). Banks can only afford to share some source files via third-party apps. So, their only options are to use Figma API and custom build.
My advice changes a bit for companies with security issues (for example, banks). Banks can only afford to share some source files via third-party apps. So, their only options are to use Figma API and custom build.
My advice changes a bit for companies with security issues (for example, banks). Banks can only afford to share some source files via third-party apps. So, their only options are to use Figma API and custom build.
OVERVIEW
OVERVIEW
Tools
Basic
Notion, GitHub Pages, Airtable, Figma, FigMayo
Advanced
Supernova, Zeroheight, Knapsack, Specify, Storybook
Zeroheight, Specify, Supernova,
Backlight
Custom
Custom CMS
Build your own
"Off-the-shelf" solutions
Design Tools
You can connect Figma API and your tech stack to make it customizable. If you use Sketch or Adobe XD, I suggest migrating to Figma and starting from there. If, for some reason, your company is not allowed to use Figma, you will have more manual work, but the goal is still reachable.
You can connect Figma API and your tech stack to make it customizable. If you use Sketch or Adobe XD, I suggest migrating to Figma and starting from there. If, for some reason, your company is not allowed to use Figma, you will have more manual work, but the goal is still reachable.
You can connect Figma API and your tech stack to make it customizable. If you use Sketch or Adobe XD, I suggest migrating to Figma and starting from there. If, for some reason, your company is not allowed to use Figma, you will have more manual work, but the goal is still reachable.
Learn
About me
The Design System Guide Newsletter
Get new design system tips, tutorials, and insights in your inbox. No ads, no fluff.
© 2022 - 2024 The Design System Guide by Romina Kavcic
Learn
About me
The Design System Guide Newsletter
Get new design system tips, tutorials, and insights in your inbox. No ads, no fluff.
© 2022 - 2024 The Design System Guide by Romina Kavcic
Learn
About me
The Design System Guide Newsletter
Get new design system tips, tutorials, and insights in your inbox.
No ads, no fluff.
© 2022 - 2024 The Design System Guide by Romina Kavcic