Plan of attack
In the early stages of planning the design system, we decided our focus should begin with the responsive web app.
The platform covers a range of breakpoints, including desktop, mobile and tablet sizes.
Most of those components would translate over to native iOS and Android platforms. Followed by completing TV designs.
This approach would also allow us to work out the structure of components built within figma on the most complex platform first.
Striking a balance
Utilising Figma’s robust component functionality, it was important to determine a balance of flexibility, but also ensure the components don’t become so complex that they’re difficult to understand or update.
Documentation
Utilising Confluence and Jira, every page template had a detailed outline of all expected adjustments as well as their original values.
This provided support for developers during the code re-write, product owners and managers in writing accurate tickets and QA with a reference for testing.
Early-Access
Providing early previews to the wider design teams within the company was a fundamental part in shaping the design system.
Gathering their feedback and building a mutual understanding was a fundamental step in ensuring we spent our time wisely.
Tokens
As my focus was on the general creation and structure of the design system. I didn’t have capacity to work towards providing a solution involving tokens. However, I worked alongside the lead and senior designers responsible.
Learning and understanding the range of complexities involved in utilising tokens in such a robust white label product, compared to an in-house product that would use them lightly.
