Figma Design Library
ANZ - Customer Hub
Ownership
When I joined ANZ, the Customer Hub design team was still using Sketch, which had fallen behind as the industry standard. To address this, I prepared and presented a business case to ANZ, proposing a migration to Figma.
The case highlighted three key points
Reduce Costs
Sketch, Abstract, and InVision were in use, driving up costs. Moving to Figma consolidated into one tool.
Sketch, Abstract, and InVision were in use, driving up costs. Moving to Figma consolidated into one tool.
Industry Standard
The migration would bring ANZ in line with the industry standard, while also aligning with other parts of the business that had already adopted Figma.
The migration would bring ANZ in line with the industry standard, while also aligning with other parts of the business that had already adopted Figma.
Collaboration
The shift to Figma would increased collaboration across teams and streamlining workflows.
The shift to Figma would increased collaboration across teams and streamlining workflows.
What I Delivered
A comprehensive Figma UI Library created to support collaboration between designers and engineers across the Customer Hub (Profile & Security) section of the ANZ App and Internet Banking. The transition from Sketch to Figma required the library to be rebuilt from the ground up for future design work.
I centralised components, patterns, and design logic used across platforms, ensuring consistency, accessibility, and efficiency. By creating a robust, scalable system, I aimed to streamline collaboration between teams, reduce handover friction, and enable faster, higher-quality delivery of secure digital experiences.
Design Toolkit
How it works & what it containsConsistency Across Devices
A true multi-platform system was delivered, supporting iOS in both light and dark modes, Android, and web. This ensured seamless experience for customers, regardless of the platform they used.
For Everyone
Accessibility formed a core principle of the design system. Every component was tested to meet accessibility standards, ensuring the experience could be used by all customers. This focus on inclusivity is a vital part of ANZ Bank’s approach to digital design and customer trust.
From Atoms to Patterns
The design system was structured according to Brad Frost’s Atomic Design methodology. It began with foundational elements, such as buttons, inputs, and icons, which informed the creation of larger components and complex patterns. This approach ensured scalability, consistency, and flexibility across the entire ecosystem.
The Figma design library was intentionally built for ease of use.
Components were structured logically, with clear naming conventions and styles, allowing designers to move quickly and confidently. Engineers could reference the same system, reducing ambiguity and making handover seamless.
Components were structured logically, with clear naming conventions and styles, allowing designers to move quickly and confidently. Engineers could reference the same system, reducing ambiguity and making handover seamless.
To accelerate ideation, basic full pages were created within the design system. These templates allowed for rapid prototyping and quick validation of ideas.
Dropdown Pages
Table Rows Page
What’s Inside
components built for flexibility and reuse
variations covering platform-specific needs
My Role
- Built a strong business case to secure stakeholder buy-in for a scalable design library.
- Built and maintained a scalable design library with 200+ components and 2,000+ variants across iOS, Android, and Web.
- Migrated all components from Sketch to Figma, including typography, color, and interaction patterns, to ensure consistency across products.
- Collaborated with stakeholders to evolve the library based on research and product needs.
●