On cross-road what should be used as source of truth for UI Design Tokens: css, ts, or JSON?
Design tokens require type-checking to ensure valid values across themes. While JSON and Figma lack this, TypeScript, Java, and modern CSS offer structured solutions like APIs, nested classes, and utilities for checks like ADA compliance. Balancing accessibility, structure, and DX is key to effective #DesignToken usage.
https://blog.firsov.net/2025/04/ux-design-token-source-of-truth.html
#Design #Guidelines
Design systems need a color space · Ignoring color spaces is no longer an option https://ilo.im/162qtm
_____
#Color #ColorSpace #DesignToken #DesignSystem #ProductDesign #UiDesign #VisualDesign #WebDesign
#designToken operations are not hear yet, but feel like an integral part of design tokens, without which they will not be sustainable in the long run. @donnie has a neat writeup: https://buff.ly/3BsZ5nd
Personally, I gravitate to the simpler solution suggested in the w3c repo: https://buff.ly/4dmoOeg as it makes it easier for tools to adopt quickly and covers most cases.
#Design #Resources
Design systems glossaries and primitive tokens · The ideas driving conversations about design systems https://ilo.im/160gmd
_____
#Glossary #Jargon #Terminology #DesignToken #DesignSystem #UiDesign #WebDesign #Development #WebDev #Frontend
Interesting post on #decisionTrees for #designSystems #components: https://www.linkedin.com/pulse/decision-trees-ui-components-vitaly-friedman-chgae/
They are a great way of helping folks pick the right component or #designToken.
#Design #Proposals
Design token ugly mode · An approach to uncover hidden design flaws https://ilo.im/15zd8o
_____
#Consistency #DesignToken #DesignSystem #ProductDesign #UiDesign #WebDesign #Development #WebDev #Framework #TechDebt
#Development #Approaches
A structured approach to custom properties · How can we manage CSS variables effectively? https://ilo.im/15zcqz
_____
#CustomProperty #Typology #Naming #DesignToken #DesignSystem #WebDev #Frontend #CSS
#Development #Approaches
Better know a design system: CSS frameworks! · “Arguably, CSS frameworks are design systems for the web.” https://ilo.im/15z72v
_____
#Framework #Tooling #DesignToken #DesignSystem #Design #UiDesign #WebDesign #WebDev #Frontend #CSS
Our #DesignSystem's #DesignToken pipeline has become more of a hydra...
Figma vars & styles
|
+-> DTCG file
|
+-> CSS custom properties
+-> CSS utility classes
+-> Storybook stories for util classes
+-> TS code
+-> TS interface
...and there's more to come: React Native components, docs, etc.
Also, longterm I want to make Figma an output from the DTCG file (or have some kind of 2 way sync), rather than it being the source.
A fresh and interesting take on #designToken naming: https://uxdesign.cc/warhol-design-tokens-3acd49431484
While I am not a big fan of introducing new naming ideas that have to be memorized, others may disagree.
It is definitely food for thought and re-evaluating your own naming convention.
I know it's been done a million times (incl. a few by my past self), but it still feels like magic when demoing a #DesignToken pipeline.
In our case, the demo was:
- Static HTML, React & Angular web apps are all open in browser windows, displaying some of p
our #DesignSystem components
- An Android emulator running a React Native app, also using DS components, is open too.
- I open a Figma library, edit the color of a variable
...
🎁🎁 Exciting News Alert! 🚀🚀
We present to you, the Keep Design System new update v1.5. 🎉
- https://keepdesign.io
🆕 What's New:
* ✨ New Look
* 🧩 Design Tokens
* 🌈 Figma Variables + Dark Mode
* ⚛️ React Version
* ...and much more!
Quite pleased with the #DesignToken pipeline I've just cobbled together:
Figma vars ➡️ Tokens Brücke ➡️ DTCG file in a git repo ➡️ Cobalt UI (configured to output CSS vars) ➡️ PostCSS (with CSSNano) ➡️ CSS file
The hard part was that our source Figma lib has *multiple* modes AND I wanted the final output to only include semantic tier tokens (so all the brand-specific color ramps and whatnot are just internal implementation details of our theme). Had to make a custom Cobalt plugin for that.
Great article by @smashingmag on #designProcesses. Interesting approaches like hot Potatoe and the loop by #ibm: https://smart-interface-design-patterns.com/articles/perfect-design-process/
I agree that you need to find out what works for you and your team. But it's also important to understand that it depends on the phase of a project and the kind of project. Starting a new product is very different to implementing a new #designToken strategy.
.@zetareticoli comments on a context dilemma with #tokens:
https://designtokens.substack.com/p/the-context-dilemma I feel context specific #designTokens are still the way to go. Repetition in this case is no problem. Ease of use without knowledge of the system should be the primary goal of any #designToken set.
Tailwind CSS で Design tokens を継承する（Global tokens と Alias tokens を分ける）ための検証
https://qiita.com/xrxoxcxox/items/021188d12ed99433f818?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items
#qiita #CSS #Design #デザインシステム #tailwindcss #DesignToken
Creating a flexible design token taxonomy for Intuit’s Design System | by Nate Baldwin | Jun, 2023 | Medium https://medium.com/@NateBaldwin/creating-a-flexible-design-token-taxonomy-for-intuits-design-system-81c8ff55c59b #ux #ui #designsystem #designtoken
#DesignToken #naming is hard and must be done well. You only get one chance, afterwards it will be breaking changes for your users.
I have written a guide to get you started with naming your tokens: https://medium.com/user-experience-design-1/naming-design-tokens-9454818ed7cb
Very neat approach to #designToken visualizations/annotations in #figma by @Disco_lu https://twitter.com/disco_lu/status/1615367950285901825. Personally I feel it is a bit too much work, but what do you think? I guess if you have issues with hand-overs it may be worth it. 🤔
Has anyone succeeded in automating design tokens (system) from the designer to developers? I try Specificy but it can extract Figma token just first level in group? I am interested in Style-Dictionary but not sure it’s going to work. #react #designsystem #designtoken
