Stu Robson3d ago

from the archives:

What Else Can We Do With Design Tokens?

We can store design decisions sure, but we could add some key information for tooling, documentation, and more.

https://www.alwaystwisted.com/articles/what-else-can-we-do-with-design-tokens

#DesignSystems #DesignTokens #WebDesign

πŸ™πŸ–€

What Else Can We Do With Design Tokens? Always Twisted

Explore advanced uses of design tokens with added meta information. Learn how to enhance your Design System by integrating metadata for documentation, deprecation warnings, and themeable tokens using Style Dictionary, ensuring flexibility, consistency, and easier maintenance.

Always Twisted
Burton Smith6d ago

How are teams organizing their #DesignTokens based on the W3C @designtokens spec? Are they in single file, split up by theme, category, tier, etc.?

#DesignSystems

Frontend DogmaJun 1

Linting Your Design Tokensβ€”the What and the Why, by @sturobson:

https://www.alwaystwisted.com/articles/linting-your-design-tokens?ref=frontenddogma.com

#designtokens #linting #consistency #bestpractices

Linting Your Design Tokens, what and why

Always Twisted
Frontend DogmaMay 20

Design Token Naming Conventions: A Practical Guide, by @sturobson:

https://www.alwaystwisted.com/articles/design-token-naming-conventions?ref=frontenddogma.com

#guides #designtokens #naming #conventions #examples

Design Token Naming Conventions: A Practical Guide

A practical guide to naming design tokens, including token tiers, common conventions, and rules that keep systems consistent and scalable.

Always Twisted
Tiago πŸ‡΅πŸ‡ΉπŸ‡ΈπŸ‡ͺMay 18

The Style/token documentation updaterβ„’ plugin for the Style/token documentation componentsβ„’ Figma library is out at last πŸŽ‰

That's a mouthful, but the gist of it is simpler...

If you use my components to document color and typography variables or styles inside a Figma file, you can now run this new plugin to automatically update your documentation with just one click πŸ€“

Demo video coming soon 🀞

#Figma #DesignSystems #DesignTokens

Show threadStu RobsonMay 14

If you caught my last post on what to lint and why it matters, this is the follow-up

Same tokens. Now we talk about where the linting lives: design tool, pre-commit, CI, pre-publish, and which ones are worth your time at each stage.

https://www.alwaystwisted.com/articles/where-to-lint-design-tokens

#DesignSystems #DesignTokens #FrontEnd

Where to Lint Your Design Tokens

A practical guide to integrating design token linting at every stage of your workflow β€” from the source of truth through CI to pre-publish gate.

Always Twisted
Stu RobsonMay 13

⭐ new blogpost ⭐

Linting Your Design Tokens - The Where And The When

You know you should lint, but where in your workflow does it actually live and when is it best to check?

https://www.alwaystwisted.com/articles/where-to-lint-design-tokens

#DesignSystems #DesignTokens #FrontEnd

Where to Lint Your Design Tokens

A practical guide to integrating design token linting at every stage of your workflow β€” from the source of truth through CI to pre-publish gate.

Always Twisted
developer.overheid.nlMay 8

🎨 Verschillende huisstijlen toepassen op de NL Design System componenten β€” hoe doe je dat?

Met design tokens! NL Design System slaat deze tokens op als JSON en genereert daar automatisch CSS custom properties van via Style Dictionary.

Jij bouwt het thema, de community zorgt voor de componenten. 🧩

πŸ“– https://www.nldesignsystem.nl/handboek/huisstijl/design-tokens/

#NLDesignSystem #DesignTokens #CSS

Design tokens Β· NL Design System

Design tokens introductie

Stu RobsonMay 6

⭐ new blogpost ⭐

Linting Your Design Tokens - The What And The Why

Designers update Figma. Devs sync tokens. Users see issues. Catch the bugs before they ship – add linting to your toolset:

https://www.alwaystwisted.com/articles/linting-your-design-tokens

#DesignSystems #DesignTokens #FrontEnd

Linting Your Design Tokens, what and why

Always Twisted
Elly LoelMay 4

Design Token Naming Conventions: A Practical Guide

πŸ”– https://www.alwaystwisted.com/articles/design-token-naming-conventions
πŸ”— https://ellyloel.com/design-token-naming-conventions-a-practical-guide/

#Bookmarks #DesignSystems #DesignTokens #Communication #Documentation

Design Token Naming Conventions: A Practical Guide

A practical guide to naming design tokens, including token tiers, common conventions, and rules that keep systems consistent and scalable.

Always Twisted