Figma-export로 color, icon, image, typography를 자동으로 export 해보기

결론부터 말하자면 다 하고보니 피그마 유료버전만 사용 가능해서 결국은 사용하지 못했지만..

추후에 다시 사용할 때를 대비하여 멤모멤모

 

Figma color 일일이 asset 추가 + SwiftGen

지난 프로젝트에서 Figma로 디자인 시스템을 간단히 만들고 asset에 추가했는데

이때 color picker로 light, dark 모드 컬러를 하나하나 찍으면서 추가했어서 정말 오래걸리고 부정적인 경험이었다ㅠ

가끔 멍때리다가 잘못 찍으면

 

 

이렇게 추가하고는 SwiftGen 이라는 오픈소스를 사용해서 assets에 있는 컬러들을 자동으로 코드로 변환해주도록 사용했었다.

https://github.com/SwiftGen/SwiftGen

 

이 부분에선 자동으로 생성해주니 편안했는데 color를 추가하거나 변경할때 수동으로 해주니 힘들어서 다른 방법을 찾아봤다.

 

 

Figma-export

https://github.com/RedMadRobot/figma-export

GitHub - RedMadRobot/figma-export: Command line utility to export colors, typography, icons and images from Figma to Xcode / And

스타가 500개 정도로 피그마에서 자동으로 에셋에 추가해주는 오픈소스를 발견했다.

아마도 코드까지 생성해주는 것 같다. 해보질 못해서 결과는 모르겠지만 ㅠ.ㅠ 

 

 

설치방법

1. 설치 전에 Figma access token 환경변수를 추가해주어야 한다고 한다. 

 

터미널을 열어서 (zsh 사용) 다음과 같이 입력해주고

vi ~/.zshrc

첫줄에 다음과 같이 입력해준뒤 저장한다.

export FIGMA_PERSONAL_TOKEN=본인의 personal access token 값

personal access token 값은 https://www.figma.com/developers/api#access-tokens 여기서 버튼을 누르면 생성할 수 있다.

fastlane을 쓰면 한줄 추가하라는데 안쓰니 패스

저장 후에는 다음과 같이 입력해서 적용시켜준다. 아무것도 안뜨면 적용된 것

source ./zshrc

 

 

 

2. brew로 figma-export 다운받기

간단하게 brew로 설치한다. CocoaPods + Fastlane 방법도 있는듯하다.

brew install RedMadRobot/formulae/figma-export

 

3. 설치가 완료됐으면 figma-export binary 폴더로 이동한다.

폴더 위치는 brew로 설치했다면 다음과 같다.

/opt/homebrew/Cellar/figma-export

/opt/homebrew/Cellar/figma-export/0.37.1/bin

4. 실행할 yaml 파일 만들기

configuration 파일을 만들어야한다. 예시는 https://github.com/RedMadRobot/figma-export/blob/master/CONFIG.md

iOS 프로젝트 예시는 Examples/Example/figma-export.yaml

 

bin 폴더 안에서 다음과 같은 명령어를 입력하면 템플릿을 생성해준다.

ios 불편-

figma-export init --platform android
figma-export init --platform ios

 

파일을 열어보면 여러 옵션을 수정할 수 있다.

 

Identifier id 값은 브라우저로 피그마 파일을 열면 주소창에 있는 값 인데 ..

팀 라이브러리를 직접 써보지 않아서 아마 팀 라이브러리 url 값 안에 들어있지 않을까 추측 ㅠㅠ

 

그 외의 것은 차근차근 읽어보면 설명이 잘 되어있다.

다크모드 지원도 가능

 

프로젝트 Path to xcodeproj 나 target 입력하는 부분, 파일 생성되는 경로도 적어야한다.

 

이제 이 yaml 파일을 실행하려면 다음과 같이 터미널에 입력하면된다.

color, icon, image, typography 별로 실행이 가능한듯하다.

# To export colors use colors argument: 

./figma-export colors -i figma-export.yaml

# To export icons use icons argument:

./figma-export icons -i figma-export.yaml

# To export images use images argument:

./figma-export images -i figma-export.yaml

# To export typography use typography argument:

./figma-export typography -i figma-export.yaml

 

 

 

여기서 실패하고 다시 읽어보니 팀 라이브러리로 해야만 사용이 가능하다고 한다 ㅠ

팀 라이브러리는 유료플랜만 사용이 가능하다 ^,,^

 

https://designer-story.tistory.com/49?category=938457 

피그마의 팀 라이브러리 기능

 

나중에 유료플랜 사용할 때 다시보자,,