【Figma Tokens × Style Dictionary 설계 시스템의 첫 번째 단계

64286 단어 FigmaUI/UXtech

컨텐트

Figma Tokens에서 정의한 디자인 영패를 React 등 앞쪽에서 사용하기 쉽게 하다

간단한 시도!5steps

  • 필수 패키지 설치

  • install
  • Figma Tokens, 여기서부터 Install.
  • Token Transformer와Style Dictionary의install
    • $ npm install -D token-transformer
$ npm install -D style-dictionary
  • Figma Tokens에서 json 파일 생성
  • Include parent key의 검사 오픈Export
  • Style Dictionary를 통해 json 파일 변환 가능

  • token-transformer 
    $ node token-transformer tokens.json output.json
  or
$ ./node_modules/.bin/token-transformer tokens.json output.json
    • Style Dictionary의 config입니다.json 정의

  • config.json
    style-dictionary.config.json
    {
  "source": ["output.json"],
  "platforms": {
    "scss": {
      "buildPath": "src/tokens/",
      "transformGroup": "scss",
      "files": [{
        "destination": "tokens.scss",
        "format": "scss/map-deep",
        "mapName":"css-tokens",
        "options": {
          "outputReferences": true
        }
      }]
    },
    "ts": {
      "buildPath": "src/tokens/",
      "transformGroup": "js",
      "files": [
        {
          "format": "javascript/module",
          "destination": "tokens.js"
        },
        {
          "format": "typescript/module-declarations",
          "destination": "tokens.d.ts"
        }
      ]
    }
  }
}
  • Style Dictionary를 통해 scss 또는 js 파일 생성

  • build
    config 파일에 별명을 붙인 경우 지정--config
    $ style-dictionary build --config style-dictionary.config.json
    npm-run-all를 사용하여 json의 변환과token의 생성을 한데 모을 수 있습니다.
    package.json
    "tokne:genJson": "./node_modules/.bin/token-transformer tokens.json output.json",
"token:genToken": "style-dictionary build --config style-dictionary.config.json",
"token": "run-s tokne:genJson token:genToken"

    • 상세히


    원래 디자인된 영패는?


    여러 곳에서 사용하시는 게 좋아요!야단을 맞다.
  • Material Design 3 - Design tokens
  • Goldman Sachs - Color Tokens
  • Adobe Blog - 디자이너와 개발자의 협력을 효율화하는 디자인 토큰은 무엇입니까?

    • Figma Tokens


    Figma에서 Figma Tokens를 열 때의 화면은 다음과 같습니다.
    더하기 아이콘을 누르면 Token을 추가할 수 있습니다.

    컬러톡 추가 시 화면.컬러 코드 등을 지정할 수 있습니다.
    기존 Token을 지정할 때 중괄호로 지정합니다.e.g. {color.palette.red.060}
    Token을 설정한 후 json 파일을 내보냅니다.
    설정은 별다른 변경 없이 유지Include parent key: on하면 된다.
    다운로드한 파일은 tokens.json입니다.

    다운로드한 파일의 내용은 다음과 같습니다.
    다음 파일을 package.json 레벨과 동일하게 구성합니다.
    token.json
    tokens.json
    {
  "global": {
    "space": {
      "refs": {
        "8": {
          "value": "8",
          "type": "spacing"
        }
      }
    },
    "color": {
      "palette": {
        "red": {
          "070": {
            "value": "#A1160A",
            "type": "color"
          },
          "060": {
            "value": "#D91F11",
            "type": "color"
          },
          "050": {
            "value": "#FA5343",
            "type": "color"
          }
        },
        "blue": {
          "070": {
            "value": "#0D4EA6",
            "type": "color"
          },
          "060": {
            "value": "#186ADE",
            "type": "color"
          },
          "050": {
            "value": "#3D8DF5",
            "type": "color"
          }
        }
      },
      "button": {
        "primary": {
          "value": "{color.palette.blue.060}",
          "type": "color"
        },
        "destructive": {
          "value": "{color.palette.red.060}",
          "type": "color"
        }
      }
    }
  }
}

    Token Transformer


    Figma에서 다운로드한 json 파일별명 포함을 사용하여 token-transformer로 변환합니다.
    일단 설치.
    $ npm install -D token-transformer
    변환은 다음 명령만 수행합니다.output.json는 변환된 파일 이름입니다.
    $ node token-transformer tokens.json output.json
    노드의 path를 통과하지 못하면 다음과 같이 실행할 수 있을 것 같습니다.
    $ ./node_modules/.bin/token-transformer tokens.json output.json

    Style Dictionary


    Style Dictionary에 config 파일가 필요하기 때문에 준비해야 합니다.package.json와 같은 레벨에서 만들기style-dictionary.config.json.
    변환 방법을 정의합니다output.json.
    이번 생성scss과 js 파일.
    다음 링크는 참조된 공식 형식 페이지입니다.
  • scss/map-deep
  • typescript/module-declarations
    • buildPath의 디렉터리에서 destination에서 지정한 파일 이름을 사용할 수 있습니다.
    style-dictionary.config.json
    {
  "source": ["output.json"],
  "platforms": {
    "scss": {
      "buildPath": "src/tokens/",
      "transformGroup": "scss",
      "files": [{
        "destination": "tokens.scss",
        "format": "scss/map-deep",
        "mapName":"css-tokens",
        "options": {
          "outputReferences": true
        }
      }]
    },
    "ts": {
      "buildPath": "src/tokens/",
      "transformGroup": "js",
      "files": [
        {
          "format": "javascript/module",
          "destination": "tokens.js"
        },
        {
          "format": "typescript/module-declarations",
          "destination": "tokens.d.ts"
        }
      ]
    }
  }
}
    다음 명령을 실행하여 지정한 파일을 생성할 수 있습니다.
    $ style-dictionary build --config style-dictionary.config.json
    생성된 파일은 다음과 같습니다.
    tokens.scss
    src/tokens/tokens.scss
    
