
[온∙오프라인/마감] COMMIT × Figma: From Idea to Reality
Figma와 구름의 COMMIT 행사에서 AI 기반 제품 개발과 디자인 시스템 자동화 사례를 공유했습니다. 디자인과 개발 사이의 워크플로우를 줄이는 실무 인사이트를 전했습니다.

Figma와 구름의 COMMIT 행사에서 AI 기반 제품 개발과 디자인 시스템 자동화 사례를 공유했습니다. 디자인과 개발 사이의 워크플로우를 줄이는 실무 인사이트를 전했습니다.
![[디자인 시스템 어떻게 만들었어요?(1)] 아이콘 라이브러리 만들기](https://miro.medium.com/v2/resize:fit:1200/1*kCf05hhyLPa7iBp2vBTJAA.png)
요기요는 디자인 시스템 아이콘을 개별 SVG 컴포넌트와 전용 라이브러리로 재구축했습니다. 자동 변환, 접근성, 토큰 연동, 변경 내역 자동화로 운영 효율을 높였습니다.


모노레포 확장으로 생긴 충돌과 복잡도를 줄이기 위해 14개 레포로 분리한 과정을 정리했습니다. 패키지 정리와 체계 재설계로 빌드 성능과 CI 속도를 개선했습니다.


미리디 프로덕트 디자인팀이 제품 간 연결로 고객 경험을 확장하는 방식과 팀의 방향성을 소개했습니다. 글로벌 확장, AI 고도화, 리서치와 협업 체계 강화에 집중하고 있습니다.


피그마 플러그인으로 디자인 토큰과 Tailwind 클래스를 자동 추출해 개발 생산성을 높인 사례를 소개했습니다. 디자인 시스템의 일관성과 지속적인 도구 개선의 중요성도 함께 강조했습니다.

KMP 기반으로 멀티플랫폼 디자인 시스템과 UI 컴포넌트 통합 전략을 다뤘습니다. 아이콘 리소스 자동화 관리와 배포 방식까지 함께 소개했습니다.


디자인 시스템 운영의 비효율을 줄이기 위해 버전 관리, 샘플앱 검수, 이슈 트리아지, 가이드 통합을 정리했습니다. 팀 간 사전 공유와 기록 중심의 프로세스로 시스템 신뢰성과 일관성을 높였습니다.


MFA와 샘플앱으로 iOS 앱을 피처 단위로 분리해 협업 효율과 유지보수성을 높였습니다. 전체 빌드와 불필요한 화면 흐름을 줄여 개발 시간을 크게 단축했습니다.
쿠팡 파트너스
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.


디자인 시스템 운영이 단순한 컴포넌트 관리가 아니라 프로덕트 운영에 가깝다는 점을 짚었습니다. 버전 추적과 가이드 부족, 이슈 처리 부재로 생긴 비효율을 정리했습니다.
시니어 사용자가 금융 앱에서 겪는 공통 오인지 패턴을 UT로 분석해 UX 가이드라인으로 정리했습니다. 버튼, 예시 이미지, 모션, 라이팅, 화면 구조를 시니어 관점에서 점검해야 한다고 제안했습니다.

디자인 토큰을 Figma에서 정의하고 GitHub Actions와 token-transformer로 자동 변환하는 과정을 소개했습니다. 또한 Panda CSS에 맞게 토큰을 재구성해 디자인 시스템에 연결한 흐름을 설명했습니다.

Figma를 중심으로 기획, 디자인, 개발, QA를 실시간으로 연결하는 협업 방식의 장점을 소개했습니다. 과거의 파일 공유와 버전 관리 문제를 줄이고 생산성과 일관성을 높이는 흐름을 설명했습니다.