techlist.io
KREN
figma

5명의 플러그인 개발자가 (새 탭에서 열림)

reacttypescriptjavascriptcsshtmlfigma-pluginsfigma-plugin-apiwebpack

Figma의 첫 Plugin Show & Tell은 커뮤니티 개발자들이 제작 중인 플러그인을 직접 시연하고, 새로운 기능과 개발 방향을 공유하는 라이브 행사였다. 디자인 시스템 검사, 맞춤법 검사, 아이콘 관리, 문서 연결, 음성 제어 등 플러그인이 Figma의 작업 자동화와 확장성을 크게 넓힐 수 있음을 보여준다. 글은 행사를 소개하는 데 그치지 않고, 더 많은 개발자가 Figma Plugin API에 참여하도록 관련 자료와 커뮤니티를 안내한다.

Plugin Show & Tell의 목적

  • Figma 플러그인 커뮤니티의 창의적인 작업을 소개하기 위해 처음 개최된 라이브 스트리밍 행사다.
  • 개발자들이 플러그인을 홍보하고, 사용자가 새로운 API와 활용 방법을 탐색하도록 돕는 것이 목적이다.
  • 완성된 플러그인뿐 아니라 개발 중인 기능과 향후 로드맵도 공유했다.
  • 녹화 영상에서는 5명의 개발자가 디자인 시스템 검사부터 Figma 음성 제어까지 다양한 사례를 시연했다.

디자인 시스템과 품질 관리 자동화

  • Toybox의 Jono Kolnik은 개발 중인 Roller를 소개했다.
  • Roller는 디자인을 디자인 시스템과 비교해 오류와 불일치를 찾고 수정하도록 돕는다.
  • 반복적인 수동 검수 대신 플러그인이 디자인 규칙을 검사함으로써 일관성을 유지할 수 있다.
  • 디자인 시스템이 커질수록 색상, 간격, 컴포넌트 사용 규칙을 자동으로 점검하는 도구의 가치가 커진다.

맞춤법 검사와 외부 서비스 연동

  • Tekeste Kidanu는 Figma 안에서 사용하는 Spell Check 플러그인을 시연했다.
  • 프로젝트의 텍스트를 검사해 디자인 문서의 오탈자를 줄이는 데 활용할 수 있다.
  • 자신의 서비스인 Cleanmock을 Figma 내부에서 사용할 수 있도록 연동한 사례도 소개했다.
  • 플러그인은 Figma 캔버스뿐 아니라 브라우저 API와 외부 서비스까지 연결하는 확장 지점이 될 수 있다.

대규모 아이콘 세트 관리

  • Vjacheslav Trushkin은 Iconify 플러그인과 향후 계획을 공유했다.
  • Iconify를 사용하면 수백 개의 아이콘 세트를 Figma와 실제 제품 개발 과정에서 함께 활용할 수 있다.
  • 디자인 단계에서 선택한 아이콘을 production 환경까지 일관되게 연결하는 워크플로를 지향한다.
  • 방대한 아이콘 라이브러리를 검색하고 관리하는 문제를 플러그인으로 단순화한다.

검색·문서화·레이아웃 작업 개선

  • Jackie Chui는 여러 생산성 플러그인의 개선 사항을 소개했다.
  • Find & Replace는 Figma 문서 안의 내용을 빠르게 검색하고 바꾸는 기능을 제공한다.
  • Link to Documentation은 컴포넌트에 관련 문서 링크를 추가해 디자인과 가이드 문서를 연결한다.
  • Paste to Fill은 붙여넣은 이미지를 이미지 채우기로 적용한다.
  • 프레임 안 오브젝트의 여백과 크기를 관리하는 플러그인은 사용자 지정 프리셋을 지원할 예정이었다.
  • 이러한 도구들은 반복적인 레이아웃 조정과 문서 탐색 작업을 줄이는 데 초점을 둔다.

타이포그래피 규칙과 음성 인터페이스

  • Andrew Goodwin은 타이포그래피 규칙을 선택하고 적용하는 플러그인을 선보였다.
  • 사용자가 정해진 글꼴, 크기, 행간 등의 규칙을 적용해 텍스트 스타일을 일관되게 관리할 수 있다.
  • Figma를 음성 명령으로 조작하는 음성 UI도 시연했다.
  • Figma Plugin API의 기능 대부분을 음성 명령으로 매핑하는 작업이 거의 완료 단계라고 설명했다.
  • 이는 플러그인이 시각적 UI를 넘어 새로운 입력 방식과 접근성 기능까지 제공할 수 있음을 보여준다.

플러그인 개발을 위한 생태계

  • Figma는 플러그인 개발을 시작할 수 있도록 다음 자료를 제공했다.
    • 플러그인의 기본 구조와 개발 환경 설정을 설명하는 Getting Started 문서
    • 캔버스와 상호작용하는 공식 Plugin API 문서
    • Figma UI와 유사한 HTML·JavaScript·CSS 기반의 Figma Plugin DS
    • 오픈소스 플러그인 코드 목록
    • TypeScript, React/JSX, 번들링, 매니페스트 생성을 지원하는 FigPlug
    • 개발자들이 질문과 작업물을 공유하는 Figma Plugins Slack 커뮤니티
  • 조직 내부에서만 사용하는 비공개 플러그인도 팀별 워크플로 자동화에 활용할 수 있다고 안내한다.

실용적인 결론

Figma 플러그인은 단순한 편의 기능을 넘어 디자인 시스템 검증, 콘텐츠 품질 관리, 외부 데이터 연동, 접근성 개선, 개발 프로세스 연결까지 확장할 수 있다. 반복 작업이나 팀 고유의 규칙이 있다면 Plugin API와 오픈소스 사례를 참고해 사내 전용 플러그인부터 작게 만들어보는 것이 현실적인 접근이다.