🧃

【Style Dictionary】Transforms / Formats まとめ

2023/03/04に公開

デザイン

frontend

styledictionary

tech

はじめに

Style Dictionaryを使ってみて、TransformsとTransform GroupsとFormatsについてきちんと知りたかったので簡単にまとめました。
詳しくはドキュメントを見てください 💁🏻‍♀️

Transformsについて

Transformsはデザイントークンのkeyやvalueを特定のプラットフォームに合わせて変換するための関数。
pxをdpやspのようなAndroid用に変換したり、色情報をHEXやRGBに変換できる。
Transformsにはattribute,name,valueという3つのタイプがある。

attribute : メタデータをデザイントークンに付与する。
name : デザイントークンの名称の変換方法。キャメルケースやパスカルケースなどが指定できる。
value : 各トークンのvalueの部分の変換方法。色情報はvalueで指定したものに基づいて、RGBやHEX等に変換される。

registerTransformという関数を用いてカスタムTransformを作ることも可能。
参考: https://amzn.github.io/style-dictionary/#/api?id=registertransform

Pre-defined Transforms

Pre-defined Transformsとは、文字通りあらかじめ用意されているTransforms。
configで任意のTransformを複数指定することができる。

{
  "source": ["tokens/**/*.json"],
  "platforms": {
    "android": {
      "transforms": ["attribute/cti", "name/cti/kebab", "color/hex", "size/rem"]
    }
  }
}

Transformsには以下の種類がある。

Pre-defined Transforms 一覧

attributeに関するもの

attriubte/cti
attribute/color

nameに関するもの

name/human
name/cti/camel
name/ti/camel
name/cti/kebab
name/cti/snake
name/cti/constant
name/ti/constant
name/cti/pascal

valueに関するもの

color/rgb
color/hsl
color/hsl-4
color/hex
color/hex8
color/hex8android
color/composeColor
color/UIColor
color/ColorSwiftUI
color/css
color/sketch
color/hex8flutter
size/sp
size/dp
size/object
size/remToSp
size/remToDp
size/px
size/rem
size/remToPt
size/compose/remToSp
size/compose/remToDp
size/compose/em
size/swift/remToCGFloat
size/remToPx
size/pxToRem
size/flutter/remToDouble
content/icon
content/quote
content/objC/literal
content/flutter/literal
font/objC/literal
font/swift/literal
font/flutter/literal
time/seconds
asset/base64
asset/path
asset/objC/literal
asset/swift/literal
asset/flutter/literal

各Transformの詳細はこちら https://amzn.github.io/style-dictionary/#/transforms?id=pre-defined-transforms

Transform Groupsについて

Transform Groupsは複数のTramsformを組み合わせたもの。
registerTransformGroupという関数を用いて、任意のTransformを組み合わせたカスタムTransform Groupを作ることも可能。
参考: https://amzn.github.io/style-dictionary/#/api?id=registertransformgroup

Pre-defined Transform Groups

Pre-defined　Transform Groupsとは、こちらも文字通りあらかじめ用意されているTransform Groups。
configで任意のTransform Groupを指定することができる。

{
  "source": ["tokens/**/*.json"],
  "platforms": {
    "android": {
      "transformGroup": "android"
    }
  }
}

Transform Groupsには以下の種類がある。

Pre-defined Transform Groups 一覧

web
- attribute/cti
- name/cti/kebab
- size/px
js
- attribute/cti
- name/cti/pascal
- size/rem
- color/hex
scss
- attribute/cti
- name/cti/kebab
- time/seconds
- content/icon
- size/rem
- color/css
css
- attribute/cti
- name/cti/kebab
- time/seconds
- content/icon
- size/rem
- color/css
less
- attribute/cti
- name/cti/kebab
- time/seconds
- content/icon
- size/rem
- color/hex
html
- attribute/cti
- attribute/color
- name/human
androiod
- attribute/cti
- name/cti/snake
- color/hex8android
- size/remToSp
- size/remToDp
compose
- attribute/cti
- name/cti/camel
- color/composeColor
- size/compose/em
- size/compose/remToSp
- size/compose/remToDp
ios
- attribute/cti
- name/cti/pascal
- color/UIColor
- content/objC/literal
- asset/objC/literal
- size/remToPt
- font/objC/literal
ios-swift
- attribute/cti
- name/cti/camel
- color/UIColorSwift
- content/swift/literal
- asset/swift/literal
- size/swift/remToCGFloat
- font/swift/literal
ios-swift-separate
- attribute/cti
- name/ti/camel
- color/UIColorSwift
- content/swift/literal
- asset/swift/literal
- size/swift/remToCGFloat
- font/swift/literal
assets
- attribute/cti
flutter
- attribute/cti
- name/cti/camel
- color/hex8flutter
- size/flutter/remToDouble
- content/flutter/literal
- asset/flutter/literal
- font/flutter/literal
flutter-separate
- attribute/cti
- name/ti/camel
- color/hex8flutter
- size/flutter/remToDouble
- content/flutter/literal
- asset/flutter/literal
- font/flutter/literal
react-native
- name/cti/camel
- size/object
- color/css

各Transform Groupの詳細はこちら https://amzn.github.io/style-dictionary/#/transform_groups?id=pre-defined-transform-groups

Formatsについて

Formatsを指定することで、jsonのデザイントークンを任意のフォーマットに変換してくれる。
Transformsはnameやvalueを変換するものだったが、Formatsはデザイントークン全体を各プラットフォーム用の形にフォーマットするためのもの。
configで以下のように指定することができる。

{
  "source": ["tokens/**/*.json"],
  "platforms": {
    "css": {
      "transformGroup": "css",
      "files": [
        {
          "format": "css/variables",
          "destination": "variables.css"
        }
      ]
    }
  }
}

Pre-defined Formats

あらかじめ以下のFormatsが用意されている。

Pre-defined Formats 一覧

css/variables
scss/map-flat
scss/map-deep
scss/variables
scss/icons
less/icons
stylus/variables
javascript/module
javascript/module-flat
javascript/object
javascript/umd
javascript/es6
typescript/es6-declarations
typescript/module-declarations
android/resources
android/colors
android/dimens
android/fontDimens
android/integers
android/strings
compose/object
ios/macros
ios/plist
ios/singleton.m
ios/singleton.h
ios/static.h
ios/static.m
ios/colors.h
ios/colors.m
ios/strings.h
ios/strings.m
ios-swift/class.swift
ios-swift/enum.swift
ios-swift/any.swift
css/fonts.css
json
json/asset
json/nested
json/flat
sketch/palette
sketch/palette/v2
flutter/class.dart

各Formatの詳細はこちら https://amzn.github.io/style-dictionary/#/formats?id=pre-defined-formats

おわりに

ドキュメントを読みましょう❕