At Bam, a clear and understandable design system is our priority within a project. A tool that has become essential for creating the models of our apps, it is essential that it be designed and created in agreement with all the stakeholders in the project, and above all in a sustainable way. Today the practice has become democratized, it is easy to find online resources to start a design system from 0 at the start of a project, but what about an already existing design system? How can you manage to readjust or correct a small or medium-sized design system that is already implemented or already well advanced? How can you, quite simply, challenge an already existing design system?

‍

Make an inventory of the existing situation

Let's start at the beginning! A design system is personal to each project, but also sometimes to the designer who created it. And that is the first mistake. At Bam, we ensure that each design system follows several criteria that will make it a success. To do this, we created a specialized audit grid, to review a design system in 5 key points:

• The substructure : is the document well structured? Is the information hierarchy clear enough? Are the items classified? If yes, are they properly?
• The documenting : can I quickly know what is the logic behind each element? are they communicated explicitly? Are the pages, guidelines, and components described?
• the Branding : is information on the artistic direction of the product visible?
• The components : are they well informed? are they optimized with the right tools?
• LGovernance: do stakeholders have access to the document? are they comfortable with it? How is the maintenance and updating of the design system managed?

Once the design system has been audited using this grid, it is possible for us to determine which priority projects will be, according to their importance and size. However, there are important prerequisites that will dictate the basic order of the corrections to be planned...

‍

1. Structuring your design system

As we said just before, the various modifications are at prioritizing In order tooptimizing the modification of a design system. No obligation, but it is strongly recommended in order not to waste time later and do double work. document structure is therefore preferred if one wants to start this work. And for this it is sometimes necessary to review all the pages.

‍

1 - The current design system is advanced

If the design system is already well advanced and includes many components, it will then be necessary to group them into different pages, which will be necessary Differentiate from branding (which I will see below). You will be able to sort them according to your preferences (atomic design, alphabetical order, sorting by use, importance, etc.).

‍

2 - The design system is not very comprehensive

On the contrary, if the design system is still not very comprehensive, it is possible to keep all the components on the same page provided that it is well documented and tidy. This can help centralize information and save time.‍

‍

3 - The design system also includes models

Finally, in case your models are also on this same document, then it is important to have a clear separation between the components, the branding, the models and the archives.

However, having a document structure is not enough. If the elements are separated, but not explained, then all the people who use the design system will be lost. I also recommend that you first have a page explaining the design system (see governance below).

‍

2. Documenting the design system

Then, after properly Structured your file, and this is the most important step, you need Documenting everything that is there. This is probably the longest part to do but it is also the most useful and the one that will save you time before continuing to work with the components. But what does it mean to document the various elements?

It is, to begin with, name effectively and sustainably your elements: names of pages, frames, components, components, colors, fonts etc. And why sustainably? Because a design system is constantly evolving.

💡 Take the example of a BAM customer who asked us to challenge his design system. In its branding, the colors were named “duck blue” or “midnight blue”. Colors are therefore named, of course, but not in a lasting way, and they do not induce hierarchy either. Naming such as “Primary 100", “Primary 200" for the main colors, then “Secondary 100", “Secondary 200" indicate their level of importance as well as their hue (100 for the lightest, 500 for a darker one) .The same goes for fonts, where you can already help developers with names like H1, H2, H3, P1, P2, P3, P3, etc.

Once the elements are named in this way, all you have to do is explain the names and uses of components : name, status, property, etc., according to their configuration.

Finally, it is recommended to Explicitly name each frame including elements, and indicate their use, and if possible, an example!

‍

‍

💡 Quick tip: the figma plugin EightShapes Specs will allow you to document the details of your components (margins, padding, etc.) in 1 click

‍

3. Clarifying branding

After taking stock of the design system and completing the structuring and documentation stage, the priority is to take care of the Branding since it will impact all current and future components.

To do this, it is necessary to ensure that all colors are listed in Color Style, all the fonts in Text Style and finally all effects (shadows, glows, etc.) in the Effect Style and of course, under the same names as indicated on the file. This will be useful when creating mockups, but also for project developers.

‍

4. Create and order its components

Then, when it is the turn of the components, we advise BAM to take advantage of all the possibilities offered by the Figma software if your design system is created using this tool.

Indeed, Figma gives the possibility to create all sorts of components using properties Like theinstance swap property, Boolean Property or Text Property that it is possible to accumulate for optimizing their management. If you are not familiar with these features, Figma offers Playgrounds, learning files that allow you to learn while doing, and many other features as well.

If this is not the case, it is also highly recommended to use the Auto-layout, dynamic frames that adjust according to their content, to create its components. Your models will thus adapt themselves to your content if they are set up correctly!

‍

5. Establishing governance

Finally, the stage of governance can intervene at any time during the design system challenge and this is a very important step because it will determine how the design system is maintained in the short, medium and long term. At Bam, thecontinuous improvement is at the heart of our concerns, and a design system, if not maintained, will lose all its importance.

Governance consists of identify the main interlocutors and stakeholders of the design system. It is for example It is essential that the project developers are aware of this file. and that they are in accordance with the classifications and the presentation of information in general. The design system should be seen as a Principle of communicating vessels, or of communication medium between designers and developers.

But, depending on the size of the design team awarded, it must also be a communication tool between designers.

There is no magic recipe for this, you simply have to determine a governance And a maintenance of the design system.

Governance will thus make it possible to monitor theorientation of the design system and these macro goals with all project stakeholders (Product, Tech and Design). While a maintenance system will allow monitor and share progress teams in a more micro way!

💡 On a BAM customer case, we happened to set up several meetings per month in order to maintain the file! For example, once a month, the teams do a macro summary of the progress, then a check of next month's objectives with the PO, PM, tech and design teams.A second meeting was scheduled twice a month, to take stock between designers and developers on micro advances.And finally, once a week, a dedicated workshop with a designer and a developer in order to integrate the changes made!

‍

Conclusion

In conclusion, I hope you find this article useful. It is important to keep in mind that the fundamental principles are communication around this design system and the care taken to document each element so that everyone can benefit from this great tool! A well-thought-out and managed design system is also and above all saving time to promote other subjects such as emotional designFor larger design systems, other tools will also be applicable, I am thinking in particular of tokkens, which may be the subject of a future article!

If you want to know more about the challenge of a design system or call on BAM for a project, do not hesitate to contact us!

‍