How to go from a style guide to a design system

Like a lot of companies, Johnson & Johnson once relied on a style guide to make sure designers used approved language and components. Style guides can still help brands enhance their UX, but they don’t always match the needs of larger companies. Newer technology also makes it possible for smaller enterprises to move from style guides to design systems.

During an April 2021 webinar, J&J Experience Design Expert Service Leader Ben Shectman talks about how he and his team used the corporation’s existing style guides to build an interactive design system. It’s a lesson in how adopting the right process and software can make a design department more effective and efficient.

Why you need a design system instead of a style guide

For years, Johnson & Johnson had used style guides saved as PDF files. The disadvantages of static style guides were obvious to an experienced UX designer who knew the benefits of interactive design systems.

Some of the benefits you gain when you transform style guides into design systems include:

• Creating a place that stores all the standardized versions of components. 
• Adding consistency to products that help users know what to expect when they encounter new features.
• Controlling the design components that employees can access and add to their prototypes.
• Establishing guardrails that make it impossible—or at least extremely difficult—for anyone to add unapproved features.
• Improving efficiency by providing components that designers can drag and drop into their work.

With a design system, the person in charge gains more control over product design and development. Meanwhile, the jobs of designers and developers become easier as designers used standardized and approved components in their work.

Moving from style guides to design systems with atomic design

Ben Shectman and his team chose to convert J&J’s style guides into a design system using atomic design. Atomic design works well for large corporations like Johnson & Johnson. Benefits of atomic design include:

• Letting designers mix and match components to build new products.
• Relying on consistent, predefined pieces that maintain consistency throughout products.
• Updating existing designs doesn’t require nearly as much effort.

When using atomic design to build design systems, you get to focus on five layers of complexity:

• Atoms—the most basic, essential elements that get used to make everything else.
• Molecules—more complex structures built from multiple atoms.
• Organisms—the result of combining molecules (examples include search fields and navbars).
• Templates—a controlled environment where designers can place organisms.
• Pages—the final product that shows designers whether their approaches yielded the results they expected.

All of these levels of complexity serve essential roles, but most design managers focus on giving their teams templates.

Create templates for designers, developers, and other employees

Ideally, your design system should include as many templates as possible to fill potential user needs. Designers should be able to open the appropriate template and drag organisms into it. Depending on the template, the organisms might snap into specific places based on their functions.

For an example of how valuable templates are, watch J&J designer Gil Gerard Austria use one to transform an old employee search tool into a design that matches the company’s preferences and provides excellent functionality.

Build your interactive design system with UXPin 

UXPin makes it easier than ever for you to go from outdated style guides to interactive design systems. The team at J&J chose UXPin in part because it helps in creating an interactive design system that shows all clickable components and helps a lot in user testing. 

The interactive design system solves numerous problems often caused by image-based design, such as inaccuracy, static designs that don’t respond to interactions, and the number of back-and-forths with developers before establishing how exactly each component should look and behave.  

Take your design system to the next level

If you want to keep the consistency of your components with the end product, reduce the number of designer-developer back and forths, and eliminate the handoff drift, you should choose to design with code components. 

Our Merge technology allows designers to use UI code components that developers already created and are stored in the coded design systems. This gives an ultimate single source of truth for the whole product teams, as designers use production-ready components in the designs that later on developers just search for in their libraries to build the product. Besides, the imported components are fully interactive, which means that the prototype will look and behave just like the end product! 

Reading about the benefits of design systems and code-based design doesn’t always communicate how much more effective tools like UXPin Merge work. Experience the advantages yourself by requesting access to UXPin Merge.