피그마와 깃헙 연동

피그마로 디자인 토큰을 생성하고 깃허브와 연동할 수 있다고 한다.
연동을 하면 피그마 내에서 커밋, 푸시를 할 수 있게 되는데 너무 신기하지 않나요..? 점점 발전하는 피그마.. 👍

디자인 토큰이란

디자인 토큰은 간단하게 말하면 디자인 시스템의 시각적 디자인 단위이다. UI 개발을 위해 확장 가능하고 일관된 시각적 시스템을 유지하기 위해 디자인 토큰을 사용한다.

토큰 생성

토큰 생성은 간단하다.
피그마에서 아래 플러그인을 설치 후 토큰을 생성하면 된다.
Tokens Studio 플러그인
Figma에서 파운데이션 토큰 제작하는데에 이 플러그인을 사용한다.

플러그인을 열면 이런 화면이 보인다.

피그마 연동

1. 레포지토리 생성

2. 세팅

settings > Developer settings > Personal access tokens > Tokens (classic)

Generate new token을 클릭 후 아래와 같이 세팅해주면 된다.

세팅 후 토큰을 생성하고 피그마에 입력하기 위해 저장해둔다.

3. 피그마 플러그인 세팅 및 연동

1. setting > Sync providers - Add New 버튼 클릭 후 GitHub 선택
   
2. 정보 입력
   - Name : GitHub 계정이름
   - Personal Access Token : 위에서 받아온 GitHub 토큰
   - Repository : GitHub 계정이름 / 저장소 이름
   - Branch : json 파일을 push할 브랜치
   (main 보다는 다른 브랜치를 따서 커밋하는 것을 추천한다)
   -File Path : json 파일명 (파일명 뒤에 .json 꼭 작성)
   

3. 연동이 완료 됐으면!
   플러그인 아래쪽의 Tools > Load from file/flder or preset 을 클릭한다. 그럼 이 화면을 볼 수 있는데 Preset 클릭 > Load preset 클릭시 임시 값들이 불러와짐!
   
   preset 으로 설정되어있는 값들을 내가 원하는 값으로 바꿔주면 된다.
   나는 gray만 설정값을 바꿔서 저장했다!
   

   연동과 토큰 설정이 끝났다.

4. 이제 커밋을 해 보자!
   아래 이미지 버튼을 호버하면 Push to Github 이 뜬다.
   
   이 버튼을 클릭하면 커밋메세지를 입력하는 창이 나온다. 작성 후 Push Changes 버튼을 클릭하면 끝이다!
   

깃헙에 잘 들어와 있는 것을 볼 수 있음!

json 파일을 보면 내가 설정해준 값으로 color value 가 설정되어 있다.

굳..!

Json 파일 변환 작업

CSS, SCSS를 사용하고 있다면 스타일 딕셔너리
CSS-in-JS를 사용한다면 Token Transformer 를 통해 변환

json 파일로 저장된 토큰은 사용할 수 있는 형식으로 만들어줘야 한다.
SCSS를 사용하고 있기 때문에 스타일 딕셔너리를 통해 변환 작업을 했다.

스타일 딕셔너리 공식문서 에 설명이 꽤 잘 되어있으니 참고하면 좋을 것 같다.

잠깐.. 변환 전에 확인해줄 것!

우선 변환작업을 하기 전에 위에서 했던 과정에서 수정해줄 부분들이 있다.
preset으로 만든 토큰을 저장하고 변환과정을 진행한다면 오류가 뜰 것이다.

"border": {
    "4-xs": {
      "value": "`${spacing.4-xs}`",
      "type": "borderRadius"
    }
  }

이 alias 값을 인식하지 못해서 오류가 난다. 그렇기 때문에 preset에서도 특정값을 참조하고 있다면 지우고 값을 넣어주는 것을 추천한다.. alias 를 사용하여 참조하고 싶다면 config 에서 설정을 해줘야 한다.

변환 작업 시작

1. 설치

npm install -g style-dictionary
or 
yarn add -g style-dictionary

2. root 경로에 config 파일 작성

//sd.config.js
const StyleDictionary = require('style-dictionary').extend({
  source: ['tokens/**/*.json'],
  platforms: {
    scss: {
      transformGroup: 'scss',
      buildPath: 'src/styles/scss/', //변환한 파일을 저장할 경로 
      files: [
        {
          format: 'scss/variables',
          destination: '_variables.scss',//파일명
        },
      ],
    },
  },
});

StyleDictionary.buildAllPlatforms();

3. 빌드, 변환 작업
   CLI를 통해 빌드해주는 방법도 있지만
   나는 node를 통해 변환하였다. (공식문서 참고)

   터미널에 $node sd.config.js 입력을 하면 아래와 같이 변환이 잘 된 것을 볼 수 있다!
   

굳 ..

트러블슈팅(?)

파일 경로

만일 token json 파일의 경로를 바꿔주고싶다면 tokens/designToken.json 이런식으로 작성하면 된다.
아래 이미지처럼 토큰 별도의 json 파일을 만들어 저장해주고 싶었으나 Token Studio 에서 저장할 때 다 통합이 되어버린다..
어차피 하나의 _variables 파일에 모든 변수를 저장해줄거라 별도의 파일을 나누는 것도 딱히 의미는 없을 것 같아 tokens/designToken.json에 저장했다

.