디자인시스템을 개발에서 적용 하는법
엔지니어링데이 2025 네이버 · YouTube
AI 핵심 요약
디자인 토큰과 아이콘을 플랫폼별 코드로 옮기는 반복 작업, 리소스 누락과 네이밍 불일치를 줄이기 위해 Figma 플러그인과 GitHub Actions 기반의 DSAD를 구축했습니다. 플러그인이 Figma API로 스타일·레이어 정보를 추출하고, Style Dictionary와 플랫폼별 커스텀 트랜스포머로 변환한 뒤 각 저장소에 Pull Request를 생성하도록 구성했습니다. Android 벡터 이미지와 WebP는 기존 도구와 변환 결과가 일치하는 경로를 확인해 적용했고, 자체 러너와 문서·위키로 실행 상태와 이슈를 관리했습니다. 그 결과 리소스 관리와 플랫폼 간 네이밍 통일이 수월해졌으며, 안정적인 자동화를 위해서는 디자인 파일의 정리와 디자이너·개발자 간 협의가 중요하다는 점을 확인했습니다.
- Figma 플러그인에서 토큰과 아이콘을 미리 확인한 뒤 게시하도록 하면 변환 결과를 검토하기 쉽습니다.
- 아이콘 추출 범위를 프레임 이름 규칙으로 제한해 일반 컴포넌트가 리소스로 섞이지 않게 했습니다.
- 플랫폼별 커스텀 트랜스포머와 설정 파일을 분리하면 조직의 코드 규칙에 맞춰 변환을 조정할 수 있습니다.
- 변환 라이브러리는 기존 개발 도구와 결과가 같은지 확인해야 하며, 필요하면 Android SDK의 변환 메서드처럼 검증된 경로를 활용할 수 있습니다.
- 디자인 파일의 구조와 네이밍 규칙을 정하려면 디자이너와 개발자의 사전 협의가 필요합니다.
소개
네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2024(5월)에서 발표되었던 세션을 공개합니다. [발표 내용] 피그마와 깃헙을 활용하여 자동화된 디자인 시스템을 구축하는 방법을 소개합니다. [목차] 1. Figma의 디자인 시스템이란 2. 디자인 토큰이란 3. DSAD 구조 •Figma plugin을 통한 디자인 토큰 변환 •Github Action을 통한 코드 변환 4. 사용해보며 느낀점
비슷한 학습 자료
컨퍼런스 당근 밋업
아이콘, 브랜딩 에셋까지 디자인시스템으로 | 2024 당근 테크 밋업
컨퍼런스 당근 밋업
‘디자인시스템’하면 무엇이 떠오르나요? 컴포넌트 제작, 스펙 정의, 문서 작업과 같은 업무들이 떠오르는데요. 이 외에도 당근에는 다양한 문제들이 있었고 이를 해결해 왔어요. 아이콘은 어떤 식으로 관리하고 배포해야 하는지, 브랜딩 에셋은 어떤 식으로 관리할지, 지속 가능한 시스템은 어떻게 구축할지와 같은 문제들이 있었어요. 여러분이라면 이 문제들을 어떻게 해결하시겠어요? 제가 당근에서 이 문제를 해결한 경험을 들려드릴게요. 🥕 영상을 보고 당근에 관심이 생기셨다면 채용 공고를 확인해보세요! https://about.daangn.com/jobs/
프론트엔드 UI/UX
컨퍼런스 엔지니어링데이 2025
디자인시스템이 AI를 만났을 때: FE 개발 패러다임의 변화
컨퍼런스 엔지니어링데이 2025
네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025 에서 발표되었던 세션을 공개합니다. [발표 내용] 네이버파이낸셜 디자인시스템과 AI를 이용하여 마크업 자동화 작업에 대한 소소한 경험을 공유합니다. [발표 대상] AI를 이용한 마크업 등 디자인 작업관련 관심 있으신 모든 분들 [목차] * 오늘 이야기의 키워드 * 知彼知己 - 네이버파이낸셜 디자인시스템 ㄴ디자인 토큰 ㄴ 디자인 시스템 컴포넌트 * 우리를 도와 줄 AI 는? * 百戰不殆 * Let's Try * 마크업 작업을 위한 사전 준비 - 디자인시스템 Code Connect - 디자인시스템 instruction - 이제 FE 개발 시작해도 될 마크업, 하지만 아쉬웠던 점 - 그 외로 힘들었던 점 * 현실 개발에서는 어떻게 해야하는가? * 마크업 직업 개발했더니 어떠니?
프론트엔드 AI 코딩
컨퍼런스 엔지니어링데이 2025
KMP 기반 UI 컴포넌트 통합 전략
컨퍼런스 엔지니어링데이 2025
네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다. [발표 내용] 멀티플랫폼에 대응 가능한 밴드 디자인 시스템의 설계 및 구현 방식에 대해 소개하고, 밴드 안드로이드 팀에서 아이콘 리소스를 자동화하여 관리하는 방법에 대해서 공유합니다. [강의 대상] * 안드로이드 개발자 및 멀티플랫폼에 대한 관심이 있는 분 * 디자인 시스템에 관심이 있는 분 [목차] Episode 1 : 디자인 시스템, 개념에서 실전까지 Episode 2 : KMP, 진짜 실무에 쓸 수 있을까? Episode 3 : BDS 모듈에 KMP 적용하기 Episode 4 : 디자인 시스템 UI 컴포넌트, Maven으로 배포하기 Episode 5 : Figicon으로 아이콘 자동 동기화하기
프론트엔드 모바일 앱 개발
컨퍼런스 엔지니어링데이 2025
DESIGN SYSTEM FOR Android: From Figma to Jetpack Compose
컨퍼런스 엔지니어링데이 2025
네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2024(5월)에서 발표되었던 세션을 공개합니다. Figma와 Jetpack Compose를 사용하여 Android 디자인 시스템을 구축하는 방법을 다룹니다. 디자인 시스템의 중요성과 Figma에서 디자인을 만들고 Jetpack Compose로 구현하는 과정을 설명하고, 이를 통해 디자이너와 개발자가 어떻게 협업할 수 있는지, 그리고 일관성 있는 사용자 경험을 제공하기 위해 디자인 시스템을 어떻게 효과적으로 관리할 수 있는지를 보여줍니다. We'll discuss what design systems are, why they're important, and how we can build them effectively using tools like Jetpack Compose. Demo Material Design figma : https://www.figma.com/file/nVZK2STszk2ehH0xN3kxc...
프론트엔드 모바일 앱 개발 UI/UX
컨퍼런스 우아콘 2025
당연해진 디자인시스템, 그다음 이야기: AST와 MCP로 여는 미래 #우아콘2025 #우아한형제들
컨퍼런스 채널데브톡 2025