When the Design Kit Went Dynamic

Euphrates Dahout is a Figma expert extraordinaire. She likens herself to a gardener — maintaining the ever-growing garden of the visual assets used to illustrate the Material guidelines and Design Kit. “Good UX is when you don’t notice that things are working. When you experience friction, that’s bad. My job is to make sure you don’t notice.”

As part of our celebration of a decade of Material Design, Euphrates looks back on the realization that led her to build the “Asset Creation Library.” This library simplified the process of updating components and significantly reduced the amount of manual work for Google designers. Her contributions support the growth of this widely used design system, and across projects she always emphasizes continuous learning and adaptation.

When I joined Google as a production designer in 2021, the Material team had just started designing the first components of Material 3, and we were starting the arduous process of making all of our guideline assets.

By “guideline assets,” I mean the visuals that illustrate the Material guidelines. For instance, on m3.material.io you can find guidelines with all the specs you need on where to put a button in your app, but you need drawings to show what they mean in practice.

That seems fairly straightforward… but it’s not. There are thousands of these visuals, and they all include tiny art direction details down to the styling of a stroke. At the time I joined, designers were using local templates stored in each of their own files, so each time a new decision was made, they had to change every component by hand.

For example, we were using a default dashed line for annotations across the guidelines. At one point our creative director made the decision to update it to a dotted line, giving the element a crafted feel and greater symmetry across use cases. So the team had to go through maybe 2,000 images, selecting every single line by hand and updating the stroke value from a dash to a dot! We have these brilliant UX design minds at Google, and they were working around the clock to hard code the changes.

When I saw them changing each stroke in every asset one by one, I thought, “This is absurd.” So I made something called the Asset Creation Library, a collection of everything you need to make visual assets using Figma. In Figma, every visual detail can be made into what’s called a “component,” something that you reuse over and over again, and when the original instance changes, all of the other instances also change. So if you have a green button with white text and you want to make it blue, you just update the original and all the other copies are now blue. When we harnessed the power of components in Figma, designers were so relieved that they didn’t have to do all this stuff by hand anymore.

In addition to the assets, it’s important that the components themselves are logical and easy to use. A component means something slightly different in a UI system than in Figma — for instance, a whole button, including states and animations, would be a component. The UI component that was the biggest thorn in my side was the switch — the toggle that you can switch on or off, often used in Settings. I had to take that one down to the studs and completely remake it in Figma, because it’s such a complex component with so many variants, state layers, and motion.

Another vital UI component is the list. Lists are way more complex than many people realize, and they do so many things, from powering menus to offering choices for settings. Lots of different combinations of things can make up a list: a radio button, an image, an avatar. When creating the Material 3 guidelines, we started with over 700 different list variants, and were able to get that down to about 45. We’re humans. Mistakes happen sometimes when things change. Maintaining 700-something variants is a lot harder than maintaining 45.

Then, in 2022, Staff Visual Designer Ayan Daniels kept asking me to build a similar component library for Material Design. I kept saying no; that’s a whole other job! But she gave it to me anyway, and ever since that moment, I have owned the Design Kit with my whole heart and chest. I gave it a complete overhaul, which it needed because so many designers were contributing things piecemeal — there was no editor, so it was like reading a book where different people have written every paragraph.

Both Material 1 and 2 were revolutionary. But they relied on defaults — I remember having the primary HEX color values memorized for Material 2’s light mode and dark mode. Material 3 is a big swing that I appreciate, and one of its big innovations is the amazing user-chosen personalization. So it’s more important than ever that our library and our sticker sheet are accurate to make sure the personalization works.

In our current kit, the components are all hooked up with prototyping: If you put a switch or a button in your mock and you click on it, it operates like it would in real life. And in our external kit, we have code snippets for Dev Mode, which we partnered up with Figma for. There’s a huge difference between a sticker sheet that has a handful of things versus this intense, cool, variable-enabled system with all the latest Figma capabilities.

For Material 3 we have the most complete, most robust, most flexible design kit ever. And people are using it. Designers use our kit more than the second-most popular kit by a factor of ten. Externally, the design kit has a million and a half users so far, and internally, 1,500 teams use it. With great impact comes great responsibility. If our components aren’t accurate, it would be chaos. It’s more important than ever to look at a system holistically and make things easy to understand, so that nothing ends up having to be hard coded.

The design system and Figma are both constantly evolving. We don’t do set-it-and-forget-it work. The metaphor that I use is gardening. A design system grows and evolves, and the seasons change. You need a gardener to tend to it, and to make sure that it’s healthy and productive, so that we can enjoy the fruits of our labor.