composition tokens에 대한 질문입니다
해결됨
디자인 시스템 with 피그마
안녕하세요. 피그마 토큰을 사용하여 디자인 토큰을 만들다 궁금한 점이 있습니다. 만약, 폰트 크기가 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 토큰으로 타이포그래피를 만들었을 때 로컬 스타일로 내보내는 방법이 없을까요? 그리고 타이포그래피마다 텍스트 데코레이션을 다양하게 주고 싶을 때 디자인 시스템에서 어떻게 해결할 수 있을까요?
- figma-tokens
- figma
- 디자인 시스템
- 디자인-시스템
- composition-tokens
- figma-tokens
- pro
- 아토믹-디자인