All Case Studies Design Development Interviews Machine Learning Project Management

Key Design Systems Trends and Best Practices for 2019

Smart organizations like Atlassian, Dropbox, Airbnb, and Shopify invest in design systems to provide their products with a consistent look, streamline the design and development process, and boost their teams’ productivity.

A design system is a collection of reusable components that are coded and documented and transparent standards that enable designers and developers to collaborate and build coherent digital products.

Over the past few years, the concept has gained significant momentum because it aligns with the general trend of project automation. In the next years, design systems will become a must-have for every organization that wants to build consistency across products and unlock the potential of their design teams.

Here are the four key trends and best practices for building design systems.

1. Industry trend: Design tools that know how to code

Should designers learn how to code? That’s one of those questions for which nobody seems to have an answer.

The recent trends show that we may have been asking the wrong question. Consider the rapid evolution of design tools that help designers focus on design and generate code automatically. For example, Airbnb has developed an internal workflow where designers sketch a UI and get the code for it in a few seconds.

One of the most popular UI prototyping tools, Principle, requires almost no knowledge of coding. New tools like Framer X and Modulz can automatically translate UI patterns into React components, allowing developers to build upon designs instead of replicating them in production.

Tools that unify design and development workflows into a single UI will become more prevalent in the years ahead, helping designers to think in terms of components and design systems. Note that the bridge between coding and design tools may not come from the more established players, but the newbies, whose integrative approach is taking over the scene.

2. Best practice: Building a design team

As more companies get interested in developing design systems, they have to reexamine how design teams are built. Documentation of design systems often includes some code snippets of design components. That's why a design team needs to include at least two members: one designer and one developer.

At Netguru, the more people we involve in the creation of a design system, the better the results. Ideally, your team should consist of at least two people, a designer and developer, but ideally, it should be 5 people: four product designers with different expertise (two with UI and two with UX skills) and a developer.

3. Industry trend: The rise of DesignOps

Speaking of design teams, next years will witness the emergence of DesignOps, which is the practice of optimizing the work of individual team members and entire teams to match standards of excellence.

DesignOps is on its way to becoming essential for mid-sized and large product companies whose design teams consist of more than 20 people. But the horizontal role of the DesignOps officer can bring benefits to every kind of organization. After all, it's about making the business more efficient by managing tools, processes, workflows, collaboration, end-to-end employee experience, and more.

DesignOps may affect design systems positively in specific cases. For example, it may come in handy for teams that need to build ad-hoc processes for a given project. Since each project has very specific requirements, technical limitations, and roadmaps, building ad-hoc flows and using different tools is fundamental.

Design teams stand to benefit a lot from a well-defined infrastructure, repeatable processes, and scalable programs that are part of DesignOps.

4. New industry standards: Inspiring visual styles

Keeping up with style guides and design systems published by leading design companies is a must. Here are the two that we think are going to inspire designers to rethink their practices in creating design systems for brands.

MailChimp’s design system

Mailchimp's brand new system reflects the brand’s recent design transformation. It focuses on the needs and skills of web designers/developers; it defines the HTML, CSS, and JavaScript code for every element, even the custom iconography. Code reusability, a consistent workflow, and code logic are some of its crucial features. A web designer can get started with Mailchimp's system right away and create consistent websites or web apps very quickly.

Mailchimp’s design system was developed with the idea of introducing a framework of core components to foster creativity while maintaining harmony. The system adopted a new approach to such elements as animation and illustration that allow communicating a broad range of emotions, take risks, and showcase the creativity of the company’s designers.

Marvel’s design system

Functional design requires a balance between aesthetics and functionality. When the function is critical, it's best to keep things simple. Marvel's system is simple and straightforward – an excellent starting point for any functional design project. For example, its style guide classifies warning colors, text box variations, and animations. The main strength of this system is that it explains every element from the viewpoint of a developer, UI designer, and graphic designer. Its accessibility is an example to follow for teams involved in building a design system. By following the guide, designers can create a cohesive design language, build a platform-agnostic system, encourage change and solid reasoning, and boost cross-team communication.

Audi’s design system

Audi’s design system deserves special attention – it is very comprehensive, well-structured, and exceptionally intuitive. All the elements are organized into categories, making it easy to browse and find assets and documentation needed in the design process. It provides instructions with examples in an interactive manner.

5. New industry standards: A design system is never finished

Design systems are always under development, which is reflected in documentation and libraries available to the public. Just like product design, a design system is never finished. Every iteration of a product and contribution to UX and UI should be reflected in the design system. Oftentimes, it’s a living document that can be shared with the world with some limitations, like the example from shown below:

design system trends and best practices3

Some companies which publish their design systems online also display the information about the current version and its release history. The examples below illustrate the approach to this matter from Salesforce and Auth0.

design system trends and best practices2


design system trends and best practices4


Auth0 also uses labeling for different stages of items in their design system. This helps users and creators distinguish between finished elements and those that are still in progress.

design system trends and best practices

The takeaway

Organizations can't afford to ignore the benefits of having a design system. And these industry trends and best practices will provide guidelines for design system creation across different industries.

Even if your project is already up and running, it's a good idea to build a design system for it. It will pay off in the long run.

Are you looking for a team of experts to help you set your foot in the design system territory? Get in touch with us – we create custom design systems for clients from various industries.

remote work best practices
READ ALSO FROM Product Design
Read also
Need a successful project?
Estimate project or contact us