/**
 * Do not edit directly
 * Generated on Tue, 05 Apr 2022 10:35:30 GMT
 */

$color-button-destructive: #d91f11 !default;
$color-button-primary: #186ade !default;
$color-palette-blue-050: #3d8df5 !default;
$color-palette-blue-060: #186ade !default;
$color-palette-blue-070: #0d4ea6 !default;
$color-palette-red-050: #fa5343 !default;
$color-palette-red-060: #d91f11 !default;
$color-palette-red-070: #a1160a !default;
$space-refs-8: 8 !default;

$css-tokens: (
  'space': (
    'refs': (
      '8': $space-refs-8
    )
  ),
  'color': (
    'palette': (
      'red': (
        '070': $color-palette-red-070,
        '060': $color-palette-red-060,
        '050': $color-palette-red-050
      ),
      'blue': (
        '070': $color-palette-blue-070,
        '060': $color-palette-blue-060,
        '050': $color-palette-blue-050
      )
    ),
    'button': (
      'primary': $color-button-primary,
      'destructive': $color-button-destructive
    )
  )
);
    tokens.d.ts
    src/tokens/tokens.d.ts
    /**
 * Do not edit directly
 * Generated on Tue, 05 Apr 2022 10:35:30 GMT
 */

export default tokens;

declare interface DesignToken {
  value: any;
  name?: string;
  comment?: string;
  themeable?: boolean;
  attributes?: {
    category?: string;
    type?: string;
    item?: string;
    subitem?: string;
    state?: string;
    [key: string]: any;
  };
  [key: string]: any;
}

declare const tokens: {
  "space": {
    "refs": {
      "8": DesignToken
    }
  },
  "color": {
    "palette": {
      "red": {
        "070": DesignToken,
        "060": DesignToken,
        "050": DesignToken
      },
      "blue": {
        "070": DesignToken,
        "060": DesignToken,
        "050": DesignToken
      }
    },
    "button": {
      "primary": DesignToken,
      "destructive": DesignToken
    }
  }
}
    tokens.js
    src/tokens/tokens.js
    /**
 * Do not edit directly
 * Generated on Tue, 05 Apr 2022 10:35:30 GMT
 */

