Keeping the ANZ Plus web design system up to date with automation
By Oliver Gassman. How our design tokens and icons are kept up to date in our code base, with daily updates pulled from our Figma design libraries by our CI automation suite.
High level overview
The designers of ANZ Plus are always striving for world class design assets, constantly updating and tweaking assets, based on internal, external and automated feedback from customers, colleagues and accessibility tooling respectively. Consuming these constant updates is repetitive work from an engineering perspective, and with Figma recently releasing their REST API, we have a perfect candidate for automation.
Every morning, an automation workflow kicks off that pulls the latest library data down from the Figma API. The automation flow runs a series of transforms and checks comparing it to our existing code base. If changes are found, CI runs our suite of visual regression tests set to update the image snapshots, and opens a pull request ready for our engineers to review the changes.
Ocean Blue - our design system for ANZ Plus Web
The initiative to implement a design system, internally known as Ocean Blue, was kicked off with a partnership between engineers and designers at the start of 2017. In the early days of the ANZ Plus program, the Ocean Blue team set a mission to build a new design system that was scalabe, highly automated, performed well on a range of devices, and provided the best possible user experience for our customers, designers and engineers.
The current version of the system is built on a foundation of React, using Vanilla Extract for styling and themes. We employ SVGR to transform our SVG icons into React components, and Style Dictionary to transform our design tokens into Vanilla Extract themes, and a collection of other useful styling languages such as CSS variables for static sites, Swift UI for iOS apps, and theme assets for Android apps.
Ocean Blue is structured as a monorepo, managed by the Nx framework, and individual components are versioned using semver, tagged as releases in GitHub, and then published to an npm registry on the ANZ internal Artifactory. The monorepo also contains our documentation website, which was developed using NextJS. The main consuming applications of the design system are built using of Next. Thus our aim was to use it as a dogfooding exercise that would allow us to see compatibility issues before the components are published.
Figma libraries
Our designers use Figma for designing all of our screen layouts. They are able to leverage the built-in libraries and variables functionality within the tool to improve their efficiency and simplify maintaining consistency between multiple designers, working on disparate apps. Variables is Figma's answer to design tokens, allowing colours, spacing, text formatting and more to be stored as a single source of truth for both designers and engineers to access using their tooling.
The power of variables was multiplied when we connected them to our React codebase in Ocean Blue, via the Figma API.
In a similar fashion, the Figma API has allowed us to use automation to export individual icon SVGs directly from the Figma library, meaning our codebase will always have the up to date icons available that have been used in the latest feature designs.
Automation
As our source code is stored in GitHub, we use GitHub Actions to run our CICD workflows and automation. We run all the expected CI workflows such as unit tests and eslint, along with our security scanners.
Our documentation website and component packages are deployed via CD. Ocean Blue has an automated docs site deployment, that generates much of the documentation from the component source code. CD then also publishes the individual components to our internal Artifactory.
Our latest addition has been adding a visual regression test suite built using jest-image-snapshot which takes advantage of GitHub's pull request UI to allow image comparisons within the pull request itself.
Visual regression testing
Visual regression tests are a style of test that compares a screenshot of the rendered component with a previously saved version. These tests allow small visual changes to easily be picked up, with the tests identifying changes and showing the differences in diff screenshots that are committed to the branch on the PR. If any of these diffs exist on a PR, it is blocked from being merged until they are either fixed in code, or the saved screenshot is updated with the latest visual changes.
This type of testing is integral to the Figma API based workflows discussed earlier. When our designers make updates to the Figma icon and design tokens libraries, their updates will flow down to our GitHub codebase. The workflow that checks for changes via the Figma API is run and then presents the changes to them and the engineers in a visual format.
Conclusion
This whole workflow significantly reduces the amount of manual work engineers have to perform to keep these two core parts of the design system up to date. It also gives simple visual change markers so pull request reviews for visual changes can be more efficient. Screenshots showing what has changed sit between the code changes, instead of engineers needing to spin up their local environments to check how the changes affect the rendering in Storybook.
Moving forward I'm very excited to see what the Figma team can do with their API, looking into how we can use it to further automate some of our common maintenance tasks, and give our designers a higher level of ownership and confidence of how their work is represented within the code base. The Ocean Blue components are ultimately the experience that our customers receive when using ANZ Plus web apps, not what is presented in Figma.
Oliver Gassman is a Senior Engineer at ANZ Plus in the Experience Engineering Web team. He has over 20 years experience working on the web, between implemeting CMS websites, building complex interfaces for web apps in fintech and banking, and building and managing the ANZ Plus design system for web, Ocean Blue. He has a passion for component libraries and automation as a tool for improving developer experience and efficiency.
This article contains general information only – it does not take into account your personal needs, financial circumstances and objectives, it does not constitute any offer or inducement to acquire products and services or is not an endorsement of any products and services. Any opinions or views expressed in the article may not necessarily be the opinions or views of the ANZ Group, and to the maximum extent permitted by law, the ANZ Group makes no representation and gives no warranty as to the accuracy, currency or completeness of any information contained.