Building a design library and optimizing Figma for team usage

Telecommunications Giant | 2024-2025 | 12 months

Team: 2 UX designers

Role(s): Design Ops

Tools: Figma, Confluence

Problem & Opportunities

The enterprise design system does not meet all the needs of the design team building a net-new sales application in a platform that has not been leveraged by development before
With a team of at least 6 designers, there is often inconsistency in custom UI elements that did not come from the enterprise design system, causing confusion for developers
There is an opening for new components and design rules to be implemented as the business seeks to modernize its sales application

Solution & Outcomes

Built a robust design system leveraging Atomic Design principles that amplifies the Company’s existing design system
Created and conducted robust trainings for how to use the design system
Designs are more consistent and development teams are more efficiently able to build the application, expressing gratitude for keeping things consistent so that many complex components need only be built once.
This design system quickly began to be leveraged by other teams throughout the organization

Building the design system…

Developed standards and structure for fluid collaboration

Applied Atomic Design principles to design system to enhance efficiency
Created organizational documentation to improve communication between teams (design system team, development, product)
Established standards and processes including: Usage instructions, annotations, update logs, controllers + instances standards

Mirrored and enhanced existing design system

Reflected existing structure (organization, accessibility standards) into our system
Built upon those components, creating additional atoms, molecules & organisms
Increased scale of entire design library
Shared components across enterprise applications

Example of base design system "Data Table" component

Example of expanded design library "Table" component

I created documentation and upskilling materials to encourage standards and structure for using and building upon the library, including:

Created interactive tutorial on how to use and build upon the design library
Conducted trainings with design, product and development team members about the capabilities of Figma
Implemented complementary documentation for dev + product teams

Excerpts of training materials for using the design system.

Below are some screenshots of some final designs that include components from the design library