Building Scalable Design System Components in Figma

Verizon Design System

  • Year

    2025

  • My Role

    Lead Experience Designer - Design Systems

Note: Due to confidentiality agreements, visuals and product-specific details have been simplified or recreated. The work shown focuses on my design process, responsibilities, and outcomes while respecting client and employer confidentiality.

About Verizon

Verizon is one of the world’s leading telecommunications companies, providing wireless, broadband, and digital services to millions of consumer and business customers. Operating across multiple countries, the company delivers reliable connectivity, entertainment, and enterprise solutions through an extensive portfolio of products and services.

About the project

Verizon Design System is the central design system at Verizon. The main objective of this project was to update the existing design system with brand updates.

My role

I worked on design system components end-to-end from research and discovery through Figma implementation. I owned component architecture, built scalable Figma components, maintained the shared design library, and collaborated closely with engineering to ensure design and implementation remained aligned throughout the development lifecycle.

Component Development Process

Every component at Verizon followed a structured process to ensure consistency, scalability, and strong design-to-code alignment.

Discovery

Understand the component’s purpose, use cases, usage patterns, and edge cases. This phase also explores opportunities to consolidate similar variants into a single, scalable component.

Specifications

Create a detailed specification that serves as the single source of truth, defining the component’s behavior, properties, states, and interactions.

Design & Development

Translate the specification into both Figma components for designers and coded components for developers, ensuring consistency across design and implementation.

Visual Quality Assurance (VQA)

Compare the implemented component against its Figma counterpart to identify and resolve any visual or technical discrepancies, ensuring high design-to-code parity.

Source of Truth

Component Specs serve as the single source of truth for every component and design token within the design system. They document how a component is structured, configured, and behaves, ensuring a shared understanding across design and engineering teams.

For the components I owned end-to-end, I collaborated closely with designers to validate new patterns, gather feedback, and ensure they addressed real product needs. I also partnered with developers to align the component architecture with its production implementation, enabling design-to-code parity and reducing ambiguity during handoff.

Architecting Figma Components

At Verizon, we designed Figma components to closely mirror their code implementations by aligning property names and component APIs, ensuring strong design-to-code parity. By leveraging features such as Variants, Boolean properties, Text properties, and Instance Swaps, we built flexible, reusable components that simplified designer workflows while reducing ambiguity during developer handoff.

While Figma provides a powerful foundation for component creation, certain implementation constraints required us to adapt our architecture to guide designers toward supported configurations. In some cases, we introduced architectural patterns that prevented unsupported combinations and encouraged correct usage.

Below are some strategies we followed to make the components easy to use.

Communicating Unsupported variants

We used Figma Boolean variables along with Variable Modes to show contextual guidance whenever a designer selected a configuration that was not supported by the system. Designer would see a message and can take actions accordingly.

Providing visual cues for the Props

Identifiable symbols were incorporate into the property names to provide quick visual cues and make complex options easier to understand at a glance.

Component Usage Instructions

There were scenarios where component architecture alone could not enforce every design constraint. In those cases, or whenever additional context was needed, we supplemented components with clear usage guidelines that helped achieve a specific configuration.

Dynamic Type scaling

While Verizon was expanding the design system to include native Android and iOS library, dynamic type came into the picture. Dynamic Type is an OS level feature that lets users change text sizes across their devices for better readability

We wanted to explore if we can bring it to Figma as well. As per our understanding, no design system component libraries have added a feature of dynamic type scaling for their components.

Variable Modes to the rescue

Our engineering team has identified out the scaling factor that needs to be applied for each text size. From the values they shared, we were able to create variable modes for each of scale for android and iOS with the respective value. This also translated to the visual elements like icons and checkboxes as well and not just text.

After rigorous testing and catering to various edge cases, we were able to achieve the dynamic type scaling for all the components in Figma.

This enabled designers to test how their designs scale in all the accessibility sizes even before handing it off for development.

By combining thoughtful component architecture with intuitive guidance and documentation, we created a design system that was easier for designers to use correctly while ensuring a smoother and more predictable handoff to engineering.