최근 사내에서 Design System 을 준비하고 있는 과정에서 공부를 하기 시작하였습니다.
Figma 에서 디자인 토큰을 업데이트 하면 iOS, Android, Web 그 밖에 기타 프로그래밍 언어 등등 어느 팀에서 최신 내용의 Design Token 을 일괄 업데이트 할 수 있는 상호운용성까지 챙길 수 있는 방법이 뭐가 있을까 고민하면서 조사를 해봤더니 Figma 의 2가지 플러그인을 발견하였습니다.
이 둘의 차이점은 Design Token 의 JSON 형식 데이터를 동기화 하는 방식이 다릅니다. Figma Tokens 는 JSONBin, Design Tokens 는 Github Repo 를 이용하여 동기화를 하고 있는데 개인적으로는 어떤게 더 편리하고 관리가 유용한지 둘을 다뤄보면서 조금 더 세세하게 다뤄보고 있습니다.
Design Token 데이터 하나만 갖고 있으면, 모든 플랫폼이나 언어가 사용하는 방식으로 스타일을 사용할 수 있도록 만들어진 빌드시스템입니다. 한 곳에서 디자인 토큰을 정의하면 iOS, Android, CSS, JS, HTML, Sketch File, Document 등등 우리가 생각할 수 있는 모든 것으로 파일로 만들어 내보내줄 수 있는 시스템이고 더 놀라운 점은 npm CLI 로도 사용할 수 있다는 점입니다.
상호운용성과 업무 효율을 동시에 챙길 수 있는 빌드 시스템인 것 같아요. 결함이 생기지 않을 정도의 이 빌드 시스템이 성숙한지 확인해보기 위해 세세하게 다뤄보고 있습니다. 이게 왜 필요한지 당위성을 설명하려면 최소한 다뤄보고 데모나 예제가 만들어져야 할테니까요.
액션 아이템 도출하기
업무에 효율적인 디자인 시스템을 구축하기 위해 브랜드 아이덴티티를 정의하고, 디자인 토큰, 파운데이션, 스타일 문서들이 만들어져야 합니다. 이 모든 과정을 진행하려면 기본적인 스타일 문서로서 참고할 수 있는 모든 웹사이트들을 보고 있습니다.
고민은 제쳐두고 액션을 어떻게 실행할지 도출해보면 다음과 같이 정리됩니다.
Figma Plugin 정하기
플러그인, 라이브러리, 도구 조사 및 장단점 분석
Design Token 을 동기화 하여 token.json 파일로 만드는 기능
token.json 파일로 iOS, Android, CSS 등등 다양한 개발 환경에 대응할 수 있는 코드 생성
최근 사내에서 Design System 을 준비하고 있는 과정에서 공부를 하기 시작하였습니다.
Figma 에서 디자인 토큰을 업데이트 하면 iOS, Android, Web 그 밖에 기타 프로그래밍 언어 등등 어느 팀에서 최신 내용의 Design Token 을 일괄 업데이트 할 수 있는 상호운용성까지 챙길 수 있는 방법이 뭐가 있을까 고민하면서 조사를 해봤더니 Figma 의 2가지 플러그인을 발견하였습니다.
Figma Plugins
이 둘의 차이점은 Design Token 의 JSON 형식 데이터를 동기화 하는 방식이 다릅니다. Figma Tokens 는 JSONBin, Design Tokens 는 Github Repo 를 이용하여 동기화를 하고 있는데 개인적으로는 어떤게 더 편리하고 관리가 유용한지 둘을 다뤄보면서 조금 더 세세하게 다뤄보고 있습니다.
여기까지가 서론이고, 진짜 하고 싶은 말은 따로 있는데 Style Dictionary (스타일 사전) 에 대해서 입니다.
Style Dictionary (스타일 사전) 이란?
Design Token 데이터 하나만 갖고 있으면, 모든 플랫폼이나 언어가 사용하는 방식으로 스타일을 사용할 수 있도록 만들어진 빌드시스템입니다. 한 곳에서 디자인 토큰을 정의하면 iOS, Android, CSS, JS, HTML, Sketch File, Document 등등 우리가 생각할 수 있는 모든 것으로 파일로 만들어 내보내줄 수 있는 시스템이고 더 놀라운 점은 npm CLI 로도 사용할 수 있다는 점입니다.
상호운용성과 업무 효율을 동시에 챙길 수 있는 빌드 시스템인 것 같아요. 결함이 생기지 않을 정도의 이 빌드 시스템이 성숙한지 확인해보기 위해 세세하게 다뤄보고 있습니다. 이게 왜 필요한지 당위성을 설명하려면 최소한 다뤄보고 데모나 예제가 만들어져야 할테니까요.
액션 아이템 도출하기
업무에 효율적인 디자인 시스템을 구축하기 위해 브랜드 아이덴티티를 정의하고, 디자인 토큰, 파운데이션, 스타일 문서들이 만들어져야 합니다. 이 모든 과정을 진행하려면 기본적인 스타일 문서로서 참고할 수 있는 모든 웹사이트들을 보고 있습니다.
고민은 제쳐두고 액션을 어떻게 실행할지 도출해보면 다음과 같이 정리됩니다.
이렇게 계획해서 차근차근 실행해서 개인 역량을 길러보려고 합니다.