Design and implement a text field component.
Client
Services
Design Systems
Industry
Tech
Year
2020
Challenges
The team faced several challenges in developing the text field component:
Complex Variants: The text field needed to account for multiple use cases, including responsiveness, typography, padding, and spacing.
Documentation Maze: Navigating multiple internal resources made aligning design and engineering goals challenging.
Our Approach
To tackle these challenges, we employed a structured process:
Research & Audit:
Conducted a detailed review of internal documentations.
Audited Google Ads pages to identify text field use cases and existing gaps.
Documented all instances and functionalities, ensuring alignment with established guidelines.
Component Creation:
Prepared a dedicated Figma file branch using templates to avoid workflow disruptions.
Started with foundational atoms (icons and text) and built modular elements with proper auto-layout configurations.
Streamlined configurations by preconfiguring common use cases to enhance usability.
Optimization & Testing:
Reduced complexity by refining the structure, eliminating unnecessary layers, and applying properties like instance swaps and booleans to simplify variants.
Tested all 280 variants rigorously to ensure reliability and minimize bugs.
Documentation:
Delivered comprehensive specifications, including responsiveness, accessibility standards, and user interaction flows.
Added clear descriptions to the component library, making it intuitive for designers to use.
Solutions
Efficient Component Design: Created a highly adaptable text field component with 280+ variants, tailored for diverse use cases.
Simplified Usability: Improved the component’s design to make it intuitive and beginner-friendly, reducing configuration time.
Scalability: Leveraged Figma’s features to future-proof the design and simplify maintenance.
Results
Increased Efficiency: Saved over 1,500 work hours by eliminating the need for reconfiguring text fields.
Enhanced Usability: Delivered a user-friendly component that designers could quickly adapt to various use cases.
Improved Cohesiveness: Strengthened design consistency across Google Ads by integrating the text field into the broader design system.
