figma

플러그인으로 사용자와 팀 (새 탭에서 열림)

Figma 플러그인은 반복적이고 팀별로 특수한 작업을 자동화해 디자이너의 생산성과 협업 품질을 높일 수 있다. 공개 플러그인을 사용하는 것만으로 해결되지 않는 문제라면, 제품·컴포넌트·스타일에 맞춘 맞춤형 플러그인을 직접 만드는 것이 효과적이다. GitHub, Atlassian, Uber의 사례는 작은 유틸리티에서 출발해 팀 전체의 통합 도구로 발전시키는 방법을 보여준다.

반복 작업을 줄이는 맞춤형 플러그인

  • 공개 플러그인이 400개 이상 제공되더라도 특정 조직의 컴포넌트나 디자인 시스템에 맞는 기능은 직접 만들어야 할 수 있다.
  • 플러그인 개발의 좋은 출발점은 반복적이고 번거로우며 실수하기 쉬운 작업을 발견하는 것이다.
  • 처음에는 작은 유틸리티로 시작한 뒤, 팀의 여러 요구를 하나의 플러그인으로 통합할 수 있다.

GitHub: 컴포넌트 관리와 테마 전환 자동화

레이어 테두리 제어

  • GitHub는 다양한 위치와 크기의 구분선을 하나의 리스트 아이템 컴포넌트 안에서 관리했다.
  • 여러 변형 컴포넌트를 따로 유지하는 대신, 플러그인이 필요한 레이어 조합의 표시 여부를 자동으로 전환했다.
  • 그 결과 컴포넌트 수와 유지보수 부담을 줄일 수 있었다.

색상 테마 관리

  • 모바일 앱에서 라이트 테마, 다크 테마, 고대비 모드를 지원하기 위해 네 가지 색상 세트를 관리해야 했다.
  • 플러그인은 기능적 이름으로 지정된 스타일을 검색하고 관리하도록 도왔다.
  • 전체 디자인을 몇 번의 클릭만으로 다른 테마로 전환할 수 있게 했다.

실제 데이터 삽입

  • 정확한 목업과 디자인 스트레스 테스트를 위해 API에서 실제 데이터를 가져오는 데이터 채우기 플러그인을 만들었다.
  • 무작위 데이터 샘플을 가져와 아바타, 사용자명, 이름 등을 컴포넌트의 레이어 이름에 맞춰 자동 매핑했다.
  • 이후 테두리, 테마, 데이터 삽입 기능을 하나의 ‘모노 플러그인’으로 통합해 팀원들이 단일 UI에서 여러 기능을 사용할 수 있게 했다.

Atlassian: 제품에 맞는 콘텐츠와 가상 사용자 이미지

  • 일반적인 더미 텍스트가 아니라 제품별로 서로 연결된 데이터를 생성하기 위해 ADG Data Generator를 개발했다.
  • Jira에서는 프로젝트명과 티켓 번호, Bitbucket에서는 브랜치명과 커밋 메시지처럼 작업 중인 제품에 맞는 콘텐츠를 제공했다.
  • 실제 인물 사진 대신 실제로 존재하지 않는 사람을 표현하는 AI 생성 이미지를 사용해 개인정보나 이미지 라이선스 문제를 줄였다.
  • Atlassian은 이 플러그인의 소스 코드를 공개해 유사한 도구를 만들려는 커뮤니티가 참고할 수 있도록 했다.

Uber: 협업과 디자인 검증 지원

  • Uber에서는 여러 플러그인을 만들어 협업을 강화하고 디자인 불일치를 줄이며 작업 속도를 높였다.
  • 모바일 디자인 리뷰를 위해 선택한 Figma 프레임을 URL과 QR 코드로 기기에 미러링하는 플러그인을 개발했다.
  • 리뷰 참가자들이 대형 화면을 함께 보는 대신 각자의 스마트폰에서 디자인을 직접 확인할 수 있어, 실제 사용 환경에 가까운 피드백을 제공할 수 있었다.
  • Uber 사례는 플러그인이 단순한 제작 자동화뿐 아니라 디자인 크리틱과 협업 방식 자체도 개선할 수 있음을 보여준다.

플러그인 개발 기회를 찾는 방법

  • 자주 반복하는 수작업을 목록으로 만들고, 클릭·검색·레이어 전환이 많은 작업부터 자동화한다.
  • 팀의 제품 데이터나 디자인 시스템처럼 일반 플러그인이 알기 어려운 내부 맥락을 활용한다.
  • 하나의 거대한 도구를 처음부터 만들기보다 작은 기능을 검증한 후 관련 기능을 통합한다.
  • 팀 전체가 사용할 경우 설치와 실행 과정을 단순화하고, 하나의 통합 UI로 제공하는 것이 좋다.

실무에서는 “반복적으로 시간을 빼앗기지만 규칙이 명확한 작업”부터 플러그인화하는 것이 가장 효율적이다. 특히 테마 전환, 콘텐츠 생성, 컴포넌트 상태 변경, 실제 기기 검토처럼 오류가 발생하기 쉬운 작업이 좋은 대상이다.