Figma Design Token - 토큰 스튜디오 사용하여 json 파일 받기

드엔트론프·2024년 9월 3일

Figma Design Token Tokens Studio 토큰스튜디오

들어가며

회사 디자이너 친구가 열심히 작성한 피그마 디자인의 정보를 토큰화시켜서 json형태로 가져올 수 있다고 한다.

피그마에서 디자인 토큰을 쉽게 생성하고, 관리할 수 있게 도와주는 Tokens Studio라는 플러그인을 제공한다.

json형태로 가져온 친구를 style-dictionary 라는 걸 사용하면, index.css 에 사용하는 것처럼 사용할 수 있다!

토큰화 장점

토큰화시켜 가져오면 어떤 장점이 있을까?

개발자의 리소스를 줄일 수 있다. (근데 처음에 헤매서 리소스 많이 들었다;;)

이렇게 다양한 색상과 spacing 같은 정의된 값을 한 번에 받을 수 있는것.
어떻게 쓸 수 있는지 찾아보다 많은 삽질 끝에 해결할 수 있었다.

여러 블로그를 보면 방법은 그렇게 어렵지 않았는데,
style-dictionary 설치 (yarn add style-dictionary)
styleDictionary를 사용하여 가져온 token.json 파일을 css로 변환

import StyleDictionary from "style-dictionary";
const styleDictionary = StyleDictionary.extend({
  source: ["./tokens.json"],
  platforms: {
    scss: {
      transformGroup: "css",
      buildPath: "build/",
      files: [
        {
          destination: "variables.css",
          format: "css/variables",
        },
      ],
    },
  },
});
styleDictionary.buildAllPlatforms();

끝이다.

이렇게 쉽게 끝났으면 다행인데, 자꾸 Reference Error가 발생했다.

오류

Reference doesn't exist: semantic/Style.color.bg.tertiary.value tries to reference color.grey.200, which is not defined

"semantic/Style": {
    "color": {
      "bg": {
        "tertiary": {
          "value": "{color.grey.200}",
          "type": "color",
          "parent": "semantic/Style",
          "description": "",
          "oldValue": "{color.grey.100}"
        },

여기 들어있는 value에 {color.grey.200} 이 값이,

 "primitive/Mode 1": {
      "color": {
         "grey": {
          "100": {
            "value": "#fcfcfc",
            "type": "color",
            "parent": ".primitive/Mode 1",
            "description": ""
          },
          "200": {
            "value": "#f5f5f5",
            "type": "color",
            "parent": ".primitive/Mode 1",
            "description": ""
          },

문제 1. 정의를 찾지 못함

여기 primitive/Mode 1이라는 객체 안의 color의 grey - 200의 값이라 정의를 찾지 못하고 있었던 것.

이를 해결하기 위해 style-dictionary의 다양한 메서드(registerFormat, parser 등등…)를 찾아보았는데, 처음 토큰을 json으로 주는 방식에서 설정하는 법을 찾을 수 있었다.

Reference doesn't exist: X tries to reference Y, which is not defined · Issue #903 · amzn/style-dictionary

추출 전 parent key 체크를 빼준다.

피그마에서 토큰으로 추출할 때 처음 줬던 옵션과 다르게 설정하면서 넘어온 JSON 형태가 처음과 달라졌다.

문제 2. 중복

하다보니 없는 값들이 있어서 (font-weight 같은) 다시 불러오고 하다보니, 중복되는 값이 있기에 수기로 고쳤다. 그러다보니 처음 목적인 토큰화된 json 파일을 직접 바꿔주는.. 기존과 다를 바 없는 일을 하고 있는 것이다.

어떻게 할까 하다가 찾은건, 각 파일을 통합으로 다운받지 않고 따로 받는 것이다.

Single file이 아닌 Multiple files로 받는다.

따로 온 파일을 살펴보면 Mode 1.json, Style.json 이 나뉘는데, Style.json의 value의 color.blue.50 은 Mode1 의 color를 참조하는 것이다. 그렇기에 하나의 파일로 만들 때 중복되는 상위 키 값인 color의 이름을 바꿔주었다.

이후 처음 했던 것처럼 node style-dictionary를 실행하면 짜잔 !

정리된 css파일이 한 번에 나오는 것을 확인해볼 수 있다.

사용하기

실제 사용할 때는 아래와 같이 사용했다.

const BUTTON_TYPE = {
    primary: css`
      --button-color: var(--semantic-color-text-inverse);
      --button-bg-color: var(--semantic-color-bg-primary);
      --button-hover-bg-color: var(--semantic-color-bg-primary-hovered);
      --button-pressed-bg-color: var(--semantic-color-bg-primary-pressed);
    `,
    secondary: css`
      --button-color: var(--semantic-color-text-inverse);
      --button-bg-color: var(--semantic-color-bg-secondary);
      --button-hover-bg-color: var(--semantic-color-bg-secondary-hovered);
      --button-pressed-bg-color: var(--semantic-color-bg-scondary-pressed);
    `,
    outline: css`
      --button-color: var(--semantic-color-text-secondary);
      --button-bg-color: var(--semantic-color-bg-tertiary);
      --button-hover-bg-color: var(--semantic-color-bg-tertiary-hover-pressed);
      --button-border-color: var(--semantic-color-border-secondary);
      --button-hover-border-color: var(
        --semantic-color-border-secondary-hovered
      );
      --button-pressed-border-color: var(
        --semantic-color-border-secondary-pressed
      );
    `,
    tertiary: css`
      --button-color: var(--semantic-color-text-secondary);
      --button-bg-color: var(--semantic-color-bg-tertiary);
      --button-hover-bg-color: var(--semantic-color-bg-tertiary-hovered);
      --button-pressed-bg-color: var(--semantic-color-bg-tertiary-pressed);
    `,
    error: css`
      --button-color: var(--semantic-color-text-inverse);
      --button-bg-color: var(--semantic-color-bg-danger);
      --button-hover-bg-color: var(--semantic-color-bg-danger-hovered);
      --button-pressed-bg-color: var(--semantic-color-bg-danger-pressed);
    `,
  };