[figma] github과 연결하고 토큰 가공하기

Create

[figma] github과 연결하고 토큰 가공하기

SleepingOff 2024. 4. 17. 20:29

예전에도 했었지만 벌써 설정한지 1년이 다 되어 가서 가물가물했습니다. 그래서 이번에 다시 설정한 김에 제대로 정리해보려고 합니다.

글을 써가면서 코드에 변화가 많습니다. 최종 코드가 필요하다면(?) 가장 아래 부분으로 내려서 확인해주세요!

📁작업 과정

👉피그마 variables 추가하기

요즘엔 figma도 좋아져서 variables로 등록해놓고 플러그인들을 활용하여 작업 속도를 높일 수 있어 좋습니다.

간단하게 Typography, colors 설정만 연결하려고 합니다. 스터디용이라서 간단하게 만들었습니다.

👉피그마 플러그인 : token-studio

피그마의 local varibales와 local styles에 등록해두었습니다. 아쉽게도 무료버전은 typo를 variables로 등록할 방법을 찾지 못해 styles로만 설정해두었습니다. 이렇게 토큰들을 잘 정리했다면 플러그인을 사용할 차례입니다.

플러그인은 Tokens Studio for Figma로 하였습니다. 문서도 잘 나와있고, github뿐 아니라 다른 곳들도 연결할 수 있도록 발전했습니다. 개발과 관련한 패키지도 제공하고 있어서 디자인 토큰을 쉽게 가공할 수 있습니다.

공식문서 바로가기 | https://docs.tokens.studio/?ref=pf

글을 쓰면서 느낀 건데 최적화도 꽤 발전했습니다. 예전에는 창을 왔다갔다 하면 바로 오류를 내뱉고 창을 닫아버리던데, 이번에는 그러지 않고 있습니다. 오...

👉github과 연동하기

토큰 스튜디오를 설정하는 방법은 예전에 쓴 글을 가져왔습니다.

토큰 스튜디오 설정 바로가기 | https://velog.io/@just_jh30/Figma-github-1

이번 글에서는 github와 연동한 뒤에 github action을 사용해 토큰 가공을 자동화하는 과정에 대해서 자세하게 다루려고 합니다.

먼저 디자인 토큰들이 잘 들어왔는지 확인해줍니다. design 브랜치에 연결되어 있고, 토큰이 잘 정리되었으니 바로 push하여 github으로 디자인 토큰 정보가 있는 json 파일을 보내줍니다.

github에서 확인하니 원하는 경로에 json 파일로 잘 들어왔습니다.

이제 토큰을 가공할 차례입니다. 저는 css를 사용할 거라 @tokens-studio/sd-transforms 패키지를 사용할 것입니다. 이 패키지도 토큰 스튜디오에서 제공합니다. 여기에서 단점은 리드미가 최신 버전을 반영하고 있지 않다는 것입니다.

패키지 정보 바로가기 | https://classic.yarnpkg.com/en/package/@tokens-studio/sd-transforms

👉개발 세팅하기

일단 yarn add로 해당 패키지를 devdependancies에 추가했습니다.

그리고 실행파일 하나를 작성해야 합니다. 저는 루트에 design.js로 추가했습니다. 리드미의 Usage를 그대로 design.js에 붙여넣어줍니다. 주석으로 친절하게 어디를 고쳐야 하는지 알려주고 있습니다.

그 후 package.json의 script에 다음과 같이 명령어를 추가합니다.

"token-transfer": "node design.js"

바로 node desing.js로 실행할 수 있겠지만, package.json에 명시해 주어 명령어의 역할을 확실히 하는 게 좋다고 생각했습니다. 협업할 때는 더욱 더 필요할 수 있습니다. 그리고 한 번 실험해봅니다.

yarn token-transfer

그런데 실패했습니다...

알고보니 제가 설치한 패키지는 가장 최신 버전이고, 리드미에 나와있는 Usage는 오래된 버전의 예시였습니다. 그래서 다음과 같이 고쳐서 작성해주었습니다.

import { registerTransforms } from "@tokens-studio/sd-transforms";
import StyleDictionary from "style-dictionary";

// will register them on StyleDictionary object
// that is installed as a dependency of this package.
registerTransforms(StyleDictionary);

const sd = new StyleDictionary({
  source: ["src/assets/design/tokens.json"],
  platforms: {
    css: {
      transformGroup: "tokens-studio",
      transforms: ["name/kebab"], // <-- add a token name transform for generating token names, default is camel
      buildPath: "src/assets/design/",
      files: [
        {
          destination: "variables.css",
          format: "css/variables",
        },
      ],
    },
  },
});

sd.cleanAllPlatforms();
sd.buildAllPlatforms();

다시 실행하니 잘 변환이 됩니다!! 변환 결과입니다.

