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 토큰으로 타이포그래피를 만들었을 때 로컬 스타일로 내보내는 방법이 없을까요?
그리고 타이포그래피마다 텍스트 데코레이션을 다양하게 주고 싶을 때 디자인 시스템에서 어떻게 해결할 수 있을까요?
답변 1
1
안녕하세요 markinfo님 :)
질문을 너무 잘 정리해서 적어주셔서 감사합니다.
두가지 방법 다 장단점이 있고 좋은 접근인것 같습니다.
첫 번째 방식은 피그마 네이티브 시스템에 등록할 수 있다는 장점이 있지만, 말씀하신것처럼 굵기에 따라 갯수가 증가한다는 단점이 있죠
보다 깔끔하게 작성하길 원하신다면 데코의 여부에 따라 그룹을 지어서 관리해 보시는걸 추천드립니다.
두 번째 방식의 장점은 첫 번째 방식처럼 많은 종류를 다 만들지 않고 필요한 항목들만 합성해 토큰을 생성 후 사용하기 때문에 보다 관리가 편할 수 있습니다.
단점은 피그마 네이티브 시스템에 등록되지 않는다는 점 인데요 compositionTokens은 토큰 스튜디오에서 자체적으로 제공하는 기능이기 때문에 compositionTokens으로 만든 토큰들은 피그마 네이티브 시스템으로 가져와 사용할 수 없습니다.
개발자의 입장에서 보면 결국 개발할때 필요한 항목들은 토큰 스튜디오에 등록된 compositionTokens의 json으로 가져오므로 크게 문제 없이 사용할 수 있습니다.
유료(pro)를 사용하고 계신다면 compositionTokens을 사용해 관리하는게 더 좋습니다 :)
감사합니다.
borderTransparent를 라이트/다크모드에 이중등록
0
30
2
해결되었습니다.
0
26
1
안녕하세요! 강의잘 들었습니다.
0
80
2
타이포그래피 16 -> 14 변경 시 XXXL만 변경 안 됨
0
49
2
토큰스튜디오에서 폰트 스타일등록 문의
0
66
2
토큰에서 style로 export시 에러
0
74
2
컬러시스템 등록 관련
0
72
2
토큰 light/dark mode 오류
0
69
2
Pretendard 없으면 에러납니다
0
239
2
폰트 토큰 작업 할때
1
100
3
여기 수업에서 엘로우나 레드나 블루 이런 컬러들을 다양하게 만드는 이유가 뭔가요?
0
57
2
토큰을 깃허브에 올리는 방법이 없어진거 같은데요
1
82
2
토큰 export 할때 어떻게 해야 하나요? 버전이 바뀌어서 그런지 못찾겠어요
0
215
2
인프런 할때마다 짜증나는데 수업내용이 너무 오래된건 제발 삭제좀 하던지 다시 찍던지 해주세요
1
80
1
tailwind color generator 이게 작동이 잘 안되네요
0
75
2
figma tokens플러그인 안나오는데요??
0
126
2
혹시 토큰 가공할 수 있는 강의도 따로 있을까요??
1
55
2
피그마 배리어블에 export시 값 저장 안됨
0
208
3
Style - variable 문으ㅣ ㅜㅜ
0
69
2
borderTransparent 임포트가 안됩니다
1
69
2
화면이 보이지가 않아요?
0
67
1
컬러맵핑하고 라이트/다크 모드 설정시 색상 반전이 안돼요 ㅠㅠ
1
271
2
피그마 토큰 플러그인
1
293
2
깃허브 sync 오류
1
193
2