Content
View differences
Updated by Marc Alcobé about 3 years ago
##
There is the possibility to transform our Figma "foundations" into **Deign Tokens** that are directly used in the code library and even 100% synchronised using GitHub or even used in other design/code softwares (soon PenPot hopefully). There is some explanation videos/links of what **Design Tokens** are, its functions and how do they work in Figma-Github:
* Tokens presentation: [https://www.youtube.com/watch?v=ssOdzxZdg58&ab\_channel=Figma](https://www.youtube.com/watch?v=ssOdzxZdg58&ab_channel=Figma)
* Generic video: [https://www.youtube.com/watch?v=xEIZeFYoVtY&t=2s&ab\_channel=AMDesign](https://www.youtube.com/watch?v=xEIZeFYoVtY&t=2s&ab_channel=AMDesign)
* Easy tokens explains: https://youtu.be/wtTstdiBuUk
* Tokens in Github: [https://www.youtube.com/watch?v=KB05F7-8BHA&ab\_channel=AMDesign](https://www.youtube.com/watch?v=KB05F7-8BHA&ab_channel=AMDesign)
* Future with design tokens: https://www.youtube.com/watch?v=Ots630OxRwE&ab\_channel=IntoDesignSystems
* Design tokens community group: [https://www.w3.org/community/design-tokens/](https://www.w3.org/community/design-tokens/)
* Quickstart on how to set up a multi-layer token system: [https://youtu.be/7utmznIOWLU](https://youtu.be/7utmznIOWLU)
## Problem
When we talk about fundations of our libraries, which are still in definition, we enter the problem that need to maintain multiple libraries in Figma for multiple brands or themes (Souvap, OP Dark, OP Light, Defult OP...) and on top of that we have a code library that reproduces what we do in Figma. There is not an organised and fully defined place where both design and developers can rely on knowing that they are always in synchronisation between them.
## Motivation
* Definition from W3C Design Token Community Group: _**"The single source of truth to name and store a design decision, distributed so teams can use it across design tools and coding languages."**_
* Common and reusable tokens that can be used also outside of Figma. These can then be reused in case at some point we want to switch to another design software.
* More Figma styles can be transformed into variables (tokens) than what Figma allows by itself (borders, radius, spacer units, breakpoints, z-index...). Allowing higher consistency across product UI.
* W3C compliant so you could take your JSON and move to another tool when needed.
* Manage Design Systems with multiple themes (dark mode, custom themes...) easier and from a single place. No need to have a library for each theme and you can switch between one and the other in a single file without nearly any loading time.
* Much better and easier to translate from design to development as there can be an automatic synchronisation between libraries through Github.
* Full and functional slot system for not needing to detach components when creating variations.
* Automatic LCH colour modifiers for tokens in order to comply with text contrast readability if you change the colours.
* Possibility to create a detailed and differentiated level of tokens (like the one presented by Satellytes Munich but **this
* **"Option/foundation" tokens:** all "options" that could ever be useful in all imaginable cases in the DS (for all themes or "brands"). For example font sizes, spacings, x-y-z sixes/index or even colours (eg. token is: _foundation.color.mainblue.dark_).
* **"Semantic/base" tokens:** all those that come from a foundation design decision. This ones uses the "option" tokens but already solving design "questions" (eg. Q: What is the hover colour of your main/primary components? / A: token is: _base.color.component.primary.hover-bg_).
* **"Component" tokens:** are those that define exclusively components. This are useful in order to keep your "semantic" tokens clean and free of associations to real components. Maybe even, if developer agree, for developer hand-off and re-engineering. (eg. token is: _comp.button.color.primary-unselected.hover-bg_).
* This can be implemented only in Figma also and skip the Github part completely if the developers don't see it clear. It will simplify still communication but it will not synchronise libraries.
* Doing the design part should be rather simple as we can import our current library styles to the plugin and it will just be a matter of renaming and organising in the desired format.
* There is a community and not a single company behind the idea of **Design Tokens**.
## Challenges
* It needs to be agreed if we want to use it at all, only for design libraries (Figma for now) and specs or we want to go the full way with the Github sync.
* There is the need to take a decision on which structure we want to give to our **Design Tokens**.
* If we want to follow this they might be a need of refactoring a little bit our current SPOT DS foundations from a code perspective.
* If we decide to use the Github sync we need to be strict on who and how we can touch the foundations in both sides to avoid overwrites (code and design libraries).
* Current **Figma Tokens Studio** has some paid features (16€ pp/month for the designers for sure), that are not critical but nice:
* **Composition:** being able to create a token made of tokens ([see more here](https://docs.tokens.studio/available-tokens/composition-tokens))
* **Colour modifiers:** modify colours to create automatic slight variations like we where doing with theming ([see more here](https://docs.tokens.studio/tokens/color-modifiers))
* **Advanced themes:** switch between your token sets (themes) with a single click dropdown.
* **Multi-file sync:** you can synchronise multiple json files for multiple themes or brands.
* **Branch switching:** switch in which branch are you pushing the changes too when synchronising. Also create new branches.
* **Support for non-local styles:** connect **Design Tokens** to the Figma styles to avoid having hex codes.
* **Swap styles:** swap the Figma styles from the plugin.
* **Customer dashboard:** to control your subscription.
* Could it be any data problematic or legal concern with using a plugin in Figma? We use other plugins already but needs to be checked.
* PenPot is still not supporting **Design Tokens** (working on it).
## Interesting visuals
<figure class="image op-uc-figure" style="width:478px;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/55455/content"></div></figure>
<img class="op-uc-image op-uc-image_inline" style="width:476px;" src="/api/v3/attachments/55456/content"> <img