Scroll Down
Scroll Down
Scroll Down
About the project
Krones AG is a German packaging and bottling machine manufacturer. It produces lines for filling beverages in plastic and glass bottles or beverage cans.
For their web applications and the HMI Screens on their production lines they needed a comprehensive design system.
The goal was to create a dynamic design system, offering different modes, flexible components with all necessary properties and a token system.
My responsibilities
• Creating an atomic design system in Figma
• Defining of design tokens
• Building flexible components
• Defining usage guidelines
• Interaction design
• Quality assurance
Components
All components are able to display every relevant state through component properties. This enables designers to use the component instances without needing to detach them in their respective design files. Therefore we can ensure consistency and up-to-date components throughout all design files if used properly by all designers.
Token system
To ensure consistency and scalability throughout all Krones design files I built a semantic tokens system. The reasoning for a semantic approach as opposed to a component based approach is a reduced amount of tokens as to the large amount of components in the Krones design world and the use of two different modes.
Mode switch
A mode switch is implemented, so designs can be switched between modes with ease. Every design token has their counterparts for other modes defined in the Figma variables. As we worked with a semantic token approach, this ensures that all state colors are consistently translated in the same way.