Article published on May 26, 2023 on Hubvisory
You have undoubtedly heard of design systems recently, as they have been popping up everywhere in recent years. Often made accessible to the general public by the companies behind their creation. Some have become real references, such as IBM's Carbon or Google's Material Design. And for good reason, using a design system brings several benefits:
First, we will focus on setting up the workspace. Defining which files are essential to have relevant foundations before looking at their contents. Secondly, we will see how to establish comprehensive documentation for users of the design system.
This is divided into two sections. At the core is the design part, which contains the elements involved in the composition of digital products. These are then retrieved in the documentation part, in order to define a framework of use and behaviors related to different types of interactions. This is one of the major differences with a UI kit. The notion of documentation is extremely important here and must be integrated into the product from its launch.
While it is possible to coexist these two sections on a dedicated design software, it is recommended to adopt more appropriate specific tools. This allows you to optimize your productivity, but also to have better access management.
<aside> 💡 Figma recently acquired by Adobe, is currently the most suitable design tool for creating a Design System and is perfectly aligned with Zeroheight and Storybook for the documentation part.
</aside>
Before delving into the subject, it is essential to take a moment to focus on the notion of molecular design on which the design system is based. This methodology, widely adopted since the 2016 publication of Brad Frost's book Atomic Design, challenges the traditional approach of screen-by-screen design by reversing the established process. Starting from the fundamental elements called "atoms", before combining them with other elements to form molecules, organisms or templates, in order to achieve the goal of creating an interface.
The underlying idea is that by working from basic elements, it is possible to create more flexible designs that evolve with the needs of the product. By using this modular design system, teams can gain agility and efficiency.
A little more patience, don't make the mistake of diving headfirst into creating your components. A design system is first and foremost a product, so it is essential to define the needs to be met. One of the objectives of the design system is to streamline and share resources.
Once this framework is defined, it is important to organize your workspace as efficiently as possible. Anticipate the development of the product and therefore its segmentation as much as possible. The goal is to offer an efficient structure and protect yourself from potential slowdowns caused by overly large files.
