Billy reviews the design system documentation for Audi and shares his 3 big takeaways to help you build better design systems in Figma.
Design Systems Course:
bit.ly/shipwright-design-syst...
Do you ever look through other design systems for inspiration?
It’s a fun way to improve your design systems knowledge and get ideas.
This week I took a look at AUDI AG's design system. I didn’t have access to a Figma library, so I couldn’t see how they build components, but with the new features dropping on Figma, I can see some fantastic opportunities here.
See it for yourself here:
www.audi.com/ci/en/renewed-br...
Some of the things that really stood out to me here.
🤯 Brand guide and design system live in one space.
This is amazing, really bringing the entire ecosystem together from physical spaces to the products they’re designing. I love this overall approach.
🤔 Different alert colors for different themes!
This is really important, we want to provide the best color themes and sometimes that means changing our color values to look better and hit accessibility values based on the background.
AUDI AG has a multi-themed system that can be mixed and matched, so having these additional values is a huge win.
🙌 Storybook interactive component library
The real design system lives here and provides great notes and direction on applying these components. Having the ability to explore different options as a designer gives us a really strong understanding of the why behind these decisions.
Some of the best parts here for us would be how they talk about the best use cases for each component and the documentation for how we want these to be used.
Things like button language are a huge win and help us designers who are using the system fill in the gaps we might have.
Overall this is a great design system reference site. Once the Figma library is released, I want to pop back in and see how they’re actually building out components.
Next, I think I will look at Polaris and see how we can use that when building apps within Shopify.
Segments:
00:00 - Intro
00:27 - What Are We Looking For?
00:48 - Audi Brand Design System
06:00 - React Library in Storybook
11:49 - 3 Big Take Aways
12:36 - Design Systems Course for Figma
#design #designsystems #designer