1 — Connect to Aero Global Github Repo
To get the latest Design Tokens (containing values for styles, typgraphy, colors, sizes, and more) make sure to connect to the Aero Global Github repo. In there you will also find the latest Font files and Icons. You and your team can pick & choose the parts that are needed for your Platform or Product. We work with tags/versioning so you know what updates are made and what preparations are needed for your team.
More info
2 — Request view access to the Figma Library
To get a visual idea of the Design Tokens, Typography Styles and Icons you can visit the Aero Global Figma library. In there you will also find the Global Components that are connected to these foundational elements.
The rest of these steps will apply to the use of Design Tokens specifically since that’s the main alignment needed to implement the designs.
3 — Use the Design Tokens
Once you pull in the Design Tokens from the Github repo, you can use the so-called “Transformers” to make them fit into your own platforms code. There are many pre-made Transformers in Style Dictionary.
In the end you want to use the resolved values per Theme (Light/Dark) and Size (Small/Large) but with only applying the Design Token name once in the spot where usually the value goes. By defining the context of a Brand plus a Theme plus a Size the resolved value will be ‘picked up’ from that combination and be applied to the component in your code.
Example: You apply the surface token to a single component but deciding which Brand determines the color the user will eventually see.
4 — Ask for guidance
This new way of working has a learning curve, but we have learned a lot in the Beta phase with the Cobalt team of Blueweb. Ask for guidance so we can onboard your team with the Design Tokens implementation.
Resources