Interaction design, accessibility, visual design, systems thinking
Massive foundation for design unification and consistency & fast implementation of design changes
Designing for variety of usecases at once
I helped to build a first design system for Xperience product to speed up design and dev work.
I contributed with Atomic and Decision tokens as well as Components and Layouts including written guidelines for components usage.
Laying the foundations
With the pior help of another inhouse team that had been dealing with design system before, me and my colleague set a foundation for Xperience design system.
I helped to create a set of atomic tokens (colors, typography, shadows,…), and decision tokens. Based on these I created components and other more complex compounds while defining rules how and when to use them.
Creating the Figma library
Many components were added to the design system using atomic or decision tokens. I designed components as simple as a checkbox but also more complex ones as data tables.
Documenting the design system
We documented design system in Figma and our internal wifi (Confluence). I used to create also DOs and DON’Ts guidelines how to work (or not to work) with components.
Working with developers to create one source of truth
Confluence library served as a source for developers who turned our visuals into interactive components in a tool called Storybook. We worked together to make sure coded components match design requirements.
😎 I learned what is the process of creating a design system
😎 Awesome long term investment in unification our design components and massive speeding up design work
😎 I set universal guidelines that would make the designers’ decision process much faster
😎 I was able to significantly speed up my work in Figma (Autolayout, Creating variants of components)
🤔 Creating simultaneously design system for 2 different products might be a bit tricky when we were just learning the craft
🤔 Over time we thought the it might be a good idea to have a person dedicated to manage a design system as it’s a constant work and never ends and it’s sometimes hard to control the changes and potential breaking changes.