쏘카 디자인 시스템 2.0 개발기 1편: 시스템으로 굴리기(웹)

쏘카 디자인 시스템 2.0 구축 1편으로, Figma 설계 구조와 코드 컴포넌트를 Figma Code Connect로 연결해 디자이너-개발자 핸드오프 마찰을 없애는 방법을 다룬다. Figma Plugin 개발과 코드-디자인 동기화 파이프라인 설계가 핵심이다.

핵심 포인트

Figma Code Connect로 Figma 컴포넌트와 React 코드를 1:1 매핑해 Dev Mode에서 바로 실 코드 스니펫 표시
사내 Figma Plugin을 직접 개발해 디자이너가 토큰 변수를 Figma 컴포넌트에 적용하는 반복 작업 자동화
디자인 토큰을 Figma 변수 → Style Dictionary → CSS/JS 토큰으로 단방향 파이프라인화해 드리프트 방지
컴포넌트 설계 원칙: Primitive → Composite → Pattern 3계층 구조로 재사용성과 유연성 확보
시스템 거버넌스: 컴포넌트 추가 요청을 RFC 문서 → 디자이너·개발자 공동 리뷰 → Figma 확정 → 코드 구현 순서로 처리

상세 정리

2.0 전환 배경: 1.0 시스템은 Figma와 코드가 별개로 진화해 항상 불일치 상태, 핸드오프마다 구두 재조율 필요
Figma 구조 재설계: 컴포넌트 페이지를 `Primitives / Composites / Patterns / Deprecated` 4섹션으로 정리
Figma Code Connect 설정 파일 작성: `figma.config.ts`에서 Figma 노드 ID ↔ React 컴포넌트 경로 매핑
Props 매핑 전략: Figma 배리언트 속성명을 React Props명과 일치시켜 Code Connect 자동 매핑 활용
Figma Plugin 개발: Figma Plugin API로 선택된 레이어에 토큰 변수를 일괄 적용하는 UI 플러그인 제작
Style Dictionary 파이프라인: `tokens.json` → `sd transform` → `variables.css` + `tokens.ts` 동시 생성
토큰 네이밍 컨벤션: `{category}/{type}/{variant}/{state}` 4단계 계층 구조 (예: `color/background/primary/hover`)
컴포넌트 리뷰 프로세스: GitHub에서 Figma 링크 + 코드 PR을 동시에 올려 디자이너·개발자 단일 리뷰 스레드 운영
도입 효과: 핸드오프 재조율 미팅 주 3회 → 격주 1회로 감소, 토큰 불일치 버그 보고 80% 감소

왜 읽나Figma와 코드가 항상 따로 노는 디자인 시스템의 근본 문제를 Code Connect와 Style Dictionary 파이프라인으로 해결하는 실전 설계를 담았다. Figma Plugin 직접 제작 과정도 포함되어 있어 사내 툴링을 고민하는 팀에게 참고가 된다.

쏘카 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

쏘카 디자인 시스템 2.0 개발기 1편: 시스템으로 굴리기(웹)

이 글과 비슷한

Chat SDK의 Discord Components V2 지원 추가

Flags SDK, 플래그 평가 속도 10배 개선

AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기