Welcome to the presentation of my Design System project, developed during my time on the b/luz Design team. Here, I’ll share the thinking process behind the project, along with examples of components and guidelines. At the bottom of this page, you’ll find a direct link to the Figma file where you can view the full library.

Introduction & Scope

With a team of designers working on different projects and products, the lack of standardized components was resulting in a fragmented user experience. Faced with this challenge, the company decided to invest in the creation and implementation of a Design System in Figma.

Using Atomic Design theory, we created a systematic library of components and guidelines for agile interface development, with a focus on consistency and usability.

Goals

• Standardize the user interface across all products and platforms.
• Increase development efficiency by enabling the reuse of components and styles.
• Improve visual consistency to complement the b/luz brand identity.
• Facilitate collaboration and handoff between designers and developers.

First steps

We began with research and planning. First, we analyzed existing interfaces and identified patterns across all our projects and deliverables.

Next, we defined design principles and brand guidelines. Atomic Design theory was the ideal methodology for building our component library.