Figma에서 디자인 시스템을 구축 (새 탭에서 열림)

Figma의 디자인 시스템은 팀의 규모나 목적에 따라 다양한 방식으로 구축할 수 있으며, 공통 컴포넌트와 라이브러리를 활용하면 디자인 일관성과 협업 효율을 높일 수 있다. 이 글은 Figma가 제공하는 기능과 실제 사용자 사례를 통해 디자인 시스템을 어디서 시작하고 어떻게 확장할지 보여준다. 핵심은 작은 단위에서 출발해 컴포넌트, 중첩 구조, 팀 라이브러리 등을 점진적으로 발전시키는 것이다.

Figma가 디자인 시스템을 지원하는 방식

• Figma는 디자인 시스템을 구축하는 사용자를 지원하기 위해 Constraints, Team Library, Components 같은 기능을 발전시키고 있다.
• 디자인 시스템은 단순한 UI 키트가 아니라 팀 내 디자이너, 개발자, 제품 관리자 간의 공통 언어로 활용될 수 있다.
• Microsoft처럼 매우 복잡한 중첩 컴포넌트와 제약 조건을 활용하는 사례도 있으며, Figma는 사용자가 제품의 한계를 확장하는 다양한 방식을 공유하고자 했다.
• 글에 소개된 사례들은 Figma가 비용을 지급하거나 후원한 콘텐츠가 아니라, 실제 사용자들이 작성한 경험 공유다.

작은 구성 요소부터 시작하기 — Gusto

• Gusto는 급여·인사 관리 서비스를 제공하는 기업으로, 디자인 시스템을 처음 시작할 때의 막막함을 단순한 구성 요소로 해결했다.
• 처음부터 완성된 시스템을 만들기보다, 재사용 가능한 기본 요소를 정의하는 방식으로 출발했다.
• 디자인 시스템 구축의 첫 단계에서는 다음과 같은 작업이 유용하다.
  • 반복적으로 사용되는 UI 요소 찾기
  • 기본 컴포넌트와 패턴 정리
  • 프로젝트와 자산을 체계적으로 분류
  • 팀이 실제로 자주 사용하는 요소부터 우선순위화

마케팅·커뮤니케이션 자산 관리 — Square

• Square의 마케팅 팀은 제품 UI뿐 아니라 커뮤니케이션 디자인을 위한 내부 디자인 시스템을 구축했다.
• 시스템에는 다음과 같은 자산이 포함된다.
  • 색상 팔레트
  • 로고 세트
  • 마케팅 및 브랜드 관련 그래픽 자산
• 디자인 시스템을 제품 화면에만 한정하지 않고, 마케팅과 브랜드 업무에도 적용하면 여러 팀이 동일한 시각적 기준을 사용할 수 있다.
• Figma 안에서 자산을 공유하면 최신 버전을 쉽게 찾고, 중복 제작이나 오래된 로고 사용을 줄일 수 있다.

비디자이너의 참여를 돕기 — Virta Health

• Virta Health는 당뇨병 치료 서비스를 제공하는 기업으로, 디자인 시스템을 통해 디자이너가 아닌 구성원도 디자인 작업에 참여할 수 있도록 했다.
• 구축 과정은 다음 단계로 진행됐다.
  • 기존 컴포넌트와 화면을 감사
  • 반복되는 패턴과 문제점 파악
  • 재사용 가능한 컴포넌트 제작
  • 컴포넌트를 활용한 최종 목업 구성
• 비디자이너는 컴포넌트를 드래그 앤 드롭해 아이디어를 시각화할 수 있다.
• 그 결과 엔지니어와 제품 관리자가 디자인 개념을 더 쉽게 이해하고, 아이디어를 논의하는 방식도 개선됐다.
• 디자인 시스템은 제작 속도뿐 아니라 직군 간 커뮤니케이션을 개선하는 도구로도 기능한다.

중첩 컴포넌트로 유연성 높이기 — OpenText

• OpenText는 중첩 컴포넌트를 사용해 더 강력하고 유연한 디자인 시스템을 구축했다.
• 하나의 컴포넌트 안에 다른 컴포넌트를 조합하면 복잡한 UI 패턴도 일관되게 관리할 수 있다.
• 대표적인 활용 예시는 다음과 같다.
  • 버튼 내부에 아이콘 컴포넌트 배치
  • 버튼의 기본·호버·비활성 상태 구성
  • 여러 요소를 조합한 복합 UI 패턴 제작
• 하위 컴포넌트를 수정하면 이를 사용하는 상위 컴포넌트에도 변경 사항을 반영할 수 있어 유지보수가 쉬워진다.
• 다만 중첩 구조가 지나치게 복잡해지면 관리가 어려워질 수 있으므로, 컴포넌트의 책임과 조합 규칙을 명확히 해야 한다.

원자적 디자인 구조 적용하기 — SetProduct.com

• SetProduct.com은 Atomic Design 원칙을 디자인 시스템의 기반으로 사용했다.
• 디자인 요소를 작은 단위에서 큰 단위로 확장한다.
  • 원자: 텍스트, 아이콘, 색상 등
  • 분자: 버튼처럼 여러 원자가 결합된 요소
  • 유기체: 카드나 복합 UI 블록
  • 템플릿·페이지: 여러 블록이 조합된 화면과 전체 레이아웃
• 이 접근 방식은 디자인 요소 간의 관계를 체계적으로 정리하고, 재사용성을 높이는 데 도움이 된다.
• 작은 단위의 변경이 더 큰 화면에 일관되게 적용되므로, 대규모 UI를 관리하기에 적합하다.

실무 적용을 위한 접근법

• 처음부터 모든 화면과 컴포넌트를 표준화하려 하지 말고, 반복 사용 빈도가 높은 요소부터 시작한다.
• 컴포넌트와 스타일을 팀 라이브러리로 공유해 모든 구성원이 동일한 자산을 사용하도록 한다.
• 중첩 컴포넌트와 제약 조건은 반응형 화면과 복잡한 상태를 표현할 때 활용한다.
• 디자인 시스템을 디자이너만의 도구로 만들지 말고 개발자와 제품 관리자도 쉽게 사용할 수 있게 구성한다.
• 시스템을 한 번 완성하는 프로젝트로 보기보다, 실제 사용 데이터를 바탕으로 계속 개선하는 공용 기반으로 운영하는 것이 좋다.