010:00 – 4:45
Figma 디자인 시스템과 디자인 토큰
네이버 쇼핑 앱 클라이언트의 박범석 개발자가 류원석 개발자와 함께 '디자인 시스템을 개발에서 적용하는 법'을 발표한다. 먼저 Figma의 디자인 시스템을 설명하는데, 텍스트 스타일·컬러·디멘션 값을 중앙에서 정의하고 여러 파일에서 참조해 일관되게 쓰는 구조다. 컴포넌트는 더 넓은 개념으로 아이콘·토스트 같은 레이어 단위 요소까지 포함한다. 이를 디자인 토큰으로 변환하는데, 색상·글꼴·간격·그림자 같은 시각 속성을 JSON 포맷으로 정의한다. JSON을 택한 이유는 모든 플랫폼에서 쓸 수 있어 어떤 플랫폼으로도 쉽게 변환하기 위함이다. 사내 리포지토리 DSAD의 전체 흐름은, 직접 개발한 Figma 플러그인이 디자인 시스템을 디자인 토큰과 아이콘으로 추출하고, Android·iOS 트랜스포머가 코드로 변환해 각 플랫폼 저장소에 Pull Request를 자동 생성하는 것이다. '퍼블리시'하면 GitHub Actions 러너에 트리거가 걸려 변환 코드가 실행된다.