이제 이걸 자동화할 차례입니다. github action을 사용할 것입니다.

👉github action 설정하기

design 브랜치의 tokens.json에 push가 일어날 때마다 토큰을 변환하고 해당 내용을 PR로 만들 것입니다. 기본적인 세팅은 chatGPT의 도움을 좀 받았습니다. github action yml 파일 만들건데, yarn을 쓸거야 하면 뚝딱해줍니다. 거기에 저는 한 단계만 추가했습니다. 사실 추가한 단계도 블로그에서 그대로 긁어왔습니다...ㅎㅎ 어떻게 동작하는지 알고 잘 되니까요ㅎㅎ

참고한 블로그 바로가기 | velog

.github/workflows/figma.yml 입니다.

name: Create PR from design to main

# design 브랜치의 tokens.json 파일에 대한 push 감지
on:
  push:
    branches:
      - design
    paths:
      - "src/assets/design/tokens.json"

jobs:
  createPullRequest:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Install dependencies
        run: yarn install
      # 디자인 파일 변환 후 생성된 파일도 push해서 main 브랜치로 병합하는 PR을 생성
      - name: Run Token Transformer
        run: |
          yarn token-transfer
          git config --global user.name "sleepingoff" 
          git config --global user.email "justjh30@gmail.com"
          git add .
          git commit -m '피그마 디자인 파일 변환'
          git push
        env:
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}
      - name: Create Pull Request
        run: gh pr create -B main -H design --title '💄 디자인 토큰 업데이트' --body '디자인 토큰이 업데이트 후 변환작업을 수행했습니다.'
        env:
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}

📁이슈 모음

✨이슈: scss로 확장자 변경

css 쓰다보니 인간적으로 아직 불편해서 sass라도 도입해야겠다 싶었습니다. 그래서 바로 패키지 설치하고 설정 파일을 좀 건들었습니다.

1. design.js 에서 다음과 같이 파일 확장자 교체

2. 잘 실행되는지 확인 `yarn token-transfer` -> ok

3. github action 실행: 일부 토큰 변경 후 피그마에서 push해보기

참고로 커밋 메시지에 이슈 번호 써도 잘 작동합니다.

✨이슈: github action permissions 추가

그런데 github action에서 에러가 나오기 시작했습니다.

0. 노드 버전에서 에러가.. 어라.. -> 노드 버전을 20으로 업그레이드

1. github action pull-request permissions 추가

와 이제 되겠지? 하고 테스트 겸 토큰을 몇 개 추가해서 figma에서 push를 눌렀습니다.

✨이슈: 레퍼런스 오류

일부 토큰에서 레퍼런스 오류가 나왔습니다. 바로 다른 토큰을 참조해서 계산을 하고 있던 토큰들이었습니다.

이를 해결하기 위해서는 토큰을 1차 가공한 이후 결과를 가지고 githug action을 실행해야 했습니다.

그래서 token-transformer라는 패키지를 추가로 설치했습니다. 그리고 실행을 위해 다음과 같이 써주어야 합니다.

yarn add token-transformer
yarn run token-transformer input.json output.json

저의 경우 input.json에 ./src/aseets/design/tokens.json을, output.json에 ./src/assets/design/transfer.json을 넣어서 실행했습니다. 그리고 실행한 결과인 transfer.json을 가지고 scss로 변환하기 위해 design.js 파일을 다시 작성하였습니다.

업데이트 내용을 추가로 확인해서 다음과 같이 고쳤습니다.

import StyleDictionary from "style-dictionary";

const options = {
  source: ["./src/assets/design/transfer.json"],
  platforms: {
    scss: {
      // transformGroup: "tokens-studio",
      transforms: ["name/kebab"],
      buildPath: "src/assets/design/",
      files: [
        {
          destination: "variables.scss",
          format: "scss/variables",
        },
      ],
    },
  },
};

const sd = new StyleDictionary(options, {
  verbosity: "verbose",
  warnings: "warn",
});

sd.buildAllPlatforms();

이렇게 해서 토큰 가공이 성공적으로 되는지 확인합니다.

✨이슈: 의존성 패키지 버전

.... 넵... 안됐네요.. 문제는 현재 require이 ESM에서 인식하지 못한다는 것입니다. package.json에 type: module까지 추가했음에도 불구하고, 해당 오류가 계속 뜹니다. 분명 처음에는 잘 됐는데, 이것저것 건들고 나니 엉뚱한 애가 안되길 몇 번째 반복 중입니다ㅎㅎ

오류 메세지와 해당하는 코드입니다. 저 require을 로컬에서는 import로 바꿔서 쓸 수 있겠지만, 저는 github action에서 실행하고 싶었습니다. 그래서 집단지성의 힘을 빌려(질문하기) 문제를 해결했습니다!!

