Grammar definition for design token

[cometkim]

The "scales and semantic" usage are clearly defined now. But, layered representation in Figma is impossible yet, so we need a DSL to handle this better.

The core feature is to having expressions that is able to define values, scales, and semantics, and to resolve its dependency tree.

A few question here is:

• How can the language adopt to platform parity
• Should it has modules?
• Should expressions be extensible? ex. Do we need functions?
• Else?

[tonyfromundefined]

CSS 표현은 "How can the language adopt to platform parity"를 고민해봤을때 어려움이 있어보이고,

• SCSS의 variable 선언부만 가져다 쓸 수 없을까요?
• Module도 @import로 사용

[cometkim]

🤔

sass 의 기능 커버리지가 너무 넓은데 그정도 Expression 이 필요한지 의문이 들어서..

[cometkim]

the platform parity problem should be resolved by scale tokens, so more sensible questions is, "how can it be extended in its syntax"

[cometkim]

DTCG(Design Token Community Working Group) is actively making a format for design tokens

https://design-tokens.github.io/community-group/format

We may have to consider this being interoperable in the future.

[cometkim]

The DTCG format works well for a single document or for merging multiple documents, but the workflow I want is to extend only the necessary values without departing from the schema by designer.

For this, it is better to separate the schema format and the value binding.

[cometkim]

a random idea for custom format: declarations should be able to be expressed by Figma frames.

[cometkim]

Platform designer @minheeyoon, has done PoC with figma-tokens to test push-based workflow from Figma with design tokens.

In summary, it doesn't work. There are barriers to entry for designers into the GitHub flow.

Eventually, we will have to switch to a pull-based workflow with a registry accessible to everywhere.

I'm exploring the syntax to allow Figma itself to be a Design Token Registry. As Figma's variants feature does, we can define new tokens or bind values via certain conventions in frame names as Figma's variants feature does, so we don't need any other special backend for.

[cometkim]

WIP: https://github.com/daangn/karrot-ui/blob/token-specification/packages/design-token/LANGUAGE_SPECIFICATION.md

[cometkim]

Moved to https://github.com/daangn/kdt