DESIGN SYSTEM FOR Android: From Figma to Jetpack Compose
엔지니어링데이 2025 네이버 · YouTube
AI 핵심 요약
디자이너와 개발자가 화면마다 값을 확인하고 수정하는 과정은 불일치와 소통 비용을 키우므로, Figma와 Jetpack Compose를 연결하는 Android 디자인 시스템 구축 방법을 소개합니다. 색상·간격·타이포그래피 등의 디자인 토큰을 단일 기준으로 삼고, Compose의 Material 계층을 확장하거나 일부 컴포넌트를 대체하거나 Foundation 위에 자체 시스템을 만드는 선택지를 설명합니다. Figma API에서 토큰을 가져와 데이터 클래스로 매핑하고 Gradle 태스크로 구현 코드를 생성하면, 토큰 변경을 앱에 반영하는 작업을 자동화할 수 있습니다. 데모에서는 기본 색상 토큰을 바꾼 뒤 생성 태스크를 실행해 라이트·다크 테마 색상 파일을 갱신하며, 요구사항에 맞는 계층 선택과 토큰 자동화가 일관성 유지에 중요하다는 점을 보여줍니다.
- 디자인 토큰은 색상·간격·타이포그래피처럼 일관성을 유지할 값을 이름 붙여 관리하는 플랫폼 독립적 변수입니다.
- Compose에서 Material 컴포넌트를 확장하면 빠르게 시작할 수 있지만, 디자인 요구가 달라질수록 커스터마이징에 제약이 생깁니다.
- 일부 컴포넌트만 Material 구현을 대체하거나 Foundation 계층 위에 자체 시스템을 만드는 방식을 요구사항에 맞춰 선택하세요.
- Figma API 응답에 맞춘 데이터 클래스와 Gradle 태스크를 구성하면 토큰 변경을 코드에 반영하는 과정을 자동화할 수 있습니다.
소개
네이버 사내 기술 교류 행사인 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...
비슷한 학습 자료
컨퍼런스 당근 밋업
아이콘, 브랜딩 에셋까지 디자인시스템으로 | 2024 당근 테크 밋업
컨퍼런스 당근 밋업
‘디자인시스템’하면 무엇이 떠오르나요? 컴포넌트 제작, 스펙 정의, 문서 작업과 같은 업무들이 떠오르는데요. 이 외에도 당근에는 다양한 문제들이 있었고 이를 해결해 왔어요. 아이콘은 어떤 식으로 관리하고 배포해야 하는지, 브랜딩 에셋은 어떤 식으로 관리할지, 지속 가능한 시스템은 어떻게 구축할지와 같은 문제들이 있었어요. 여러분이라면 이 문제들을 어떻게 해결하시겠어요? 제가 당근에서 이 문제를 해결한 경험을 들려드릴게요. 🥕 영상을 보고 당근에 관심이 생기셨다면 채용 공고를 확인해보세요! https://about.daangn.com/jobs/
프론트엔드 UI/UX
컨퍼런스 엔지니어링데이 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
디자인시스템을 개발에서 적용 하는법
컨퍼런스 우아콘 2025
Compose Text 통합 진단: 이슈 분석과 디자인시스템 적용 전략 #우아콘2025 #우아한형제들
컨퍼런스 우아콘 2022
Jetpack Compose로 디자인시스템 만들기 #우아콘2022 #Day2_음식그이상의것을문앞으로
컨퍼런스 우아콘 2021