Key Takeaways
- Design systems are a solution to a business issue. Organizations must communicate with their users across a variety of platforms with a consistent messaging, tone, and visual identity.
- Design systems are comprised of components that are independent teams, each with its own responsibilities and tools, that are coordinated through common design choices.
- Design APIs are a programmatic way to create, access, and update pieces of a design system. Design APIs can be leveraged by tooling to streamline design and communication processes.
- The W3C Design Tokens Community Group strives to provide a standard for design tokens and promote design tokens best practices.
- An agreed standard increases interoperability between creative tools (e.g., synchronizing localization strings from Excel to Webflow, synchronizing colors, icons, and images from Figma to Powerpoint).
In the words of Brad Frost, author of the book Atomic Design:
As the number of devices, browsers, and environments continues to increase at a staggering rate, the need to create thoughtful, deliberate interface design systems is becoming more apparent than ever.
Google’s Material Design, released in 2014, helped popularize design systems as a means to provide consistency and efficiency.
Companies like Airbnb, Uber, and IBM, have been using design systems across their digital portfolio to achieve visual consistency and the efficiency at scale of their design process.
Design APIs and design token standardization are subsequent steps towards further distribution of design decisions across an entire company’s miscellaneous teams and tools.
Posterior to his presentation at UX Ghent (Why your design system needs an API), InfoQ interviewed Louis Chenais on the rationale behind design APIs and how they can benefit companies today.
InfoQ: Can you tell our readers about you? How did you get involved with design systems?
Louis Chenais: Hi everyone! I’m Louis, 28 years old, I’m French, and I’ve been living in Paris since ... forever. I’ve always been curious about computer science. Because of this, I became the official repairman of everything that blinks in my circles.
I’m passionate about several topics:
- Frontend development
- Sharing what I know
- Good food
As a frontend developer, I like to write code that is resilient, performant, and helps the end-user.
My professional experiences led me to make responsive the marketing site of a startup called SportEasy. Next, I worked in two digital agencies. I had the same issues when working with designers in all these environments. I was tired of spending time reinventing the wheel.
These experiences led me to tackle the subject of design systems with my associates. We created Specify in 2018 to help companies manage their branding at scale.
InfoQ: I like how you relate design systems to business concerns in your presentation at UX Ghent. So what is the business issue that design systems solve?
Louis Chenais: Close your eyes and put yourself in the shoes of someone working for the ACME organization.
Your organization uses the following platforms to communicate:
- A marketing website
- Several mobile applications on iOS and Android
- Some ads in the subway and in the street
How do you ensure all of these platforms are aligned with each other?
How do you know if the ACME’s brand identity is applied consistently?
How would you react if the ACME’s logo was different on your website and on the iOS app?To communicate consistently, an organization needs to define its brand identity. What makes an organization unique is a sum of many design decisions linked together like colors, typography, voice and tone, icons, images, and many more.
A brand identity must be consistent to everyone, everywhere, all the time. You are forced to deal with constraints you can’t control nor anticipate. Your branding must be as flexible as the variety of situations in which it will be displayed. Systemize your branding to make it adaptable. Systemize your branding to make it resilient. Systemize the process of creating and maintaining your branding.
In other words, you need a design system.
InfoQ: Can you remind us what design systems are and how they solve the previously mentioned business issue? What makes a design system a system?
Louis Chenais: Design systems are the story of how an organization creates and maintains a digital product. I also like the following definition from Nathan Curtis: "A design system isn’t a project. It’s a product, serving products."
As Alla Kholmatova stated in her book Design Systems, the concept of documenting and sharing design patterns in various forms has existed for a long time. One of the earliest examples of system documentation is Palladio’s The Four Books of Architecture, published in 1570. Palladio provided rules and vocabulary for designing and constructing buildings, including principles and patterns, with detailed illustrations and explanations of how they work. Then, in modern graphic design, systems have also long been documented from early typography and grid systems to Bauhaus design principles. Finally, for the last few decades, companies have documented their visual identities in the form of brand manuals. NASA’s Graphics Standards Manual from 1975 is one of the more well-known examples.
For centuries, people were only communicating using printed materials. Those days are gone and now software is eating the world. Graphical charters had to evolve into something else that incorporated digital constraints. Design systems are the logical evolution of graphical charters.
By dropping one-off designs in favor of systems, organizations can communicate coherently on a myriad of devices, environments, and contexts. Design systems help organizations scale their branding.
To understand why a design system is a system, let’s go back to the aforementioned ACME organization:
- ACME is composed of several teams working together and using the ACME brand.
- Those teams are composed of several people.
- Each person is using different tools to access and use the ACME brand to create the ACME product.
Those relationships between both people and their tools are the backbone of a design system:
A design system is a system that helps you create final communication materials in a logical way from a base branding. Using a design system is like composing music. You have at your disposal a set of notes and some general rules to help you compose something cohesive and harmonious.
InfoQ: What are design APIs and what business issue do they solve? What programs, systems, or entities are there to interface? What operations or requests are there to enable?
Louis Chenais: Your organization’s design system contains a multitude of smaller and larger design decisions. These decisions are created, read, updated, and deleted following the evolution of your branding. I used those words purposefully. It’s the same ones used to describe actions developers do on data through APIs.
Design APIs solve the same issues: be able to control the design decisions in an agnostic environment and use them in every environment needed. This way, you can easily create your products using these decisions without worrying about the environment you will use them in.
The simplest way to interact with a database is through an API. The best way to interact with a design system is through an API. According to Matthew Ström: "Design APIs are the evolution of design systems" and I couldn’t agree more.
Your design system is as valuable as the trust its consumers have in it. It means that keeping your design system in sync is mandatory for your organization. And the best way to keep information up to date is to allow data to navigate freely between the tools within your design system. And the best way to distribute data from one place to another is by using an API.
Design APIs give you flexibility to feed and consume your design system.
InfoQ: You are a member of the W3C Design Tokens Community Group. What is the constituting objective of the group? What interesting workflow does standardization facilitate or enable?
Louis Chenais: To understand what the W3C Design Tokens Community Group is, I will first explain what design tokens are.
Design tokens are names used to express design decisions in your organization’s design language. Those names are meant to be used and understood by humans like you and me. Design decisions can be a color, a typeface, a border radius, an icon, a font size, a gradient, or even an animation duration.
The DTCG has 2 main objectives:
- Provide a standard for design tokens. It will allow tool creators and tool consumers to have quality design that scales thanks to design APIs.
- Manage the design tokens community and promote design tokens best practices.
As we saw, a design API allows data to be distributed from one tool to another. But we all know that colors you created in Figma are only usable in Figma for instance. The lack of interoperability between creative tools means that all work created within a tool is confined to the limitations of that tool itself. It limits collaboration and creative possibilities.
This is why our market needs a standard for design tokens.
A standard for design tokens coupled with a design API opens so many possibilities:
- Updating a Dropbox folder creates a new pull request in Github
- Synchronizing colors, icons, and images from Figma to Powerpoint
- Synchronizing localization strings from Excel to Webflow
- Managing brand guidelines from a single place and seeing it live in a myriad of contexts
InfoQ: For the interested readers, what are resources (articles, influencers, blog, books, meetups, etc.) to learn more about design APIs?
Louis Chenais: Design APIs are a fairly new topic and resources are pretty scarce. However, this is not the case with design systems.
Books:
- Atomic Design by Brad Frost
- Design Systems by Alla Kholmatova
Community:
People:
Meetups & Conferences:
Articles:
- Design APIs: the evolution of design systems by Matthew Ström
- Introduction to design tokens by Louis Chenais
- The design system between us by Ethan Marcotte
InfoQ: Lastly, you started specifyapp.com that you call a Design Data Platform. Can you elaborate on what that is and the value proposition of Specify?
Louis Chenais: At Specify, we think our ecosystem needs a platform that helps organizations manage their design data at scale. We also think that what exists in the data market can be transposed into the world of design systems: siloed teams and tools, APIs, and a cruel need to build a single source of truth.
Specify’s mission is to empower organizations to manage their branding at scale with confidence. Specify is a design API connecting all the tools within your organization’s design system. We help organizations unify their brand identity by collecting, storing, and distributing their design tokens and assets—automatically.
Since a picture is worth a thousand words, here’s one that will help you grasp what Specify really is:
About the Interviewee
Louis Chenais graduated from HETIC: a French school teaching web product creation. He worked as a frontend developer in startups and web agencies. He co-founded Specify in 2018 and holds the position of Chief Evangelist. His job is to communicate about Specify and promote design API usage within a design system. Since 2020, he is an editor for the Design Tokens Community Group working on a standard for design tokens.