Hire UsA 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.
Guideline was undergoing a rebrand and needed a new, Figma-native design system to help roll out their new brand while unifying the design language across their various products and properties.
Design systems, Design tokens, Figma, UI/UX, Cross-platform design, native apps, responsive web
Design system, Design guidelines, Token library, Component library, Design system training
Guideline had just gone through a rebrand, by Ueno, that needed to be translated to a new, Figma-native design system. They understood how crucial it was to establish a design system to roll out the brand but also scale the company’s growing product offerings quickly and efficiently.
Our audit found that the Guideline design team already had beautiful user interfaces as well as previous explorations for a design system that were quite good. With these base styles, combined with the new brand identity, we had a solid visual design direction.
We then set our focus to translate these styles to a scalable design language that would work well across multiple platforms and devices, and for multiple branded themes—serving bespoke look and feels to their different audiences and user types.
The first step in establishing our platform-agnostic design language was to capture and translate the design decisions made during the branding process in a visual style framework using design tokens.
To start, we established a base set of color primitives based on the new brand palette by expanding each color to include lighter and darker shades to account for additional interaction states and use cases when building digital interfaces. Once we had our color primitives, we then created semantic palettes to serve specific use cases like foreground, background, borders, etc. We then moved on to define the rest of our design tokens including grids, sizing, spacing, shadows, borders, and radiuses.
After reaching our initial draft of our style guide and design tokens, we used the lists of components used across existing product we gathered during our audit, prioritized them based on commonality, focusing on buttons and other smaller components that are most often used and combined to create larger components and expanded from there.
It is critical that all the styles and components work well together. We test this by recreating existing UIs with the new system, allowing us to identify visual issues in our styles while testing the user experience of the components and interaction affordances for end users and of the team of Guideline designers using our design system to design in Figma.
It’s important that everyone feels comfortable using and implementing the design system. Our guidelines give a straightforward explanation of various styles and components and how to use and employ them in designs.
We often schedule and record live training sessions with the internal design team, create training videos in Loom, and draft an initial governance process for versioning and how to maintain and evolve the system over time.
Webprints is a startup that aims to build a vibrant 3D printing community through their social platform, allowing users to easily discover, download, and upload 3D projects for seamless sharing and printing. The Forge team set out to create a design system that enables rapid development of new features, themes, and even new products or brands, without compromising consistency.
Learn how we built the design system