피그마 아이콘 추출 플러그인

주의 해당 플러그인은 아이콘이 있는 페이지에서만 동작합니다. 해당 페이지에서 아이콘이 있는 프레임을 입력하여야 합니다.

준비물

• 레포지토리 권한이 준비된 pat 토큰
• 피그마 토큰(피그마 홈페이지에서 발급가능)

전체 프로세스

피그마 플러그인 -> 아이콘 추출 -> pr 생성 -> merge -> github actions(update-icon.yml) -> svg 컴포넌트로 변환(icon-generator.js)

사용 방법

해당 플러그인을 사용하려면 먼저 빌드를 해야 합니다.

npm run build

그리고 해당 페이지에서 우클릭해서 플러그인을 클릭해 피그마에서 플러그인을 추가하고, manifest.json 파일을 선택하여 플러그인을 추가합니다.

플러그인을 실행하면 UI 창이 뜨는데, 여기서 피그마 토큰과 레포지토리 권한이 있는 pat 토큰을 입력하고, 아이콘이 있는 프레임을 선택하면 아이콘을 추출할 수 있습니다.

또한, 레포지토리의 폴더 구조에 맞게 아이콘을 업로드할 경로를 입력해야 합니다.

github actions

script 폴더에 있는 icon-generator.js 와 update-icon.yml을 올바른 경로에 위치시킵니다.

update-icon.yml

해당 파일은 pr이 merge될 때 icon-generator.js를 실행시킵니다.

icon-generator.js

해당 파일은 icon 폴더에 존재하는 svg들을 React에서 사용할 수 있게 컴포넌트로 변환해줍니다.