Building Scalable Design System Components in Figma
Verizon Design System
Company
Verizon
Year
2025
My Role
Lead Experience Designer - Design Systems
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
Owned components end-to-end: discovery, specs, Figma architecture, and VQA
Designed Figma components to mirror code, improving design-to-code parity
Introduced dynamic type scaling in Figma using variable modes
Maintained the Figma library and managed versioning and releases
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.
Design Specifications
Detailed component specification in Figma that serves as the single source of truth, defining the component architecture, behavior, properties, states, and interactions.
Development
Translate the specification into coded components by developers, ensuring consistency across design and implementation. Developers are always in loop during the Specs creation process to ensure design-to-code parity.
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. 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
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.
We also made sure we incorporated the possible interactive states for all the core components that became helpful for prototypes and edge case scenarios.
While Figma provides powerful features 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 components as well.
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.
The illustration shows how the selection works and not the complete list of options the designers see.
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.
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.