Design Systems integrated with code base

Hey guys,

I’m looking for recommendations regarding design systems and how to approach them effectively.

I’ve been reading lots of articles and looked at a variety of tools such as:

What I ultimately want from this is an integrated tool with our code base, not a standalone style guide only used as a reference. It needs to be a living design system used by both the design team and development team.

In your guys’ experience, which tools have worked well in getting a design system integrated within both development & design departments?

At least from my experience, standalone guides in a separate tool have the same challenges of sharing research, so I think your approach is spot on. Because the tools live outside of the standard workflow of the people you’re sharing it with, it’ll be more challenging to get buy-in. Even harder to get participation. For example, getting your iOS or Android developers to update the design system with the latest guidance from the community.

After trying a few tools in the past, I found a simple website/web app that goes through the same git workflow as any applications worked the best. You do design reviews instead of code reviews but can get them from the UI knowledge experts in development, and it’s way more likely to get updates from development.

Both in past roles and with clients, I’ve had good results, even with cross-platform web and native mobile apps, using a web/CSS framework for a design library. Tool-wise, Jekyll from GitHub allows you to generate a static site from templates, is simple, and works well in GitHub pages, so teammates don’t even need to check out the source. Otherwise, I use a CSS framework like Bootstrap or a Material library (if we’re using Material) with a theme for the project. Creating native styles that are OS-specific is easy, if you’re comfortable with CSS.

There are many GUI tools for creating webpages or static web-based prototypes. I would just choose one that produces clean HTML and is fast to produce layouts, so others can update it without your particular tool. Bootstrap Studio is one good example of this. It works with Bootstrap themes and produces assets that are editable in GitHub or similar source control hosting, unlike the proprietary and unusable assets like Invision or Figma. Awesome prototyping tools, but not for this use case.