Organising a design system for a growing company

General Discussion
1

Hey, Figmates. What started as a quick redesign of a landing screen for a client, turned out into a full-blown website. Soon there will be a web app design. There are also branding assets and social media banners, and heavy use of illustrations.

My point is that I believe I should act quickly and create a design system before the project grows in complexity. I‘ve never done this, so I came up with the following file structure:

— Documentation
— Brand colors
❖ Illustrations library
❖ Web site library
❖ Web app library
— Web site design
— Web app design

The files marked with ❖ are where the library of components are stored. So, I envision having a separate library for the type of design (web site, web app). I foresee that the illustrations should in a separate file as some part of them will be used across the design in overall.

The question of typography? I think it‘s a good idea to put them inside the web site and web app libraries, as each type of project will use slightly different sizes.

But what about colors? That‘s a tricky one. Colors are brand-related, and they should work across the entire project. So I imagine the following: Color styles are set into the Brand colors file, they are shares into the web site and web app libraries, and only then used into the web site and web app design files. So the brand colours file is a meta file that is used in the library files. Does that make sense?

Any feedback is appreciated.

2

There are probably a lot of ways to do this but our system starts with a Visual Language file that has all the global, platform-independent color styles, effect styles, grid styles, type styles, and all of our icons in it. That’s the main library, which we then use to build individual component libraries for the different platforms.

So the assets we have are:

  • Global visual language library
  • Web components library
  • Mobile components library
  • Something we call a “sticker sheet” which just shows various examples of the components arranged into common patterns for designers to quickly grab

Edit: I remembered that we also have an illustrations library, like you’re thinking of making.

1 Like
3

Yeap, that seems pretty logical. For now I settled down on the following structure:

❖ Base library *(logo, colors, icons, illustrations)*
❖ Website library *(typography, various components, styles and effects for the website.)*
— Website design *(Includes Base and Website library)*
— Marketing design *(Includes only Base library)*

I tried to simplify as much as possible. So, in future when the time for a web app design comes, I‘ll create a Web app library, and a Web app design file. Same for a mobile app.

The reason I have a Marketing design file is because there will be social media banners, ads design, and graphics for blog posts inside.

The one thing I don‘t like is that the typography is not on a global level (the Base library), but is inside the Website library. And when there will be a Webapp library, I‘ll have to manage the typography in two files. But on the other hand, it makes sense, since a web app and a website will probably use different type styles and sizings. The tricky part is that for the Base library, for now I‘m borrowing typography styles from the Website library—something I‘m not a big fan of.

And lastly, what about cursors, stylings for the very design system, like component for cover, headings, etc? Should there be a meta library of sorts? It might make sense to have a Documentation library, but in order not to complicate things, I settled on cramming those inside the Base library. Not an ideal solution, but I‘m fine with it.

Will let you know if I’ve changed my mind tomorrow. :sweat_smile:

4

Hello,
I very often go crazy with the handling of auto-layout and variants in a component… And then there’s the library, which keeps getting bigger and bigger.
I would also like to have a master library and then create a smaller library from it

It all sounds very interesting. But how exactly does it work? Practically.
Can I create a library with master components, then create an instance of selected ones and create a library from them again?

Thanks a lot for any hint

Michi