Hire UsThe company leading the way for autonomous driving needed a design system to help them maintain consistency and reduce redundancy across all their internal tools.
Cruise has many internal products that allow its innovative, autonomous vehicles to operate smoothly. They needed a design system that would reduce component creation redundancy on both the design and development sides. This would allow all product teams to stay aligned and ship features faster than they previously could.
Design systems, UI/UX, Product design
Design system, Multi-brand design system, Token library, Component library, Documentation, Training
Our primary goal was to align the new design system to code as closely as possible. Due to this, we needed to take into consideration any pre-existing components and token structures in place to ensure nothing would break upon implementation. In addition to this, we needed to create consistency throughout all of their internal products by evaluating and defining the commonalities. Ultimately using those similarities to inform the baseline styles for the new design system.
To ensure better alignment between design and code we opted to use the Figma plug-in, Tokens Studio. It syncs directly to a Github repository that engineers can use and is compatible with Figma variables so that designers can easily theme within Figma’s UI.
The design language for Cruise’s internal tools was generally established, but lacked clarity on how it was meant to be used. Therefore creating many inconsistencies across their wide range of products. We started with creating color primitives that would be able to support their data visual needs, created clearer semantic naming, and defined better spacing and sizing structures.
There was a great need for density options due to the internal tools teams dealing with large quantities of content while the consumer teams would eventually need much more breathing room. Therefore, we created 3 density options; condensed, standard, and comfort for a variety of container components to allow for this type of flexibility.
Atomic design principles were used to create components for this design system. We avoided the use of unpublished base components whenever possible to allow for an better consumer experience. However, smaller components become nested in more complex container components, but are still able to be used individually as needed. It allows for better clarity on how components are used together.
A table component is a great example for this. There are atomic components that are nested within the header and body cell components—checkbox, text, button groups, etc. Designers can choose to use these to create their tables, but we also have pre-built table rows that gets them a little further along in the creation process. These can be broken and customized as needed and beats having to copy and past a table cell over and over.
We provide all our design system clients with detailed documentation that include video walkthroughs, instruction on high level topics, and information about how to use each and every component available.
They utilized dark mode by default for their internal tools and wanted to introduce a light mode. With the use of design tokens and the correct token structures this was able to be quickly implemented. Tokens Studio is compatible with Figma variables so that designers didn’t need to use the plug-in to switch modes on their design views. They could simply make this adjustment via the layers panel directly in Figma’s UI.
A Figma-native, platform-agnostic, and multi-brand design system to unify design for one of the fastest growing B2B tech companies and their ever-expanding customer base and suite of products.
Read more