techlist.io
KREN
figma

FigJam에 도입된 오픈 플랫폼의 (새 탭에서 열림)

figjamreactjavascriptcssapihtmlfigma-pluginswidgets

FigJam은 Figma의 개방형 플랫폼을 확장해 플러그인과 위젯을 누구나 만들 수 있도록 지원한다. 플러그인은 반복 작업과 데이터 처리를 자동화하고, 위젯은 투표·설문·게임처럼 여러 사용자가 동시에 상호작용하는 협업 경험을 제공한다. 두 API 모두 JavaScript·HTML 또는 React 지식을 바탕으로 쉽게 시작할 수 있도록 설계되었다.

Figma 플러그인에서 FigJam으로 확장

  • Figma는 약 2년 전부터 플러그인을 통해 외부 데이터 연동, 워크플로 자동화, 디자인 프로세스 개선을 지원했다.
  • 핵심 원칙은 “웹사이트를 만들 수 있다면 플러그인도 만들 수 있어야 한다”는 것이다.
  • 따라서 기본적인 JavaScript와 HTML 지식만으로도 플러그인 개발을 시작할 수 있도록 API의 진입장벽을 낮췄다.
  • FigJam에도 같은 개방형 플랫폼 원칙을 적용하되, 협업 중심의 사용 사례를 추가로 고려했다.

플러그인과 위젯의 역할 차이

  • 플러그인
    • 개인 또는 팀의 작업 흐름을 자동화한다.
    • CSV 데이터를 스티키 노트 격자로 변환하거나, 스티키 노트에 태그를 붙이는 작업 등을 처리할 수 있다.
    • 보드의 객체를 정리·분석하거나 외부 콘텐츠를 가져오는 데 적합하다.
  • 위젯
    • FigJam 보드에 직접 배치해 여러 사용자가 함께 조작하는 인터랙티브 객체다.
    • 투표, 설문, 게임 등 협업형 기능을 구현할 수 있다.
    • 사용자가 보드에 드래그 앤 드롭해 사용할 수 있다.

React 기반의 선언형 위젯 API

  • 위젯 API는 플러그인 API와 달리 선언적·함수형 방식으로 설계되었다.
  • <Frame />, <Rectangle />, <Text />, <SVG /> 같은 컴포넌트로 위젯의 화면 구조를 정의한다.
  • 클릭 이벤트와 같은 사용자 상호작용에 임의의 코드를 연결할 수 있다.
  • FigJam의 기본 객체처럼 인라인 속성 메뉴도 제공할 수 있다.
  • React 컴포넌트와 유사한 구조를 사용하며, 컴포넌트 속성은 CSS의 레이아웃·스타일 속성과 비슷하다.
  • 예시 카운터 위젯은 다음 방식으로 동작한다.
    • useSyncedState('count', 0)으로 여러 사용자에게 동기화되는 상태를 만든다.
    • 사용자가 숫자를 클릭하면 setCount(count + 1)을 호출해 값을 증가시킨다.
    • Frame으로 자동 레이아웃과 패딩을 지정하고, Text로 현재 값을 표시한다.
    • widget.register(SimpleCounter)로 위젯을 등록한다.

FigJam 플러그인의 주요 활용 분야

보드 정리와 인사이트 도출

  • 보드의 객체를 체계적으로 정리하고 분석할 수 있다.
  • 스티키 노트를 색상별로 정렬하거나 카테고리용 태그를 추가할 수 있다.
  • 스티키 노트의 내용을 분석해 워드 클라우드처럼 주제를 시각화할 수 있다.
  • 투표 수를 자동으로 집계하는 스탬프 카운터 플러그인도 활용 사례로 제시된다.
  • 텍스트를 입력하면 여러 개의 스티키 노트를 자동 생성하는 플러그인도 소개된다.

반복 작업 자동화

  • 맞춤법 검사, 찾기 및 바꾸기 같은 수작업을 줄일 수 있다.
  • 동일한 스타일의 스티키 노트 100개를 한 번에 만드는 등 반복적인 작업을 자동화할 수 있다.
  • 사용자는 여러 단계를 직접 수행하는 대신 몇 번의 클릭만으로 작업을 완료할 수 있다.
  • Figma에서 사용되던 맞춤법 검사 플러그인을 FigJam으로 확장하는 사례가 언급된다.

콘텐츠 라이브러리 연동

  • 외부 서비스나 라이브러리의 콘텐츠를 FigJam 보드로 가져올 수 있다.
  • 아이콘, 이모지, 회사 로고 등을 빠르게 삽입하는 플러그인을 만들 수 있다.
  • Icons8, Material Design, Iconify, Brandfetch 등 기존 Figma 콘텐츠 플러그인의 FigJam 확장이 사례로 제시된다.
  • 이를 통해 FigJam 사용자는 별도의 검색·복사 과정 없이 보드 안에서 필요한 시각 자료를 활용할 수 있다.

사용자 맞춤 설정

  • 사용자가 원하는 색상, 폰트, 텍스트 스타일 등을 선택할 수 있는 기능도 플러그인 활용 분야로 제시된다.
  • FigJam은 기본적으로 폰트와 색상 체계를 단순하게 유지하지만, 사용자 요구에 따른 커스터마이징 수요가 존재한다.

실용적인 시사점

FigJam에서 자동화가 필요하면 플러그인을, 여러 사람이 동시에 조작하는 기능이 필요하면 위젯을 선택하는 것이 적합하다. 특히 React에 익숙한 개발자는 FigJam 레이어와 CSS와 유사한 컴포넌트 구조를 활용해 비교적 빠르게 인터랙티브 협업 도구를 만들 수 있다.