composition tokens에 대한 질문입니다

안녕하세요.

피그마 토큰을 사용하여 디자인 토큰을 만들다 궁금한 점이 있습니다.

만약, 폰트 크기가 16px이고 폰트 굵기가 regular 인 타이포그래피를 body.md 라고 정의한다고 했을 때 body.md에 텍스트 데코레이션으로 밑줄(underline)을 주고자 할 때 토큰을 어떻게 설정할 수 있을까요?

처음에 생각했던 방법은 아래와 같습니다.

body.md.default (font-size: 16, font-weight: regular)
body.md.underline (font-size: 16, font-weight: regular, text-decoration: underline)

이렇게 했을 경우, 피그마 토큰에서 텍스트 데코레이션 여부에 따라 토큰을 만들어서 피그마에 로컬 스타일로 내보낼 수 있지만, 같은 폰트 크기와 굵기를 사용하는 경우 수많은 토큰이 생성되는 문제가 있습니다 (body.sm.default / body.sm.underline / body.sm.line-through 등)

제가 원하는 방향은 조금 더 깔끔한 디자인 시스템을 만드는 것입니다. (body.sm / body.md / body.lg 등)

그래서 찾은 방법은 pro 요금제에서 지원하는 composition tokens을 활용해봤습니다.

composition tokens에서 typography.test 토큰을 만들어서 body.md(font-size: 16, font-weight: regular) + text.decoration(underline) 두개의 토큰을 속성으로 추가했습니다.

문제는 composition tokens 으로 만든 토큰을 피그마 로컬로 내보냈을 때(creat styles) 로컬 토큰에 test 토큰이 생성되지 않는 문제가 생겼습니다.

composition 토큰으로 타이포그래피를 만들었을 때 로컬 스타일로 내보내는 방법이 없을까요?

그리고 타이포그래피마다 텍스트 데코레이션을 다양하게 주고 싶을 때 디자인 시스템에서 어떻게 해결할 수 있을까요?

안녕하세요 markinfo님 :)

질문을 너무 잘 정리해서 적어주셔서 감사합니다.

두가지 방법 다 장단점이 있고 좋은 접근인것 같습니다.

첫 번째 방식은 피그마 네이티브 시스템에 등록할 수 있다는 장점이 있지만, 말씀하신것처럼 굵기에 따라 갯수가 증가한다는 단점이 있죠

보다 깔끔하게 작성하길 원하신다면 데코의 여부에 따라 그룹을 지어서 관리해 보시는걸 추천드립니다.

두 번째 방식의 장점은 첫 번째 방식처럼 많은 종류를 다 만들지 않고 필요한 항목들만 합성해 토큰을 생성 후 사용하기 때문에 보다 관리가 편할 수 있습니다.

단점은 피그마 네이티브 시스템에 등록되지 않는다는 점 인데요 compositionTokens은 토큰 스튜디오에서 자체적으로 제공하는 기능이기 때문에 compositionTokens으로 만든 토큰들은 피그마 네이티브 시스템으로 가져와 사용할 수 없습니다.

개발자의 입장에서 보면 결국 개발할때 필요한 항목들은 토큰 스튜디오에 등록된 compositionTokens의 json으로 가져오므로 크게 문제 없이 사용할 수 있습니다.

유료(pro)를 사용하고 계신다면 compositionTokens을 사용해 관리하는게 더 좋습니다 :)

감사합니다.

인프런 커뮤니티 질문&답변