Our Product Design building strategy is based on our resources and optimized for us to ship quality UI in no time. So that designers can focus on customer and user scenarios.
In the making process of this UI kit, we've decided to embed the wireframe level as our Base UI.
This Base UI can be skinned with any customer theme we need, in a matter of seconds.
These themes are helpful to provide highly customized offers and mockups to our potential clients. They are also automatically exported and packaged to our various runtime environments, so that developers and engineers can integrate them in no time.
In the long run, these themes will be very useful as we move toward a self-serving model, whereas customers will be able to skin their products from the admin page. So we start paving for what is coming next.
Design tokens automation and package
From Figma to each of our runtime environments, our tokens are automatically shared and packaged for developers to use while integrating a piece of UI.
From Figma to GitHub
While waiting for Figma to natively support Design tokens, we use the Tokens-Studio plugin. It allows us to manage and store our sets into a GitHub repository.
From a JSON file to any platform or language
Once a change is made on Figma and pushed to our GitHub, and once the Pull Request has been reviewed and confirmed, an action script automatically converts the new JSON file into multiple languages using Style dictionary from Amazon.
The plugins uses logics such as simple math formulas. These logics aren't understood by style-dictionary and another step is required to 'flatten' these logics first. For this we use Token-transformer from Tokens-Studio team inside our script, prior to let Style dictionary do its magic.
Packaging for each runtime environments
To make it usable, it needs to be where developers need it. For this our DevOps team automated the creation of packages from our Design tokens repo to the various runtime environments that require to consume Design tokens.