techlist.io
KREN
figma

Figma에서 디자인 시스템 워 (새 탭에서 열림)

figmadesign-systemsdesign-tokenscsstypographycomponent-librarywcagcolor-palettes

Figma의 디자인 시스템 구축은 색상·타이포그래피·간격·문서화·개발 전달을 반복해야 해 시간이 많이 걸리지만, 최신 기능과 커뮤니티 플러그인을 조합하면 작업을 크게 단축할 수 있다. 특히 모드와 컬렉션을 안전하게 재정렬하고, 변수·스타일·컴포넌트 관리를 자동화함으로써 디자인 시스템을 개념 설계부터 코드 변환까지 효율적으로 연결하는 것이 글의 핵심이다.

모드와 컬렉션을 안전하게 재정렬

  • 라이브러리의 모드와 컬렉션을 드래그 앤 드롭으로 재배치할 수 있다.
  • 삭제 후 재생성할 필요가 없어 디자인이 다른 모드와 동기화되지 않는 문제를 줄인다.
  • 재정렬해도 모드 ID와 연결 정보가 유지된다.
  • 기본 모드도 간단히 변경할 수 있다.
  • 자주 사용하는 컬렉션을 위로 올리거나, 관련 모드를 그룹화하거나, 제품 라인 변경에 활용할 수 있다.

작업 흐름을 개선하는 9가지 업데이트

  • 메인 컴포넌트로 바로 이동하는 단축키가 추가됐다.
  • 스타일을 복제하거나 복사해 반복 작업을 줄일 수 있다.
  • 변수 페인트를 숨기거나 다시 표시해 작업 공간을 정리할 수 있다.
  • 컴포넌트 설명 UI가 개선되어 내용을 빠르게 확인할 수 있다.
  • 변수 모달의 헤더 전체를 드래그할 수 있다.
  • 변수 변경 사항이 자동 저장된다.
  • 컴포넌트 이름에 마우스를 올리면 툴팁으로 추가 정보를 볼 수 있다.
  • 편집 버튼 정렬이 개선됐다.
  • 스타일 창에서 긴 이름이 잘리지 않도록 텍스트 오버플로 처리가 개선됐다.

색상 팔레트와 색상 토큰 만들기

  • CSS color-mix()
    • CSS의 color-mix()를 활용해 색상 팔레트와 그라디언트를 생성한다.
  • Colorbox
    • 전체 색상 램프를 빠르게 만든다.
  • The Genome Color Tool
    • WCAG 접근성 기준을 만족하는 색상 스케일을 구축한다.
  • 색상 시스템을 수작업으로 하나씩 조정하는 대신, 다양한 명도 단계와 조합을 빠르게 실험할 수 있다.
  • 접근성 기준을 초기 단계부터 반영해 후속 수정 비용을 줄일 수 있다.

타이포그래피와 변수 문서화

  • Peppercorn
    • 디자인 시스템 전체의 타입 시스템을 설정하는 데 사용된다.
  • Print Variables
    • 변수 컬렉션을 스티커 시트 형태로 캔버스에 출력한다.
  • Auto Documentation
    • 모든 변수를 시각적인 스티커 시트로 만들어 문서화한다.
  • Variables and Styles List
    • 변수와 스타일 목록을 캔버스 위젯으로 생성해 팀이 한눈에 확인하도록 돕는다.
  • 이러한 도구는 색상, 글꼴, 크기, 간격 등 토큰의 이름과 값을 시각적으로 검토하는 데 유용하다.

컴포넌트 구조와 스펙 정리

  • Propstar
    • 컴포넌트의 프로퍼티와 가능한 변형 조합을 시각적으로 정리한다.
  • Specs
    • 컴포넌트 사양을 생성해 디자인 의도와 구현 정보를 전달한다.
  • Similayer
    • 특정 레이어나 속성을 기준으로 요소를 필터링한다.
  • Style Finder
    • 여러 페이지에 흩어진 스타일을 찾아 관리할 수 있게 한다.
  • 컴포넌트 변형이 많아질수록 어떤 조합을 지원하는지 파악하고 중복 또는 누락을 발견하는 데 도움이 된다.

변수와 디자인 토큰을 코드로 연결

  • CTRL Var
    • 변수를 일괄적으로 이름 변경할 수 있다.
  • Export Import Variables
    • Figma 안팎으로 변수를 가져오고 내보낸다.
  • Handoff
    • CSS 변수를 즉시 복사해 개발 전달을 단순화한다.
  • Variables Converter
    • Figma 변수를 코드 형식으로 변환한다.
  • Shaper
    • 토큰 아키텍처를 관리하고 CSS 코드를 생성한다.
  • 디자인 토큰을 Figma에만 고립시키지 않고 개발 환경의 변수와 연결할 수 있다.

디자인 시스템 구축 단계별 접근

  • 기초 설계
    • 색상 팔레트, 색상 램프, 타이포그래피 스케일, 변수 컬렉션을 구성한다.
  • 문서화
    • 변수와 스타일을 스티커 시트나 목록으로 정리해 팀이 쉽게 탐색하도록 만든다.
  • 구현과 핸드오프
    • 컴포넌트 사양을 생성하고, 변수와 토큰을 CSS 등 코드로 변환한다.
  • Figma의 기본 기능과 플러그인을 각 단계에 맞게 조합하면 디자인 시스템을 처음부터 코드 전달까지 일관되게 관리할 수 있다.

실무에서는 먼저 모드·컬렉션 구조와 변수 명명 규칙을 정한 뒤, 색상·타이포그래피 플러그인으로 토큰을 만들고, 문서화 및 코드 변환 도구를 선택적으로 도입하는 방식이 효과적이다.