techlist.io
KREN
figma

업무 자동화, 데이터 활용, (새 탭에서 열림)

design-systemsaccessibilityjavascripthtmlfigma-pluginsplugin-architectureweb-programming

Figma는 2019년 8월, 누구나 플러그인을 사용하고 직접 만들 수 있는 공개 플러그인 플랫폼을 출시했다. 플러그인은 반복 작업 자동화, 실제 데이터·이미지 활용, 접근성 검사 등 Figma의 기능을 확장하며 디자이너가 필요한 도구를 직접 만들 수 있게 한다. Figma는 웹 개발과 유사한 프로그래밍 경험을 제공하면서도 플러그인의 보안성·안정성·성능을 확보하는 것을 목표로 했다.

플러그인 플랫폼을 만든 배경

  • 기존 디자인 플러그인에는 두 가지 문제가 있었다.
    • 공식적으로 충분히 지원되지 않는 API를 사용하는 경우가 많아 안정성과 보안이 떨어졌다.
    • 디자이너가 직접 코딩하지 못하면 필요한 플러그인을 다른 사람이 만들어주길 기다려야 했다.
  • Figma는 플러그인을 단순한 부가 기능이 아니라 디자이너의 작업 흐름을 강화하는 “파워업”으로 정의했다.
  • 내부 목표는 “기본적인 HTML과 JavaScript로 웹 페이지를 만들 수 있다면 Figma 플러그인도 만들 수 있어야 한다”는 것이었다.
  • 웹 기반 디자인 도구를 위한 플러그인 아키텍처를 새롭게 설계했으며, 이를 통해 더 많은 개발자가 창의적인 플러그인을 만들 수 있도록 했다.

누구나 사용하고 만들 수 있는 생태계

  • 베타 공개 6주 만에 40개 이상의 공개 플러그인이 제공됐다.
  • Figma 제품 안에서 플러그인을 검색하고 한 번의 클릭으로 설치할 수 있다.
  • 디자인 파일에서 마우스 오른쪽 버튼을 클릭해 사용 가능한 플러그인을 실행할 수 있다.
  • Figma Organization 요금제에서는 다음 기능도 제공된다.
    • 회사 내부용 비공개 플러그인 제작 및 배포
    • 관리자가 승인된 플러그인 목록을 큐레이션
    • 관리자가 조직 구성원을 대신해 플러그인 설치

반복 작업을 자동화하는 유틸리티 플러그인

  • Similayer
    • 비슷한 속성을 가진 레이어를 한꺼번에 선택한다.
    • 여러 레이어를 일괄 수정해야 하는 반복 작업을 줄여준다.
  • Super Tidy
    • 프레임 이름을 정리하고 레이어 목록의 순서를 재배치한다.
    • 디자인 파일의 구조와 탐색성을 개선한다.
  • 이런 플러그인은 픽셀 단위의 수작업을 줄이고, 디자이너가 더 중요한 설계 작업에 집중하도록 돕는다.

실제 콘텐츠와 시각 자료를 가져오는 플러그인

  • Unsplash
    • Unsplash의 이미지를 Figma 파일에 직접 삽입할 수 있다.
    • 이미지 검색과 배치 과정을 간소화해 디자인 작업에 실제 시각 자료를 빠르게 반영한다.
  • Content Reel
    • 텍스트, 아바타, 아이콘 등 디자인에 필요한 콘텐츠를 검색하고 배치한다.
    • 더미 데이터 대신 맥락에 맞는 콘텐츠를 사용해 현실적인 시안을 만들 수 있다.
  • 이러한 플러그인은 디자인 시스템이나 화면 설계 단계에서 콘텐츠를 수동으로 준비하는 부담을 줄인다.

접근성 문제를 발견하는 플러그인

  • Contrast Checker
    • 색상, 시각 요소, 타이포그래피의 대비 수준을 검사한다.
    • 읽기 어렵거나 가독성이 낮은 디자인을 식별하는 데 도움을 준다.
  • Color Blind
    • 8가지 색각 이상 유형을 기준으로 디자인이 어떻게 보이는지 확인한다.
    • 디자이너가 다양한 사용자의 시각적 경험을 이해하고 접근성을 개선하도록 돕는다.
  • 플러그인은 디자이너가 육안으로 놓치기 쉬운 접근성 문제를 작업 과정에서 조기에 발견하게 한다.

플러그인이 확장하는 디자인 작업 방식

  • 플러그인은 Figma에 없는 기능을 외부 도구로 보완하는 수준을 넘어, 팀과 개인의 고유한 작업 방식에 맞는 도구를 만들게 한다.
  • 디자이너는 엔지니어링 리소스를 기다리거나 다른 사람이 만든 도구에 의존하지 않고, 필요한 기능을 직접 구현할 수 있다.
  • Figma는 공개 플러그인과 조직 전용 플러그인을 함께 지원해 개인 창작자와 기업 팀 모두를 플랫폼에 참여시켰다.

플러그인은 반복 업무 자동화, 실제 콘텐츠 활용, 접근성 검증처럼 디자인 프로세스의 구체적인 문제를 해결하는 수단이다. Figma를 사용하는 팀이라면 자주 반복되는 작업과 품질 검사를 먼저 찾아보고, 적합한 공개 플러그인을 도입하거나 조직 전용 플러그인으로 직접 자동화하는 것이 효과적이다.