Zenn
🧃

【Style Dictionary】Transforms / Formats まとめ

2023/03/04に公開
デザイン
frontend
styledictionary
tech

はじめに

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

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

おわりに

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

Discussion