EVERYTHING SYNCED

EVERYTHING SYNCED

EVERYTHING SYNCED

How to choose the right tools?

How to choose the right tools?

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

LEVEL UP

Your design maturity level

Your design maturity level

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

OVERVIEW

Tools

Tools

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.

© 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

© 2022 - 2024 The Design System Guide by Romina Kavcic