#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
#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.
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
...
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.
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
Thinking about #DesignToken documentation lately as we'll be doing a lot of that at work soon.
Have you seen any great examples? What about them stands out to you?
Beyond the obvious listing tokens with names, descriptions and previews, what *else* are people doing?
For themeable systems there are potentially different audiences too:
- theme makers
- component implementers
- componnent consumers trying to tweak styling
How do you help each find what they need to know?