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…
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…
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…
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" ], …
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