figma에서 버튼 하나로 github에 아이콘 업데이트하기

aken·2025년 6월 4일

전에는 피그마에서 아이콘을 다운로드 받고, 이를 원하는 폴더에 옮겨 pull request를 만들었어요.
아이콘이 여러 개라서 다운로드부터 pull request 생성까지 반복돼서 귀찮았습니다😩
그래서 이 반복된 작업을 자동화하기 위해 figma plugin을 개발하였습니다.

사용법

(github readme에도 사용법이 나와있습니다.)

1. 다운로드

우선, figma 링크에 들어가서 플러그인을 다운로드 받아주세요.

2. 입력

플러그인에 아래 값들을 입력해주세요.

github personal access token
github repository url
svg 파일들을 저장할 폴더
pull request 제목
pull request 설명

여기서 github personal access token을 생성하는 방법은 크게 2가지가 있는데요.

Classic PAT을 생성할 경우, repo 권한을 활성화해주셔야 합니다.

Fine-grained PAT을 생성할 경우, Repository permissions 섹션에서 다음 권한을 설정해주세요.

Contents: 읽기 및 쓰기
Metadata: 읽기 전용
Pull requests: 읽기 및 쓰기

위의 값들을 입력했으면, 가장 마지막에 checkbox가 있습니다.

이 checkbox를 표시하면, 아래 사진처럼 pull request 설명란에 추가/수정/삭제된 파일 목록이 자동으로 PR 설명에 포함됩니다.

3. 프레임 선택

아이콘들이 담긴 부모 프레임을 모두 선택해주세요.

그 다음 Push 버튼을 눌러주세요.

4. Pull Request 생성

Push 버튼을 누르고 나면, 생성된 Pull Request로 이동하는 버튼이 나타납니다.

PR이 잘 생성되었네요!
(이때 생성된 파일 이름은 figma에 정의된 프레임(또는 컴포넌트)의 이름입니다.)

왜 만들었나요?

위에서도 말했다시피, 귀찮음을 해소하기 위해서 였어요.

전에는 figma에서 export 버튼을 눌러 아이콘을 다운로드 받고, vscode 켜서 그 아이콘 파일을 옮기고, 커밋을 남기고, PR을 작성해야 했어요.

이 과정(위 사진에서 빨간색 박스)을 플러그인이 대신해준다면,
디자이너와 개발자 간의 커뮤니케이션 비용도 줄일 수 있지 않을까? 하는 생각이 들었어요.

이미 이 과정을 자동화한 플러그인이 있었어요.

(위 플러그인들을 한 번 사용해보세요. 좋은 기능들을 제공하고 있습니다.)

기존에 있는 플러그인을 사용해도 괜찮았지만, 제가 원하는 기능들이 담긴 플러그인을 만들고 싶었습니다.

개발

피그마 플러그인 구조

개발에 들어가기 앞서, 피그마 플러그인 구조에 대해서 알아야 할 점이 있습니다.
자세한 내용은 figma 공식문서에 잘 정리되어 있지만, 간단하게 설명하지면 피그마 플러그인은 크게 두 가지 계층으로 나뉩니다.

sandbox: 피그마 파일에 직접 접근하거나 조작하는 코드가 담김
- 브라우저 api 호출 x
- 플러그인 api 호출 가능
iframe: 사용자에게 보여지는 ui
- 브라우저 api 호출 가능
- 플러그인 api 호출 x

두 계층 간에 정보를 주고받으려면 postMessage로 주고 받아야 합니다.

postMessage

sandbox <-> iframe 간의 정보 통신 수단

iframe -> sandbox 메세지를 보낼 때

parent.postMessage({ pluginMessage }, "*");

parent: window의 프로퍼티로, sandbox를 나타냅니다.
- window = iframe, window.parent = sandbox
postMessage: 두 개의 다른 window 간에 안전하게 데이터를 전송하는 표준 API

sandbox -> iframe 메세지를 보낼 때

figma.ui.postMessage({ type, message })

프로젝트 생성

피그마 어플리케이션에서 왼쪽의 피그마 아이콘을 클릭하고, Plugins -> Development -> New plugin을 누르면 모달이 뜹니다.
개발하려는 플러그인에 따라 옵션을 선택해주시면, 원하는 플러그인 개발 환경을 마련해줍니다.

프로젝트 구조

제 플러그인의 디렉토리 구조는 아래와 같습니다.

project-root/
├─ packages/
│  ├─ plugin # sandbox 코드
│  │  ├─
│  └─ ui # iframe 코드
├─ manifest.json
├─ tsconfig.json
├─ webpack.config.js
└─ package.json

다른 피그마 플러그인 템플릿들도 구경해보세요.

manifest.json

figma 공식문서

{
  "name": "Push My Icons",
  "id": "xxxxxxxx",
  "api": "1.0.0",
  "main": "dist/plugin.js",
  "ui": "dist/ui.html",
  "editorType": ["figma"],
  "networkAccess": {
    "allowedDomains": ["https://api.github.com"]
  }
}

name: 플러그인의 이름
id: 플러그인의 고유 ID
api: 이 플러그인이 Figma의 API 버전 1.0.0과 호환된다는 의미
main: 플러그인의 주요 실행 파일 경로를 지정
ui: 플러그인의 사용자 인터페이스(UI) 파일 경로를 지정
editorType: 플러그인이 지원하는 에디터 유형을 지정
allowedDomains: Github API를 사용하기 위해 설정