We'll be covering how variables helped us reimagine what a design system could be - how we built a flexible and scalable design system with accessibility at its core, leveraging variables to merge existing design systems and create a unified and efficient company-wide one.

Our new design system was created to unify three different systems across different divisions, addressing inconsistencies and ensuring a cohesive user experience across platforms. Accessibility was a key driver, with a focus on more than just colors and typography; we ensured our system supported user preferences and responsiveness, making it usable for people with various abilities and disabilities, by creating size-related variable collections, considering different aspects and requirements - all to achieve maximum component flexibility while reducing complexity. Our talk will provide valuable insights and practical strategies to build flexible components in Figma, making the most out of component properties, auto-layout and modes, while keeping a scalable system.

Key Takeaways:

* How a strategy involving Figma’s latest features ensured the adaptability and scalability needed for a multi-brand, multi-device design system, with a11y at its core

* Figma is more than a design tool - its a catalyst for unifying complex, multi-divisional design systems

* What were the main challenges we faced and how we overcome them, with practical examples and workflows

* How color, typography and size variables reshaped our entire system and address a11y issues How the practical information will be shared:

* Sharing the story behind the merge of different design systems and how we've tackled challenges related to implementation of accessibility requirements and flexibility needed

* Demo of components and their responsiveness (for a11y and multi-device purpose)

* Before and after visual references of how our strategy was implemented
* Before and after of workspace comparisons