Questions tagged [design-tokens]
9 questions
5
votes
1 answer
How to convert design token object to SCSS property using style dictionary?
I have the exact same issue as this thread: get scss from design tokens json file using style dictionary. The answer mentioned in this thread is great, but is there a way to specify some setting so that the style-dictionary automatically converts…

U. Watt
- 533
- 1
- 5
- 27
2
votes
0 answers
Best practice for configurable React component/component library
I'm working on a React component library and I'm trying to figure out what would be the best way to make it configurable.
I'd want to achieve something similar to TailwindCSS, where you can run an npx script:
npx my-library init
which creates a…

Chris Yalamov
- 80
- 2
- 7
2
votes
1 answer
get scss from design tokens json file using style dictionary
I want to get the scss rules for design tokens from a json file provided by the design team.
I used style dictionary and managed to get the base design tokens, but there are few tokens that use entire objects as value.
This is an example of design…

Alex Dorosin
- 23
- 5
1
vote
1 answer
Naming CSS alias same as assigned CSS variable
I am working on changing around our design system works. I am attempting to assign a CSS alias back to a CSS variable of the same name. Is this possible?
For theming we are currently having a set of global css tokens and then use multiple sets of…

Brian Brady
- 15
- 3
0
votes
0 answers
White Label Design System & Figma Tokens
Has anyone created a white label design system and found a way to witch style guides or libraries each time a new client is onboarded and update all screens with their brand colors, logo etc?
I want to use one library of components for different…

Olen
- 1
0
votes
0 answers
How to improve Style Dictionary configuration to generate a proper android file output?
I am using Figma Design Token plugin for generating android code in output with all design tokens.
The current config.json file of Style Dictionary seems not to work as expected.
Config.json file:
{
"source": [
"tokens/**/*.json"
],
…

Prajwal R
- 117
- 1
- 1
- 8
0
votes
0 answers
Android Studio design tokens
There are JSON with colors how to convert it to XML file
Context:
Figma has colors (design tokens) that have been converted to JSON and we want to import them into Android Studio
0
votes
0 answers
Publishing design tokens with GitHub Actions
I have a design token JSON file (written to the standards spec).
I have written a GitHub Action to transform the JSON into CSS variables using a NPM dependency called Design Tokens CLI. I just want it to run an NPM script and then publish the output…

Ollie Williams
- 1,996
- 3
- 25
- 41
0
votes
1 answer
Write custom transform file for design tokens from Figma in Style Dictionary for Flutter
I have barebone Flutter 2.5 project and Figma design tokens which were exported via Figma Tokens.
Those design tokens look like this:
project\style_dictionary\properties\tokens.json
{
"borderWidth": {
"100": {
"value": "1.5",
…

Preckrasno
- 2,435
- 1
- 10
- 20