디자인 토큰, 피그마에서 개발까지
디자이너가 연결하기
디자인 토큰 개발 적용기
서비스 디자이너라면 디자인 시스템의 디자인 토큰에 대해 한 번쯤 들어봤을 것이다.
간단히 설명하자면,
디자인 토큰은 컴포넌트의 일관성과 브랜드 아이덴티티를 유지하기 위해 제작되고
이는 컬러, 타이포그래피, 여백 등 UI 디자인 속성의 값을 이름으로 정의하고 이를 코드로 변환해 협업에서
발생하는 혼선을 줄이는 역할을 한다.
피그마에서 구축 후 피그마에서는 사용가능하지만 실제 프로덕트, 개발까지 가는 데에는 한계가 있었다.
비교적 작은 회사에 근무하는 디자이너로서 디자인 토큰을 실무에 적용하는 과정에서 생각보다 많은 공수와 번거로움이 있다는 걸 느꼈고, 이를 해결하기 위해 직접 리서치를 진행하기로 했다.
그러던 중, 한 가지 유용한 피그마 플러그인을 발견하게 되었다.
토큰 스튜디오(Tokens Studio)
주요 기능은 다음과 같은데,
이미 많은 분들이 쓰고 계셔서 사용 방법은 검색으로 쉽게 알 수 있다.설정된 토큰 값을 setting을 통해 [위 이미지 4번] 내보내면. Json 형식으로 업로드가 되는데,
JSON 형식은 보통 중립적인 포맷으로 작성되어서 초반에 언급했듯이 개발 플랫폼마다 스타일을 표현하고
사용하는 방식이 다르기에 서비스의 개발언어와 환경에 맞춰 언어를 바꿔주는 일을 진행해야 한다.
그것을 해주는 것은 바로..
스타일 딕셔너리 (https://amzn.github.io/style-dictionary)스타일 딕셔너리
디자이너에게 생소할 수 있는 개발 도구 node module로서 사용 가능한 방식
..그렇다 여기부터는 개발언어로 진행해야 된다.
하지만 가능성을 디자인팀과 개발자분들에게 보여주기 위해...
개인적으로 디자이너가 이렇게까지 할 필요는 없다고 생각합니다..결과
해당 과정을 팀 내부와 개발자에게 공유하여 디자인 토큰화가 공식적으로 업무가 시작되었고,
그러면서 토큰네이밍(위 사진의 2번)에 대한 정책을 진행하게 되었으며, 실제로 적용된 것을 볼 수 있도록
개발자분께서 스토리북을 세팅해 주셨다.(위 사진의 3번)
마무리하며
규모가 작은 회사에서 디자인 시스템과 토큰의 필요성을 다수가 크게 못 느끼는 상황에 디자이너가
직접 변환 작업을 진행하며 실무 적용 가능성을 보여주는 것은 좋은 기회였던 것 같다.
개발 언어로 변환하는 과정을 직접 경험하며, 디자인 시스템이 개발에 어떻게 적용되는지,
토큰 네이밍을 어떻게 하면 더 효율적으로 작성할 수 있을지에 대한 깊은 이해를 얻게 되었다.
중견기업 이상의 회사에서는 디자이너가 이 과정을 직접 하지 않을 가능성이 크지만, 한 번쯤 경험해 보는 것을 추천한다. 그 이유는 시스템에 대한 이해를 높이는 데 큰 도움이 될 뿐 아니라, 디자인과 개발 간의 협업에도 긍정적인 영향을 미칠 수 있을 것이라 생각!
그리고 최근..
피그마에서 재플린 플로그인을 통해 재플린 스타일가이드에 토큰 값을 받고 변환까지 하는 방식을
알게 되었다. 스토리북과 같이 컬러의 값들을 볼 수 있었고 무엇보다 UI 컴포넌트를 실제로 볼 수 있었다.
1개 이상의 가이드일 경우 금액을 지불해야 되지만 토큰 스튜디오보다 월 2만 원 정도 저렴..
(3개 스타일 가이드를 만들경우)
물론 피그마에서 토큰스튜디오를 통해 깃허브를 연결해 주면 직접 세팅해서 깃허브 송출과 동시에 자동으로 싱크 될 수 있도록 할 수 있어 관리에 효율적인 것은 분명하다.
재플린 api를 통해 해당 부분을 진행할 수 있는 방법을 찾고 있으며 가능하게 된다면 위처럼 번거로움 없이 디자이너분들이 손쉽게 토큰 적용을 할 수 있을 것 같다.
> 250114 update 재플린의 경우 효과 값을 포함해 그라디언트 값 지정이 불가한 것을 확인했고 이전처럼 토큰 스튜디오를 사용하기로 결정되었습니다!
