팰리컨적 사고로 Figma Plugin 개발해보기 - 1. 세팅하기

목차

---

냅다 시도해보기

Figma Plugin 만들어 본 경험기

이 글에서는 Figma Plugin을 만드는 과정을 두 편에 걸쳐 소개하려고 한다.

 

1편에서는 Figma에서 제공하는 예제 플러그인 파일을 세팅하고 실행해보는 것까지의 과정을 다룬다. 처음 시작하는 분들도 쉽게 따라 할 수 있도록 환경 설정부터 시작해 플러그인 기본 구조를 이해하고 실행하는 방법까지 설명할 예정이다.

 

2편에서는 플러그인을 직접 만들어보고 피그마 커뮤니티에 등록하는 방법을 안내한다. 예제 플러그인을 만들어보고, 이 플러그인을 실제로 커뮤니티에 배포해보는 과정을 담았다.

 

그럼 시작해보자.

 

Figma Plugin 개발을 시도한 이유

포텐데이에 참가한 뒤, 실무 감각을 유지하기 위해 클론 디자인을 꾸준히 해보기로 했다. 마침 나이키 웹페이지를 클론 해보기로 하고, 먼저 색상 시트템부터 Figma로 옮기는 작업을 시작했는데, 반복되는 작업이 눈에 보였다. "어떻게 하면 좀 더 쉽게 색상을 옮길 수 있을까?" 라는 고민 끝에 직접 Figma Plugin을 만들어보기로 했다. 기본적인 기능일 거라 생각했는데, 피그마 커뮤니티에서 내가 원하는 기능을 수행해주는 플러그인을 찾지 못했던 것도 직접 만들게 된 이유 중 하나였다.

 

개발을 시작하기 전 설정

1. Figma에서 개발 파일 생성하기

Figma에서 플러그인 개발 파일을 생성하기 위해, 아래 경로로 접근한다. 

상단 메뉴에서 Plugins → Development → New plugin...
(또는 Cmd(ctrl) + P → New Plugin 검색으로 동일하게 접근 가능)

위와 같은 창이 뜨면, 플러그인의 이름을 먼저 입력한다. (예시로 Test로 설정) 여기서는 Figma에서 동작하는 플러그인을 만들 것이기 때문에, 오른쪽 Figma design 옵션을 선택한 뒤 Next를 클릭한다.

다음 화면에서는 세 가지 옵션 중 하나를 선택해야 한다.
1. Default
2. Run once: 사용자에 보여지는 UI 없이 바로 실행하는 경우
3. Custom UI: 사용자가 직접 상호작용할 수 있는 UI가 필요한 경우

 

이때 Run once와 Custom UI의 가장 큰 차이는 "사용자가 다룰 UI의 유무"다. 또한, 이 옵션에 따라 생성되는 개발 파일도 달라지는데, Run once로 생성하면 ui.html 파일이 없다. (ui.html에서 UI를 만들기 때문) 그래서 여기서는 Custom UI 선택한 후, Save as를 클릭하여 플러그인을 생성한다.

정상적으로 생성이 완료됐다면, 위와 같은 파일 구조가 만들어졌을 것이다. 이제 이 폴더를 코드 에디터로 열어 개발 준비를 해보자. 

 

2. Visual Studio Code 설치하기 후 파일 열기

우선, https://code.visualstudio.com 에 접속해, Visual Studio Code를 다운로드하고 실행한다.

Visual Studio Code를 처음 실행하면 위와 같은 시작 화면이 뜬다. 여기서 열기를 선택한 뒤, 앞서 생성한 Test 폴더를 찾아 열어준다. 

이제 왼쪽 패널에서 Test 폴더가 표시되는 것을 확인할 수 있다. 여기서 1️⃣ code.ts와 2️⃣ ui.html 파일만 수정하여 작업한다고 생각하면된다. 

3. 플러그인의 구조 알아보기

여기까지 세팅이 끝났다면, 본격적인 개발에 앞서 플러그인이 어떻게 구성되어 있는지 살펴보자.

출처: 피그마 공식 개발 문서

위 이미지처럼, ui.html에서 만든 UI는 사용자가 직접 상호작용하는 부분이다. 이때 사용자가 요청한 내용은 ui.html이 code.js로 msg만 전달하는 역할을 한다고 보면 된다. msg가 트리거가 되어, 결국 code.js에 정의된 함수들이 실행되는 구조이다.

 

4. 플러그인 실행해보기 (왜 아무 반응이 없지?)

화면을 보면서 개발하기 위해, 이제 플러그인을 실행해보자. 

반응이 없는 Test 플러그인

Test 플러그인을 실행시키면 아무 반응이 없을 것이다. 그 이유는 README.md에서 안내하는 사항을 아직 이행하지 않았기 때문이다. 아래 세 가지 과정을 터미널에서 순서대로 진행해보자. 

 

1. nvm과 Node.js 설치하기

# Download and install nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

# Download and install Node.js:
nvm install 22

 

2. TypeScript 설치하기

npm install -g typescript

 

3. Figma 플러그인 타입 정의 설치하기

npm install --save-dev @figma/plugin-typings

 

이 세 가지 작업을 마쳤다면, 프로젝트 폴더에 새로 생긴 파일들을 확인할 수 있을 것이다.

 

그리고 추가로 한 가지 더 해줘야 한다. 바로 빌드 작업(Watch 모드) 실행이다.

 

4. 빌드 작업 실행 (npm: watch)

- VS Code에서 터미널 → 빌드 작업 실행 → npm: watch를 선택하거나

- 혹은 터미널에서 직접 npm run watch 명령어를 입력해도 된다.

 

이 Watch 모드는 code.ts (또는 다른 TypeScript 파일) 내용이 바뀔 때마다, 자동으로 JavaScript로 컴파일 해주는 역할을 한다. 즉, 코드를 수정하고 저장할 때마다 실시간으로 빌드가 이루어지니까, 수동으로 매번 빌드 명령을 내릴 필요 없이 편리하게 개발할 수 있다.

이 네 가지 과정을 모두 끝냈다면, 이제 플러그인을 다시 실행해보자. 플러그인 창이 보이는 걸 확인할 수 있을 것이다.

 

1편 세팅하기 끝

여기까지가 Figma 플러그인을 개발하기 위한 기본 세팅 과정이다. 정리하자면, 환경설정(Node.js, nvm, TypeScript, Figma 플러그인 타입 정의)부터 자동 빌드(Watch 모드) 설정까지 마쳤으니, 이제 실제 기능을 구현하고 UI를 다듬을 일만 남았다. 다음 편에서는 플러그인을 직접 만들어보고, 이를 Figma 커뮤니티에 등록하는 과정을 다루겠다.