気になっていたFigma Tokensについて調べた
Figma TokensはFigmaでデザインしたデザイントークンをReactなどで使用できるようにするFigma Plugin
borderの半径やspacerの単位、カラーやタイポグラフィまで、あらゆるデザインオプションに使用できるデザイントークンを使用できる
使用できるトークンは以下
- Colors (Fill, Border Color — hex, rgba, hsla)
- Spacing (Horizontal, Vertical, Gap)
- Sizing (Width/Height)
- Border Radius (individually or each corner)
- Border Width
- Opacity
- Typography (Font family, font weight, font size, line height, letter spacing, paragraph spacing)
- Shadow tokens (both dropShadow and innerShadow)
ところで以前StyleDictionaryを調べた時のように、自分のプロジェクトではあまりデザイントークンをかえることがない
ただ、Figmaで定義されたのをみてエンジニアが独自に定数定義するよりかはこのように自動生成できるようにしておいた方がよいかも
ちなみにFigma Tokensで出力したファイルにはrgba({colors.brand}, 0.5)などのようなエイリアスが含まれているため、Style Dictionary等で使うにはtoken-transformerというのを用いて変換しなければならないみたい
https://docs.tokens.studio/sync/github#7-how-to-use-tokens-stored-in-github-in-development
