이제 누구나 플러그인을 만들 수 있는 시대
피그마로 작업을 하다 보면 "아, 딱 이런 기능 하나만 있으면 진짜 편할 텐데" 하고 생각할 때가 많습니다. 하지만 막상 내 손으로 플러그인을 만들어보려고 하면 '코딩'이라는 거대한 장벽에 부딪혀 시작조차 하지 못하고 포기하기 일쑤입니다.
하지만 이제는 상황이 다릅니다. 우리에겐 복잡한 코드를 대신 작성해 줄 AI가 있기 때문입니다. 개발 지식이 전혀 없어도 괜찮습니다. 디자이너 특유의 기획력과 AI에게 똑똑하게 일을 시키는 방법만 알면, 누구나 머릿속으로 상상만 하던 플러그인을 현실로 만들 수 있습니다.
이번 시리즈에서는 코딩을 모르는 디자이너의 시선에서, AI와 협업하여 피그마 플러그인을 완성하는 전체 과정을 공유하고자 합니다.
1. Figma Plugin의 구조
피그마 플러그인은 크게 code.ts와 ui.html 두 가지 파일로 구성됩니다.
ui.html: 사용자가 조작하는 시각적인 UI 화면을 담당합니다.code.ts: 플러그인의 실제 기능과 로직을 처리합니다. 이 파일 안에는 여러 함수(function)가 모여 플러그인의 구체적인 동작을 만들어냅니다.2. 어떤 기능을 만들지, 어떻게 작동할지 상상하기
보통 디자이너는 정적인 화면을 설계하는 데 익숙하기 때문에, 플러그인의 동적인 변화를 상상하는 것을 어려워합니다. 이때 기획한 기능이 어떤 원리로 작동할지 먼저 고민해 보는 과정이 필요합니다. 비슷한 레퍼런스를 찾아보는 것도 좋고, 원하는 동작 방식을 구체적인 문장으로 작성해 보는 것을 추천합니다.
예를 들어, 다음과 같이 질문을 던져보는 것입니다.
질문을 던진 후 핵심 기능을 문장으로 정리합니다.
Apply 버튼을 눌렀을때, 입력된 값을 plugin이 figma레이어에 auto layout 패딩으로 주입하는 기능
이처럼 동작 원리만 문장으로 명확히 정리해 두어도 개발 과정의 많은 문제가 쉽게 해결됩니다.
3. 기능이 여러 개일 땐?
앞서 피그마 플러그인의 핵심 로직이 code.ts에서 실행된다고 설명했습니다. 여기서 발생하는 가장 큰 문제는 피그마 환경에서는 외부 스크립트의 import가 불가능하다는 점입니다. 즉, 아무리 기능이 많아져도 모든 코드를 단 하나의 파일 안에 작성해야 합니다.
플러그인의 규모가 커질수록 code.ts 파일 하나에 방대한 코드가 누적됩니다. 코딩에 익숙하지 않은 디자이너는 AI에게 코드 수정을 요청해야 하는데, 파일이 하나로 뭉쳐 있으면 AI가 코드를 읽고 분석하는 데 너무 많은 시간을 소모하게 됩니다.
4. 번들링 툴로 해결하기
이 문제는 Vite와 같은 '번들링 툴'을 도입하여 깔끔하게 해결할 수 있습니다.
피그마는 오직 code.ts 단일 파일만 인식하지만, 작업 단계에서는 번들링 툴을 활용해 코드를 기능별로 쪼개서 관리할 수 있습니다. 그리고 작업을 마친 후 빌드(Build)를 실행하면, 번들링 툴이 분리되어 있던 파일들을 하나의 code.ts로 한 번에 통합해 줍니다.
이렇게 환경을 구축하면, AI에게 필요한 기능이 담긴 파일만 정확하게 지정하여 수정을 요청할 수 있어 작업 효율이 크게 높아집니다.
5. 여럿이서 작업할 수 있는 환경 만들기 (readme.md)
파일 분리를 통해 코드를 체계적으로 관리하더라도, AI나 동료 작업자가 어떤 파일에 어떤 기능이 있는지 모른다면 코드를 탐색하는 데 불필요한 시간이 낭비됩니다. 이를 방지하려면 프로젝트의 구조와 코드의 위치를 명확히 기록한 readme.md 문서를 꼼꼼하게 작성해야 합니다.
readme.md에는 다음과 같은 내용을 작성하면 AI나 동료가 이해하는데 한결 쉽습니다.
1. 프로젝트 요약 핵심 로직이 어떻게 흘러가는지, 중요한 진입점이 어디인지 가장 먼저 적어줍니다. AI가 전체 그림을 그리는 데 큰 도움이 됩니다.
프로젝트 요약 예시
2. 파일별 역할 지도 (File & Role Map) AI가 특정 기능을 고쳐야 할 때, 수많은 파일 중 '어떤 파일'을 열어야 하는지 목적별로 정리해 둡니다.
역할맵 예시
3. 기능 변경 시 확인해야 할 파일 (Quick Guide) "이걸 고치려면 여기를 봐라"라고 명확히 지시하는 부분입니다. AI에게 "할 일 삭제 기능을 고쳐줘"라고 할 때, 아래 가이드를 함께 주면 작업이 매우 빠르고 정확해집니다.
이처럼 readme.md를 AI를 위한 '내비게이션'처럼 구체적으로 작성해 두면, 새로운 기능을 추가하거나 오류를 수정할 때 이 문서만 프롬프트에 제공해도 AI가 프로젝트의 전체 구조를 완벽하게 이해하고 정확하게 작업에 착수할 수 있습니다.
마무리
지금까지 플러그인의 뼈대를 잡고 로직을 구성하는 '기능편'을 살펴보았습니다. 기능이 정상적으로 작동하는 똑똑한 두뇌를 만들었다면, 이제 우리가 가장 자신 있는 분야인 '디자인'을 입혀줄 차례입니다.
다음 [디자인 편]에서는 피그마에서 작업한 UI 디자인을 플러그인 화면(ui.html)으로 어떻게 매끄럽게 옮길 수 있는지, 그리고 기존 피그마 환경과 이질감 없는 깔끔한 플러그인 UI를 구성하는 실무 팁을 다룰 예정입니다.
x다음포스트
어떤 플러그인을 개발했는지 보고싶다면?