*This article is from Web Designing, a magazine published in April 2024.

In recent years, design systems have gained attention. We bring you a special roundtable discussion featuring Ryo Sampei, the founder of Spectrum Tokyo as the moderator, along with Hiroki Tani from Figma Japan Inc., and Noriaki Kawanishi from DMM.com LLC to talk about how design systems are built and operated, and also about what it brings to the future of design.

Hiroki Tani | Designer Advocate at Figma Japan Inc.
Hiroki has participated in numerous large-scale design system construction projects for well-known domestic companies. Currently, he guides Figma’s best practices and content creation, as well as supports and advises other companies in building design systems. (Left in the photo)

Noriaki Kawanishi | Experience Designer at DMM.com LLC
Noriaki is involved in supporting the creation of design systems within DMM.com and promoting their internal implementation. Positioned across over 60 internal businesses, he supports designers and plays a role in growing services and organizations. (Right in the photo)

Ryo Sampei | Producer at Spectrum Tokyo
Ryo is the founder of Spectrum Tokyo. Through various content dissemination and events, he actively works to expand the circle of people interested in design by thinking across the diversity and fun of design. (Center in the photo)

The background and essential definition of the spread of the term design system

Ryo: In recent years, design systems have become a hot topic. Can you share your thoughts on the background of this trend?

Hiroki: The trigger was around 2017 when large design systems like Atlassian Design System and Lightning Design System (Salesforce) were featured in the media, garnering attention. However, even before that, in the world of web production, there has been a universal attempt to standardize for efficiency, so the foundation was already there.

Noriaki: It also seems related to the scalability of digital products. With the need for multi-device compatibility and a wide range of media and content, designs that ignore engineering are no longer viable.

Hiroki: Indeed, within this trend, the idea of separating appearance and structure has become a prevailing concept. The term design system fits into this trend, spreading with high expectations.

Ryo: There is a debate about whether we can call what was traditionally referred to as a color palette or component collection a design system. What are your thoughts on this matter?

Hiroki: Personally, if those assets come together and function within an organization, and if the organization refers to it as a design system in its context, then I think it’s acceptable.

Noriaki: It is important that the entire organization recognizes the aggregation of those assets as trustworthy resources. Creating something over-the-top that only designers use would make it no different from a simple color palette.

Hiroki: Conversely, being too fixated on the words design or system can make it exclusive to designers and engineers, creating a distance from stakeholders who should be involved. The practicality of how it is perceived and functions within the organization is more important than a strict definition.

The perception of design systems and the realities of the creation process

Understand the purpose before charging ahead

Ryo: When considering the creation and implementation of design systems, what are the important aspects to consider?

Noriaki: I believe it is essential to consider the scale and the number of people involved. In extreme cases, if there are only two people involved, they can simply work side by side. Trying to mimic huge design systems like Atlassian Design System can lead to losing sight of the original purpose due to the mismatch in scale, and the act of creation becomes the goal, a common failure pattern.

Hiroki: It is common to end up with too much when trying to create everything. Often, it is sufficient to create a color palette or style guide tailored to the actual challenges on the ground.

Ryo: The growth phase of the business or team also plays a role, right? If starting small, it’s better to focus on speed and create the necessary toolkit, while in a phase of organizational expansion, there may be situations where an approach is needed from the company’s philosophical standpoint.

Noriaki: I think there is a tendency to get carried away by the big word design system and rush to create something unique. However, without first assessing existing examples that match your scale and creating what you believe is necessary for yourselves, unfortunate incidents can occur, such as spending resources and time only to realize that you could have based it on existing frameworks like Material UI.

Hiroki: Because a design system is not something that can be built overnight, it is necessary to consider how the cost of investing in it aligns with the outcome from the beginning.

Noriaki: The required toolkit varies based on the organization’s size, phase, and the challenges on the ground. Even with a design system, there is no need to ambitiously create everything from the start, such as brand guidelines. It is acceptable to add components like a component library or guidelines as a resource kit based on the visible challenges in the field as needed.

How to capture business owners’ interest? Design systems and cost issues

Ryo: The talk about costs came up, but in reality, how long does it usually take to work on creating a design system?

Noriaki: At DMM.com, the front-end development team of the Platform Business Division took the lead in constructing a design system called “Turtle.” This system, which focuses on essential parts directly related to our core business, such as product purchases and member registrations, took over 6 years, including the preparation.

