Rebuilding Confluent's Design System

Context

When I joined Confluent as a Product Designer, our team was struggling with a fragmented workflow and miscommunication that resulted from being spread across multiple tools like Sketch, Abstract, and Zeplin. After exploring and testing our options, I concluded that Figma would consolidate our tooling and simplify

our workflow.

Over six months, I led the migration to Figma and the rebuild of our entire design system, resulting in significantly improved design consistency, collaboration, and team efficiency.

Challenges

  • Lack of clarity on design guidelines, causing inconsistencies across products and features

  • Confusion with component versioning, resulting in designers accidentally overriding each other's work

  • Upcoming brand refresh that would result in a lot of UI changes

Outcomes

  • Enhanced Collaboration - Improved collaboration & communication within the team and with engineers

  • Clear Process - Designers could effectively contribute new components and patterns to our libraries

  • Boosted Design Consistency - Heightened consistency and standardization across all new projects

Discovery

I kicked off the process by conducting 1:1s across the team to identify key pain points and priorities.

Pain points:

  • Lack of clarity on design guidelines when creating components

  • Confusion with component versioning



Priorities:

  • Establish processes for component contribution and versioning

  • Restructure library organization for easier discoverability

  • Define component variations and states​

Audit

Then, I audited our DS, identifying:

1. Inconsistencies/areas where we needed to clarify design guidelines

2. Components to be deprecated

3. Components to be prioritized (i.e. most frequently used components)

Organization

Following the audit, I established our library organization system. I instituted 1 library file per component type in order to manage component changes and contributions.

Establishing a single file for each component allowed everyone on our team to contribute to the DS in a way that also helped others understand which component in their designs would be updated when accepting library changes.

Atoms

I decided on implementing the atomic approach, creating larger components out of other smaller components to decrease the work required to update all of a component's variations when changing a property (radius, dropdown spacing, etc).

Primitives

I also created primitives (base components) for some component sets in order to reduce time spent editing all variants.



For example, the hero banner primitive is a composite base component, composed of all the elements found in its different variants and constructed responsively so that all of its children responsively resize. When the primitive changes color or type placement, all the downstream components change as well.

Overrides

I instituted a layer naming system using capitalized names to indicate which layers are modifiable, and “optional” to indicate which layers can be hidden.


This gave designers more clarity on what control they have when editing a component instance.

Building together

After establishing our component construction guidelines, and color and typography styles, it was time to bring the team into Figma.

With no one dedicated fully to our DS, I had to effectively delegate and prioritize our DS rebuild in order to move us into Figma as quickly as possible.

I developed a spreadsheet to delegate and track our team’s progress rebuilding our components.

Polishing the MVP

After our core design system was rebuilt, my team was able to start fully operating in Figma.



I continued to improve the DS by:

  • Grouping similar components as variants in component sets

  • Refining component behavior based team feedback

  • Building documentation

  • Integrating Figma with Storybook to bridge design and engineering

Conclusion

Re-creating a design system was a big feat, but ultimately this effort made my team more efficient and consistent. There’s no one-size-fits-all system and a lot of other process changes had to be implemented in order to solve some of our other issues outside of our design system, but overall I really enjoyed a learned a lot from this process.