Live data from Hacker News

Design Token-Based UI Architecture

martinfowler.com

11–20 of 143 posts

Re: Design Token-Based UI Architecture

#11
post #4

It seems like there are some good ideas in here but the terminology is utterly alien to me. Not sure if it's me or this is just deeply wrapped in consulting jargon.

The core idea seems to be putting visual parameters in a single place that can be shared across platforms. That way you can tweak the design everywhere without having to edit N different platform-specific implementations.

[deleted]

Re: Design Token-Based UI Architecture

#12

Earlier quoted context omitted.

In one sentence: Design tokens are a standardized way of defining constants used in a design system. If most developers haven't heard of them, it's because most developers don't create design systems. Even when you use a design system, the actual use of design tokens would likely be hidden. Material Design uses them. https://m3.material.io/foundations/design-tokens/overview Fluent UI uses them. https://fluent2.micros…

So, basically #define?

yeah, still don't get what is all the fuzz is about. defining symbols systematically (e.g. with some hierarchy) and having constants mapping symbols to values - all is a no-brainer

Re: Design Token-Based UI Architecture

#13

Earlier quoted context omitted.

So, basically #define?

yeah, still don't get what is all the fuzz is about. defining symbols systematically (e.g. with some hierarchy) and having constants mapping symbols to values - all is a no-brainer

The fuzz is about writing 2,000 words on a simple concept in impenetrable jargon in order to better demonstrate the thought leadership of your practice and the need for deep consultation to translate the aforementioned impenetrable jargon into simple language so mere plebes can implement the advice.

Re: Design Token-Based UI Architecture

#14
Hi, I'm the founder of the Design Tokens W3C Community Group, we are writing a spec to help with interop across design and developer tooling [1]

There's a whole movement bringing DevOps and SRE thinking to design/UX, essentially working on design infrastructure. Design Tokens are a part of it.

Ask me anything — this may be confusing to some folks ("isn't it just... variables?") and I'm happy to say more.

1: https://tr.designtokens.org/format/

Re: Design Token-Based UI Architecture

#15

Earlier quoted context omitted.

yeah, still don't get what is all the fuzz is about. defining symbols systematically (e.g. with some hierarchy) and having constants mapping symbols to values - all is a no-brainer

The fuzz is about writing 2,000 words on a simple concept in impenetrable jargon in order to better demonstrate the thought leadership of your practice and the need for deep consultation to translate the aforementioned impenetrable jargon into simple language so mere plebes can implement the advice.

This kind of comment isn't welcome here...

Re: Design Token-Based UI Architecture

#16
post #14

Hi, I'm the founder of the Design Tokens W3C Community Group, we are writing a spec to help with interop across design and developer tooling [1] There's a whole movement bringing DevOps and SRE thinking to design/UX, essentially working on design infrastructure. Design Tokens are a part of it. Ask me anything — this may be confusing to some folks ("isn't it just... variables?") and I'm happy to say more. 1: https://t…

Why does the format use $-prefixed keys? That's pretty weird as far as JSON schemas go.

Re: Design Token-Based UI Architecture

#17
post #14

Hi, I'm the founder of the Design Tokens W3C Community Group, we are writing a spec to help with interop across design and developer tooling [1] There's a whole movement bringing DevOps and SRE thinking to design/UX, essentially working on design infrastructure. Design Tokens are a part of it. Ask me anything — this may be confusing to some folks ("isn't it just... variables?") and I'm happy to say more. 1: https://t…

Why does the format use $-prefixed keys? That's pretty weird as far as JSON schemas go.

Not just weird, it kinda overlaps with json schema builtins like $schema, $ref, $id, etc

Re: Design Token-Based UI Architecture

#18

Earlier quoted context omitted.

In one sentence: Design tokens are a standardized way of defining constants used in a design system. If most developers haven't heard of them, it's because most developers don't create design systems. Even when you use a design system, the actual use of design tokens would likely be hidden. Material Design uses them. https://m3.material.io/foundations/design-tokens/overview Fluent UI uses them. https://fluent2.micros…

So, basically #define?

I mean it's kinda jargony and yeah kinda like #define, but I think the idea is specifying a namespace and specific types with a focus on UI/UX design.

In C you'd maybe do it by prefixing all the relevant macros with DESIGN_foo but I think part of the goal of this is outlining all the potential "Foo"s and utilizing it to maintain consistency across a large organization

Re: Design Token-Based UI Architecture

#19
post #14

Hi, I'm the founder of the Design Tokens W3C Community Group, we are writing a spec to help with interop across design and developer tooling [1] There's a whole movement bringing DevOps and SRE thinking to design/UX, essentially working on design infrastructure. Design Tokens are a part of it. Ask me anything — this may be confusing to some folks ("isn't it just... variables?") and I'm happy to say more. 1: https://t…

> Ask me anything — this may be confusing to some folks ("isn't it just... variables?") and I'm happy to say more.

How do Design Tokens along with the article's identification of "Translation Tools" differ from existing template-based code generation techniques?

In other words, what problems do Design Tokens solve which cannot be satisfied with sh[0] and sed[1]?

0 - https://man.freebsd.org/cgi/man.cgi?query=sh&apropos=0&sekti...

1 - https://man.freebsd.org/cgi/man.cgi?query=sed&apropos=0&sekt...

Re: Design Token-Based UI Architecture

#20
post #14

Hi, I'm the founder of the Design Tokens W3C Community Group, we are writing a spec to help with interop across design and developer tooling [1] There's a whole movement bringing DevOps and SRE thinking to design/UX, essentially working on design infrastructure. Design Tokens are a part of it. Ask me anything — this may be confusing to some folks ("isn't it just... variables?") and I'm happy to say more. 1: https://t…

Why does the format use $-prefixed keys? That's pretty weird as far as JSON schemas go.

The reserved prefix $ answers the question: "how can we let people name, structure, and nest their tokens however they want, while future proofing the spec?". More on that rationale: https://tr.designtokens.org/format/#character-restrictions

As for the "pretty weird" aspect — it's definitely uncommon but it's been seen before: the $ prefix is also used by the JSON Reference ($ref): https://www.ietf.org/archive/id/draft-pbryan-zyp-json-ref-01... — and just in case, we ran this syntax past Ben Hutton (inventor of JSON Schema) to ensure we weren't doing anything silly.

Post reply on HN