module.exports = {
  "space": {
    "refs": {
      "8": {
        "value": 8,
        "type": "spacing",
        "filePath": "output.json",
        "isSource": true,
        "original": {
          "value": 8,
          "type": "spacing"
        },
        "name": "SpaceRefs8",
        "attributes": {
          "category": "space",
          "type": "refs",
          "item": "8"
        },
        "path": [
          "space",
          "refs",
          "8"
        ]
      }
    }
  },
  "color": {
    "palette": {
      "red": {
        "070": {
          "value": "#a1160a",
          "type": "color",
          "filePath": "output.json",
          "isSource": true,
          "original": {
            "value": "#A1160A",
            "type": "color"
          },
          "name": "ColorPaletteRed070",
          "attributes": {
            "category": "color",
            "type": "palette",
            "item": "red",
            "subitem": "070"
          },
          "path": [
            "color",
            "palette",
            "red",
            "070"
          ]
        },
        "060": {
          "value": "#d91f11",
          "type": "color",
          "filePath": "output.json",
          "isSource": true,
          "original": {
            "value": "#D91F11",
            "type": "color"
          },
          "name": "ColorPaletteRed060",
          "attributes": {
            "category": "color",
            "type": "palette",
            "item": "red",
            "subitem": "060"
          },
          "path": [
            "color",
            "palette",
            "red",
            "060"
          ]
        },
        "050": {
          "value": "#fa5343",
          "type": "color",
          "filePath": "output.json",
          "isSource": true,
          "original": {
            "value": "#FA5343",
            "type": "color"
          },
          "name": "ColorPaletteRed050",
          "attributes": {
            "category": "color",
            "type": "palette",
            "item": "red",
            "subitem": "050"
          },
          "path": [
            "color",
            "palette",
            "red",
            "050"
          ]
        }
      },
      "blue": {
        "070": {
          "value": "#0d4ea6",
          "type": "color",
          "filePath": "output.json",
          "isSource": true,
          "original": {
            "value": "#0D4EA6",
            "type": "color"
          },
          "name": "ColorPaletteBlue070",
          "attributes": {
            "category": "color",
            "type": "palette",
            "item": "blue",
            "subitem": "070"
          },
          "path": [
            "color",
            "palette",
            "blue",
            "070"
          ]
        },
        "060": {
          "value": "#186ade",
          "type": "color",
          "filePath": "output.json",
          "isSource": true,
          "original": {
            "value": "#186ADE",
            "type": "color"
          },
          "name": "ColorPaletteBlue060",
          "attributes": {
            "category": "color",
            "type": "palette",
            "item": "blue",
            "subitem": "060"
          },
          "path": [
            "color",
            "palette",
            "blue",
            "060"
          ]
        },
        "050": {
          "value": "#3d8df5",
          "type": "color",
          "filePath": "output.json",
          "isSource": true,
          "original": {
            "value": "#3D8DF5",
            "type": "color"
          },
          "name": "ColorPaletteBlue050",
          "attributes": {
            "category": "color",
            "type": "palette",
            "item": "blue",
            "subitem": "050"
          },
          "path": [
            "color",
            "palette",
            "blue",
            "050"
          ]
        }
      }
    },
    "button": {
      "primary": {
        "value": "#186ade",
        "type": "color",
        "filePath": "output.json",
        "isSource": true,
        "original": {
          "value": "#186ADE",
          "type": "color"
        },
        "name": "ColorButtonPrimary",
        "attributes": {
          "category": "color",
          "type": "button",
          "item": "primary"
        },
        "path": [
          "color",
          "button",
          "primary"
        ]
      },
      "destructive": {
        "value": "#d91f11",
        "type": "color",
        "filePath": "output.json",
        "isSource": true,
        "original": {
          "value": "#D91F11",
          "type": "color"
        },
        "name": "ColorButtonDestructive",
        "attributes": {
          "category": "color",
          "type": "button",
          "item": "destructive"
        },
        "path": [
          "color",
          "button",
          "destructive"
        ]
      }
    }
  }
};
    그다음에 쓰고 싶은 데만 import 사용하세요!
    NSString 및 NSData 변환
    [React] "streamich/use-media"대신 "streamich/react-use"를 사용하는useMedia

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage