Figma Plugin 배포부터 npm publish까지 - FigLog 배포기

FigLog는 DA→FE 로깅 파이프라인을 Figma 위에서 해결하는 플러그인이다.

설계와 구현 과정은 별도 글에서 다뤘고, 이 글에서는 배포 과정만 정리한다.

 

(로깅, 시트 말고 Figma에서 하면 안 되나? - FigLog 개발기: https://developer-dreamer.tistory.com/232)

 

Figma Community에 플러그인을 올리고, npm에 패키지를 퍼블리시하기까지의 과정이다.

---

Figma Plugin 배포

Figma 플러그인은 manifest.json을 사용해 배포한다.

{
  "name": "FigLog",
  "id": "<plugin-id>",
  "api": "1.0.0",
  "main": "dist/code.js",
  "ui": "dist/ui.html",
  "editorType": ["figma"],
  "networkAccess": { "allowedDomains": ["none"] },
  "documentAccess": "dynamic-page"
}

 

id는 Figma에서 배포 시 자동 생성되는 고유 식별자이다.

networkAccess를 ["none"]으로 명시해서 외부 통신이 없음을 선언하고,

documentAccess는 현재 열린 페이지에만 접근함을 명시했다.

 

배포 과정

1. Figma 파일을 열고 우클릭>Plugins>Development>Import plugin from manifest

-  Figma Plugin용으로 구현한 manifest.json을 선택한다

 

2. Import된 플러그인의 오른쪽에 메뉴 버튼을 누르고 > publish를 선택한다.

(난 이미 publish를 완료해서 publish new version이라는 버튼이 뜬다)

 

3. 플러그인의 정보를 입력한다.

1. Describe your resource

Name: 서비스 이름
Tagline: 이 플러그인 한 줄 요약
Description: 이게 무엇이고, 어떻게 쓰고, 핵심 기능이 무엇인지
Category: 이 플러그인의 분류. 나는 software development로 설정했다.

 

 

4. 플러그인 로고와 배너를 추가한다

2. Choose some images

이미지는 언제나처럼 gpt가 만들어줬다.

gpt 프롬프트는 claude가 만들어줬다.

고맙다 얘들아 ^^

 

5. Data Security

질문에 대해 대답하면 된다.

- 플러그인이 통신하는 외부 서버가 있는지?
- 외부 API/CDN 등에 HTTP 요청을 보내는지?
- 로그인/OAuth 같은 인증이 있는지?
- pluginData, clientStorage 등에 데이터를 저장하는지?
- 업데이트는 혼자 관리하는지 팀이 관리하는지?

 

6. 마지막 점검

4. Add the final details

- Generate ID 버튼을 눌러서 Plugin ID를 발급하고, 이를 manifest.json에 반영한다.

- 네트워크 접근이 필요하면 alloweDomains에 세팅하고, 아니면 "networkAccess":{"allowedDomains":["none"]}을 설정한다.

- Figma Plugin을 배포하려면 2FA를 설정해야 한다. 난 Microsoft Authenticator를 썼다.

 

이 과정을 거치고 나면 다시 manifest.json을 import해야 저 경고 문구들이 잘 사라질 것이다.

난 다시 import해도 이전 수정 사항이 중간 저장 되어있어서 바로 제출 버튼을 눌렀다.

 

7. 제출 완료

https://www.figma.com/community/plugin/1617597676660123564/figlog

 

내 Figma Plugin에 접근할 수 있는 링크가 생성된다.

심사를 통과해야 전체공개가 된다! (빨리해줘!!!!)

https://www.figma.com/community/plugin/1617597676660123564/figlog

 

8. +경과 업데이트: 승인 (26년 5월 6일 오전 1시 49분 KST)

3월 24일 출시부터... 굉장한 인고 끝에 26년 5월 6일에 승인을 받았다...

영엽일 기준 5~10일 소요라고 했지만...

그냥 마음을 비우고 오래오래 기다리면 언젠가 승인을 해주는구나 싶었다

---

Package 배포

1. npm 계정을 만들어준다.

 

2. npm organization을 만든다.

- 이름을 figlog로 설정했다.

- organization을 만들면 그 이름으로 스코프를 만들 수 있다.

 

3. npm 계정에 2FA 설정을 해준다.

- Authenticator 같은 OTP 로그인을 지원하지 않아서 그냥 generate Token했다.

 

4. 배포하고자 하는 노트북에 npm login을 해준다.

 

5. Package를 구현한 레포에서 pnpm publish로 배포한다.

 

6. 배포 완료

https://www.npmjs.com/package/@figlog/vite-plugin

https://www.npmjs.com/package/@figlog/runtime

https://www.npmjs.com/package/@figlog/schema

우와! 이제 npm install @figlog/vite-plugin @figlog/runtime 으로 설치할 수 있다.

 

처음으로 Figma Community + npm 양쪽에 배포해봤는데, Figma 쪽은 2FA부터 manifest 설정까지 삽질이 좀 있었다.

배포 과정 자체는 한 번 해보면 어렵지 않으니, 이 글이 누군가에게 도움이 됐으면 좋겠다.

 

작성: 2026.03.24. 01:41

업데이트: 2026.05.06. 12:39