∙
Note
Figma 신규 기능 발표
Figma에서 주최하는 오프라인 세션 Design Systems with Figma: Seoul에 당첨되어 직접 참석할 수 있는 기회를 얻었다. 평소 디자인 시스템에 관심이 많았던 터라 당첨 소식을 받았을 때 꽤 반가웠다. 행사장에 도착하니 생각보다 많은 디자이너들이 자리를 가득 채우고 있었고, 현장의 열기만으로도 이 주제에 대한 업계의 관심을 실감할 수 있었다.
이번 세션은 크게 두 가지 흐름으로 구성되어 있었다. 첫 번째는 Figma에서 새롭게 선보이는 신규 기능들에 대한 소개였고, 두 번째는 현대자동차와 듀오톤 에이전시 등 실제 현업에서 디자인 시스템을 어떻게 구축하고 운영하고 있는지에 대한 사례 발표였다. 기능 소개에서 끝나는 것이 아니라 실제 조직에서의 고민과 해결 과정을 함께 들을 수 있다는 점이 특히 좋았다.
아래는 세션에서 공유된 내용을 정리한 노트다.
Extended Collections
다양한 브랜드의 디자인 시스템을 관리하는 새로운 방법 소개
부모 디자인 시스템에 연결되어 변화와 색상 확장을 자동으로 반영
브랜드와 테마를 분리하여 관리 가능
Variable Modes 확장
프로페셔널 플랜: 4개 모드에서 10개 모드로 확장
조직 플랜: 20개 모드 지원
대규모 팀의 복잡한 디자인 시스템 요구사항 수용
Slots 기능
컴포넌트 내에서 유연한 콘텐츠 배치 가능
슬롯은 컴포넌트 내부에 있는 자리 표시자 컨테이너로, 컴포넌트 인스턴스를 분리하지 않고도 추가 편집 및 사용자 정의할 수 있게된다. 이를 통해 디자인 유연성을 높이고 코드 일관성을 유지할 수 있습니다. 또한 슬롯이 허용하는 인스턴스를 지정하여 디자인 시스템과의 일관성을 보장할 수 있다.
다양한 상황에 대응할 수 있는 컴포넌트 설계 지원
Check Designs (디자인 린터)
디자인 시스템 준수 여부를 자동으로 검사하는 기능
하드코딩된 값을 베리어블로 자동 변환 제안
텍스트 대비(contrast) 문제 자동 감지
AI와 MCP 서버에 더 정확한 컨텍스트 제공
AI 및 코드 통합
Code Connect
디자인 컴포넌트와 코드 컴포넌트를 매핑
CLI 방식에서 웹 UI로 확장
MCP 서버와 연동하여 AI가 더 정확한 코드 생성 가능
MCP (Model Context Protocol)
Figma 파일의 디자인 데이터를 AI 모델에 제공
AI 코딩 도구가 디자인 시스템을 참조하여 코드 생성
Figma Make Kits
디자인 시스템을 Figma Make에 직접 적용
React 코드, CSS 파일, 스타일, variables 포함
NPM 패키지를 직접 입력하여 private 패키지나 popular design systems (Github Primer, Uber Base UI 등) 활용 가능
실습 데모 (단군소프트 이주환 매니저)
Slots 활용 사례
채팅창 컴포넌트에서 버블 개수를 유연하게 조정
기존 방식: 개수별로 별도 컴포넌트 생성 필요
Slots 적용 후: 하나의 컴포넌트로 다양한 상황 대응 가능
웹앱의 사이드 네비게이션과 콘텐츠 영역 분리 관리에 활용
Code Connect 연동
버블 컴포넌트에 코드 매핑 완료
개발 모드에서 검증된 코드 베이스 URL과 React 설정값 확인 가능
Slots와 결합하여 복합 컴포넌트에도 자동 적용
Check Designs 실습
베리어블 범위(scope) 사전 설정으로 정확도 향상
로우 데이터로 작성된 디자인을 베리어블로 자동 변환
머신러닝 기반으로 사용할수록 정교한 추천 제공
AI 워크플로우(Figma Make)와 결합하여 프로토타입에도 디자인 시스템 자동 적용
현대자동차 디자인 시스템 플랫폼 (유아란 그룹장, 한솔지 디자이너)
배경 및 과제
3개 브랜드(현대, 기아, 제네시스) 운영
32개국 글로벌 서비스
5명의 디자이너로 3개 브랜드 관리
기존: 48개의 디자인 파일, 약 5천 개의 스크린 관리
기존 시스템의 문제점
하나의 수정사항이 최소 6번의 반복 작업 발생
브랜드별 시차 발생으로 운영 분산
유럽 접근성 법(EAA) 대응 시 전수 검사 필요
협업 마찰 증가
디자인 시스템 플랫폼 구축
3개 디자인 시스템을 하나의 플랫폼 파일로 통합
베리어블을 활용한 6개 모드(3브랜드 × 2테마) 통합
기존 라이브러리는 유지하면서 스크린 파일만 통합
하나의 스크린에서 모드 전환으로 6가지 버전 확인 가능
효과
반복 작업 제거, 창의적 작업에 집중
개발팀: 최신 버전 파일 확인 용이
PM/QA: 가장 최신 버전을 함께 확인 가능
EAA 테스트 모드 추가로 전수 검사 효율화
자동화 시도
바이브 코딩으로 컬러 토큰 자동 적용 플러그인 개발
MCP를 활용한 디자인 QA 자동화 시도 중
듀오톤 에이전시 사례 (서윤지 디자이너)
디자인 시스템의 본질
단순한 컴포넌트 모음이 아닌 유기적 운영 체계
규칙의 존재보다 "같은 기준으로 해석하고 적용"하는 것이 핵심
파편화 문제
조직 규모 확대 시 해석의 차이 급증
신규 디자인 제작 시 시스템 이탈이 더 많이 발생
두 가지 주요 원인
유연한 기본 요소 부족
시간적 제약 (디테치가 더 빠름)
해결 방안: 네거티브/포지티브 규제 개념 도입
법 규제 시스템에서 힌트 획득
포지티브(Positive) 규제 ("허용된 것 외 모두 금지"): 법률·정책상 허용되는 행위를 구체적으로 나열하고, 나머지는 모두 금지하는 방식. 특징: 보수적, 과거 기득권 보호, 신산업 도입 지연
네거티브(Negative) 규제 ("금지된 것 외 모두 허용"): 원칙적으로 자유를 허용하되, 법률·정책상 금지된 행위만 나열하는 방식. 특징: 혁신 촉진, 신산업 창출에 유리
절대적 부분은 통제, 창의가 필요한 부분은 자유 제공
라이브러리 이원화 구조
Core 라이브러리: 타협 불가능한 브랜드/서비스 규칙
5단계 토큰 체계 (Primitive → Semantic (Simplify + Granular))
고정값이 아닌 선택 가능한 옵션 제공
UI 라이브러리: 재사용 가능한 컴포넌트 및 패턴
Slots와 그리드 기반 확장 방식 적용
Detach 없이 수정 가능한 구조
자동화 영역 분리
작업자 판단 필요 영역 vs 시스템 자동 처리 영역 구분
멀티 디바이스 대응: 한 벌의 디자인으로 다른 뷰포트 자동 최적화
패널 토크
디자인 시스템을 한 문장으로 정의
송병영 (듀오톤): "시각 언어"
유아란 (현대차): "조직의 일하는 방식과 언어"
김지영 (여기어때): "합리적인 의사결정 스택을 공유하는 기준"
성숙한 디자인 시스템의 기준
유아란: 목표와 목적에 부합하고, 잘 운영되며, 다음 단계를 파악하는 시스템
김지영: 고민 시간을 줄이고, 조직 전체가 기여할 수 있으며, 의식하지 않아도 자연스럽게 시스템에 기대는 구조
송병영: 잘 지켜지는 시스템, 준수율과 재사용률로 검증하는 시스템