Typography variables
Getting our typography updated to use variables in Figma has been the missing piece for us before we had a fully supported theming architecture in Figma. With Figma now supporting typography variables we can now add that missing piece.
In practice, that means that when you swap between brands, font changes between those brands will now be reflected in Figma.
Another update from Figma has allowed us to reduce the amount of text styles. This will simplify and clean up our available text styles making it easier to find the most commonly used styles. Additionally, this was also a good opportunity for us to align our text styles more closely with our codebase.
What enabled the removal of all those text styles? Figma now supports text style overrides, allowing users to apply text-decorations such as italic, underline, strikethrough, and bold without detaching the original style. As a result, the previous need for these as separate text styles has been eliminated.
Previously, desktop and mobile also had individual text styles. They have now been consolidated into a single set of text styles, to simplify and reduce the overall number of styles. This change also makes it easier to switch between desktop and mobile views, as it can now be done with a simple variable mode change, rather than having to adjust each text element individually.
Variable structure update
We have also updated the structure of all our variables in Figma to better align with our codebase, making it simpler and easier to understand.
Previously, all variables were stored in a single collection called “Themes,” which meant that values that remained consistent across brands and appearances had to be duplicated. For example, a spacing variable such as “spacing-8px” will always be the same for all brands and appearances, so there is no need to duplicate this value for each brand.
We have now divided “Themes” into three new collections: Global, Brand, and Appearance. The Global collection only has one value, which will remain the same for all brands. The Brand collection includes two values, one for Maersk and one for APM Terminals, and this can be expanded to include more brands in the future. The Appearance collection features values for light and dark modes, which can be expanded to include options like high contrast mode.
Variables that will remain consistent across all our themes will be stored in the global section. Variables specific to a brand, such as the fonts used, will be kept in the brand collection. And variables related to a specific “mode,” will live in appearance, like different colour values for light and dark modes.
Currently, Figma does not allow the move of variables between different collections. As a result, we had to recreate some of our variables. This is particularly an issue for our border-radius variables. Although the designs using those variables will remain unchanged, but will indicate that the original variables no longer exist. This can only be fixed by manually applying the new variables.
Component update
All our components have now also been updated to be fully managed by variables. This means that spacing, gaps, border-radius, border-width, and opacity are now controlled by Figma variables.
Please note that with this update, some variables had to be deleted and recreated in new collections. And the process for changing a brand and its appearance has changed. Previously, you only had the option to use “themes.” If you’re using a theme other than Maersk light, you’ll likely need to reapply your theme.
We hope you enjoy this update to variables in Figma.