Blog

The 4 best tools to create a design system in 2023 

A design system is an essential tool for designers and developers. It brings together a set of elements that offer many advantages to teams while guaranteeing significant time and money savings. 

Did you know that you can create your own design system thanks to online collaborative tools? Here is a non-exhaustive list of sites to help you create one.

What are the best online tools for creating a design system? 

To create a design system, you need a combination of the right skills and the right tools. 

You need visual libraries, collaborative tools, component sharing platforms, UI kits, code and handoff tools, etc.

  • Figma : a visual library for an evolving design system
  • Zeroheight : collaborative design system documentation
  • StoryBook : a library for developers
  • Miro : a tool to stimulate collaboration 

Figma: the visual library for an evolving design system

Figma is a tool specialized in web and mobile interface design. It promotes collaboration and sharing, which makes it ideal for building a design system that can be used by an entire team.

Figma’s great popularity comes from its web development-inspired templates and features, which perfectly match current trends and needs.

In addition, Figma is hosted on the cloud, which promotes collaborative work and sharing of visual libraries.

Benefits of Figma :

  • collaboration and sharing are made easy, remotely and in real time 
  • work and save on the cloud 
  • ability to write comments 
  • shared libraries 
  • components can be easily changed and retrieved 
  • compatibility with ZeroHeight

In September 2022, Adobe announced the purchase of Figma for $20 million. 

Figma’s price list


ZeroHeight: collaborative management of design system documentation

ZeroHeight is a CMS (content management system) that allows designers, developers, engineers and product teams to create visual and technical documentation and keep them up to date. 

ZeroHeight has a powerful API (Application Programming Interface) that allows you to import and document your design files (for example, frames, components or Figma style). 

It helps you create pre-built blocks that meet most of your needs to design quality Design System content.

ZeroHeight benefits :

  • easy to follow, well-documented online style guide
  • detailed inspection of possible components
  • up-to-date and synchronized design token, assets and design files
  • compatibility with Figma, Adobe XD and Sketch to import graphics and design elements

ZeroHeight is used by a number of large companies and institutions such as Decathlon and the City of Amsterdam.

Zeroheight pricing

Storybook: the library for developers

With StoryBook (often called Storybook JS, Storybook React or React Storybook), you can create documentation for front-end developers and design teams who master code.

StoryBook helps front-end developers document, manage and keep track of specific components and pages, while making them easily searchable. The tool allows you to view visual changes live while you code. 

Benefits of Storybook :

  • Documentation technique orientée pour les équipes de développement (besoin de connaissance en codage) ;
  • fonctionne correctement avec HTML brut, React, React Native, Vue, Angular, mithril, Marko, Ember, Riot, Svelte ;
  • Compatible avec Figma.

Tarif de Storybook

Storybook is an open source (free) tool.

Miro: the tool to boost collaboration

Miro is an online whiteboard platform that allows you to share information with your co-workers. 

The tool meets a multitude of needs: meetings, workshops, brainstorming, agile processes and UX Design.

Benefits of Miro:

  • facilitates remote collaboration in real time
  • various tools accessible from the whiteboard such as the pen, the post-it function, shapes, comments and file integration
  • possibility to use templates already created or to develop your own

Conclusion

There are many ways to create a design system. 

  In this article we shared some of the best tools to use to create a design system:

  • Figma: one of our team’s favorite tools. Figma is an online collaborative platform that is ideal for graphic design.
  • ZeroHeight: a platform that stores documentation and best practices tips.
  • StoryBook: a library for developers that contains technical documentation for development teams.
  • Miro: a tool that promotes collaboration, provides a status report and facilitates the work of teams.

It is important to remember that a tool is always at the service of those who use it.  

The success of a design system requires time and the involvement of a team for its implementation (which represents an ongoing work). 

The keys to success? Collaboration, communication and active participation of all stakeholders.

Do you need help creating or implementing a design system? Meet Reynald Lemaire, Anais Digital’s co-managing partner and design system expert. 

Ces articles devraient aussi vous intéresser

Skills needed software developer

07/01/2023

The 7 Skills Needed to be a Great Software Developer in 2023

In today’s IT job market, the demand for software developers (or software engineers) is extremely high. Whether you are just starting out or have already begun working in software development, we invite you to discover (or rediscover) the 7 key skills needed to be a great software developer.

03/01/2023

Design System : why do you need one in 2023? 

A design system is a solution that allows you to save time and increase productivity while keeping your digital products consistent. In this article, we explain what a design system is, the advantages associated with it and how to create an efficient version adapted to your company.

10 Best Tools for Wireframes and Prototypes

12/08/2022

The 10 best wireframe tools to use in 2022

Designing a user interface can be a difficult task. It’s important to get it right, because the user interface is the first thing that your users will see. If it’s not designed well, they may not even bother trying to use your website or app. That’s why the best wireframes and mockups tools come handy. In this post, we will present 10 of the best wireframe tools out there!

become UX designer

05/07/2022

How to become a UX Designer in 2022? 

User Experience (UX) is one of Anais Digital’s strengths. It is part of our DNA. But what are the skills you need to become a UX Designer? What training should you do to get into the profession? Our UX team shares its point of view and experience on the topic.

No waste podcast ep10

21/04/2022

Ep10 – Définir la gouvernance d’un projet digital (FR)

Saviez-vous que la performance de vos projets ne se trouve pas uniquement dans la mise en place d’un plan efficace ? Elle se traduit aussi par la mise en place d’une gouvernance efficace et adaptée au contexte. La mise en place de projets digitaux au sein d’une entreprise implique la définition d’une structure : la […]

No waste podcast Ep 9

14/04/2022

Ep 9 – Un moment pour tout et un temps pour chaque chose (FR)

C’est sans doute l’une des perspectives les plus séduisantes de la vie d’entrepreneur : être maître de son temps.  Quand on comprend que dans la vie chaque minute compte. Apprendre à gérer son temps devient une compétence indispensable de l’entrepreneur.  Dans cet épisode, Christophe Jouret revient sur ce célèbre adage de l’Ecclésiaste : “Un moment […]

Download our Free Report

Want to have a chat about this ? Call us now +32 2 320 12 94.