Hiroki: In the projects I’ve been involved in, it takes at least half a year to a year to articulate and share the philosophical aspects like the company’s mission and values. From there, starting with a color palette and going through the process of creating various assets, it gives the impression that it takes at least 2 to 3 years. And then there is the phase of establishing operation practices…

Noriaki: Since it’s a long journey, we want to avoid getting stuck halfway due to costs, ending up unused and back to square one. It’s important to share the purpose and scope with the business owner. Based on that, a decision on whether to invest in it is necessary.

Ryo: It’s common for business owners to show reluctance due to costs. How do you align perspectives in such cases?

Noriaki: I often phrase it as “Let’s create the necessary structure for organizational challenges” rather than “Let’s create a design system.” It involves visualizing the challenges and specifically detailing the assets required for the design system.

Hiroki: Conversely, if the business owner’s awareness is lower than the on-ground challenges, we sometimes start minimally from aspects that the business owner is likely to empathize with. For example, creating a template for sales presentation materials. Starting from a clear entry point, we aim to make them understand the importance of brand consistency and a unified user experience gradually.

Noriaki: The key is to establish a common language through the design system, clearly showing what will happen. It’s about how design, engineering, and marketing can collaborate more easily, contribute to product quality improvement, productivity enhancement, or reduce learning costs. Providing transparency to business owners about the significance of investing in creating a system for addressing specific challenges is essential.

Design system operations, establishment, and the future of design

Ryo: Regarding the operational phase, are there people becoming too strict and following the book too much about design systems and becoming gatekeepers?

Noriaki: They do arise, and I believe there is a need for it. What’s important here is not to become the “police” but to establish the design system at the core of the feedback cycle. It’s when the entire organization aims to operate the design system as a foundation for better discussions that we can finally take the first step toward operations.

Hiroki: In terms of effectively utilizing the design system, establishing the organization and structure for operations is crucial. Autonomous functions are necessary to maintain a certain order, but on the other hand, if creativity and usability are lost due to constraints, it can be counterproductive. Designing governance that includes the element of play is even more challenging but essential.

Ryo: Shifting the topic a bit, what I find interesting in my involvement with design systems is the chemical reaction between the design system and its users. Through the design system, no matter how outrageous the output may be, the brand integrity is maintained. Sometimes, remarkable outputs are created by non-designers. If that’s the essence of a design system, then it’s not just about setting boundaries but about ensuring brand consistency with a minimal foundation while supporting users’ freedom.

Noriaki: Viewing the design system as a product, the users become the project stakeholders who use it. Therefore, just like in regular product development, it’s essential to evaluate whether the design system is loved by its users. Ultimately, achieving a state where everyone in the organization willingly uses the product can be considered the operation and establishment of the design system.

Spreading the joy of design to as many people as possible

Hiroki: For example, engineers, sales departments, customer service teams – even those who are not designers can produce consistent outputs just like designers. Thinking about creating such products feels like a dream come true.

Ryo: There’s a company called Design Systems International overseas that develops design generation tools for each brand, allowing anyone at the delivery end to create designs for that brand. The tool they use for development, called “Mechanic,” is open-source and both creating and using it is a lot of fun. When you interact with the design systems they create, it feels like expanding the act of design to many people, giving non-designers a positive experience.

Reference:
Unleashing Design System Potentials with Code

Hiroki: In projects I’ve been involved in while creating a design system, I’ve noticed that engineers also start sharing their opinions and thoughts on design. With the design system at the core, discussions can now occur at the same table, where previously, non-designers may have held back from expressing their thoughts. The positive reception of the design system in this regard was truly moving.

Ryo: The true essence of a design system is to enable as many people as possible to be involved in and create designs.

Noriaki: On the flip side, there are concerns that if the design system functions well and anyone can design, traditional designer roles may be at risk. However, in reality, many designers can now redirect their surplus resources towards their areas of interest, pushing the boundaries of creativity and exploring new territories. This career reconstruction not only has a positive impact on individuals but also organizations. I encourage embracing change without fear.

Ryo: It would be great if the widespread adoption of design systems led to exciting changes in the field of design itself.

Text: Asuka Hara（artebaleno）　Photo: Hidetaka Yamada

Special Thanks to

Purchase Web Designing April 2024 （Amazon Japan)