package.json에 resolutions 부분을 추가했더니 되었습니다!!

(github action을 10번 안에 성공시키다니 성장했다..ㅎ)

소소하게 팁을 드리자면, 디자인 토큰에 변화가 일어날 때마다 design 브랜치를 주기적으로 새로 생성하고 작업 후 브랜치를 삭제해두는 게 좋습니다ㅎㅎ 이유는 커밋 히스토리가 꼬일 수도 있기 때문입니다. 후반부에는 디자인 토큰이 자주 변하지 않을테니, design 브랜치를 그대로 두다가 업데이트된 토큰만 꺼내오기는 힘들테니 말이죠!

😁진짜진짜 최종 코드

design.js

import StyleDictionary from "style-dictionary";

const options = {
  source: ["./src/assets/design/transfer.json"],
  platforms: {
    scss: {
      // transformGroup: "tokens-studio",
      transforms: ["name/kebab"],
      buildPath: "src/assets/design/",
      files: [
        {
          destination: "variables.scss",
          format: "scss/variables",
        },
      ],
    },
  },
};

const sd = new StyleDictionary(options, {
  verbosity: "verbose",
  warnings: "warn",
});

sd.buildAllPlatforms();

.github/workflows/figma.yml

name: Create PR from design to main

# design 브랜치의 tokens.json 파일에 대한 push 감지
on:
  push:
    branches:
      - design
    paths:
      - "src/assets/design/tokens.json"

permissions:
  pull-requests: write
  packages: read
  contents: write

jobs:
  createPullRequest:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 20
      - name: Install dependencies
        run:
          yarn install
          #디자인 토큰에서 계산 처리해주는 1차 가공
      - name: Run Token Transformer
        run: |
          yarn run token-transformer ./src/assets/design/tokens.json ./src/assets/design/transfer.json
          git config --global user.name "Sleepingoff"   
          git config --global user.email "justjh30@gmail.com"
          git add .
          git commit -m "피그마 디자인 토큰 파일 변환"
          git push
        env:
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}

        #디자인 토큰을 스타일 파일로 변환하는 2차 가공
      - name: Make Token Scss
        if: success()
        run: |
          yarn token-transfer
          git config --global user.name "Sleepingoff"   
          git config --global user.email "justjh30@gmail.com"
          git add .
          git commit -m "디자인 토큰 스타일로 변환"
          git push
        env:
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}

      - name: Create Pull Request
        run: gh pr create -B main -H design --title '💄 디자인 토큰 업데이트' --body '디자인 토큰이 업데이트 후 변환작업을 수행했습니다.'
        env:
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}

package.json

{
  "name": "reactui",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "resolutions": {
    "wrap-ansi": "7.0.0",
    "string-width": "4.1.0"
  },
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "token-transfer": "node design.js"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "storybook": "^8.0.4"
  },
  "devDependencies": {
    "@tokens-studio/sd-transforms": "^0.15.2",
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "token-transformer": "^0.0.33",
    "typescript": "^5.2.2",
    "vite": "^5.2.0"
  }
}

👉결론

포기하지 말고 집단지성(질문)의 힘을 빌리자!

이번이 피그마와 github을 연동시키고 디자인 토큰을 가공하는 것에 대한 2번째 경험이었습니다. github action도 마찬가지였습니다. 첫번째에서는 github action 실패만 50번 넘게 한 것 같습니다. 이번에는 어떻게 돌아가는지 알고 에러 메세지도 잘 파악할 수 있었고, 로컬에서도 테스트 할 수 있다는 걸 깨닫게 되어 10번에서 그친 것 같습니다. (이번만 action이 성공한 걸 수도 있죠) 그동안 성장한 걸 새삼 느끼고 아직 배울 게 많다는 걸 다시 깨달았습니다. 화이팅!!

728x90

저작자표시 비영리 동일조건

'Create' 카테고리의 다른 글

[React] 컴포넌트는 한 번에 하나의 책임만 진다. (0)	2024.05.05
[package] 나 뭘 알고 있을까? (0)	2024.04.28
[front] 프로젝트 초기 세팅: linter, formatter (1)	2024.04.19
[vue] 전체 선택이 있는 체크박스 그룹 만들기 (0)	2024.04.15
Storybook을 도입하자 컴포넌트가 정리됐다 (0)	2023.12.02

현재글[figma] github과 연결하고 토큰 가공하기

250x250

egg.dev.log

건축학도가 프론트엔드 개발자로 성장하기

KPT, 회고, 인프라 구조, 독서, matter.js, js 물리엔진, ESlint v9.0.0, 개발자, 체크박스 그룹, 반응형 textarea, 코테, 작성, 프로그래머스, 검색필터, 기술 문서, eslint v9, 원티드, 기술문서, react, 옵시디언,

Today :
Yesterday :

egg.dev.log