It is not always easy to know how to structure your design system on Figma, especially when working in a digital consulting agency like BAM.

Indeed, at BAM we often support customers who are in the very early stages of designing their product or who have never had a design system or a designer. Our missions often last less than a year, and then let the client develop internally. This involves a design system structure different from a company that has in-house designers and 5 products in parallel. Let's see how to set up a design system when you are an agency. Bonus: at the bottom of this article you will find the link to our design system on the Figma community!
‍

Divide our working time by 4

If you had asked me 2 years ago how we made the design systems of our customers, I would have told you that we rebuilt everything from scratch, for each client. Each color, button or input was rebuilt from scratch and that cost us 7 hours per designer per project. This represents a lot of time and therefore money for our customers, allocated to this subject.

Today, our designers allocate 1 to 2 hours maximum to the implementation of their client's design system thanks to our Project Starter Kit: a simple, duplicable design system, designed with our developers and easy to retrieve for our customers.
‍

A design system without loss of creativity

THEThe challenge behind creating a design system for a consulting agency is not to break the creativity of designers. Over-standardization leads to laziness: that's why our design system contains only the basic components to start mockups calmly: buttons, inputs, text areas, radio, checkboxes, etc.

At the beginning we included in the Figma file templates for functionalities that we often design, such as the login for example. Serious mistake: yes, we saved even more time, but these functionalities were never redesigned by the designers when our goal is to create ingenious and innovative tools for our customers!
‍

A customizable starter kit in a few seconds

The main objective of this design system is that it can live alone and be reused for each client, by all designers.

It is therefore shared with all the designers in our Figma team and at the start of each project, the designers duplicate it, update the Styleguide and the design system is automatically updated. It is already ready to be used!

In fact, how does it work?

Each design component is linked to the Color styles and Text styles defined in the Styleguide. Upon arrival on the design system, customization involves updating colors, fonts and adding your icon set in the New Icons frame. We chose to use this frame in order to facilitate the changes of icon instances in components. The other solution, much more time-consuming, involved replacing the vectors in the icon frames so as not to break the links from the components - no way.

💡 The rest of Styleguide (spacings, border radius, iconography) needs to be updated so that project stakeholders know them and developers can use them. They have no impact on the update of components.

Once these changes are made, the components are 90% updated! There are then 2 steps left: adjusting the border radiuses and updating the icon instances on all Building Helpers. It does not take more than 10/15 minutes.

Building helpers in the BAM design system?

The last particularity is that we work with building helpers, a kind of “master of master component”. This master allows us to have an exhaustive version of all the possible cases on this component, which can be updated quickly if necessary. Let's say our customer never wants icons in the buttons, he Just remove the 2 icons from the building helper rather than removing the 30 icons from the instances. As an agency, design changes are frequent. The design system must thereforebe as agile as we are.
‍

An easy to use design system for developers

The very reason why BAM exists and has a team of 20 designers is to facilitate the integration of designs with developers. So it was impossible to create them without them. Based on their way of coding, we chose a codification of color names, based on how MaterialUI works and on a hierarchy of fonts in “T-shirt sizes” (example for a title: title-xxlarge-46px).

I advise you to check with the developers at your agency if this naming is suitable for them, to ensure the effectiveness of your teams!

For example, we are still in discussions with developers to improve the structure of Styleguide, in response to the Update of Styleguides From Flutter.

At the same time, to collaborate with our developers, we have provided in the design system of the annotations that we use to get memory on the project.

In general, our designers intervene 3 weeks before the devs. It is therefore important that they can understand what we had in mind when building this or that screen! These annotations are also useful for PoS when writing User stories.

Want to join us? Click here.

A design system that is easy for customers to recover

Finally, customers should be able to use this design system easily. So we chose to combine Styleguide, components and models. Everything is in the same file, which limits the sources of information for customers, already bombarded with links all the time.

Customers can also get back on top of their file quickly. At the end of the project, we name them owners on the file and the file belongs to them. If the model file becomes too big, our customers can also publish the Design starter kit as a library and move the models into new Figma files on which this library is activated. All this, without the problem of losing links between masters and components!

I hope these tips will help you create your own agency design system. And if you need a helping hand, Go to Figma to download the BAM design system !
‍

Follow us: Dribbble / Figma

‍