인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

Inflearn Community Q&A

syeoncloe5534's profile image
syeoncloe5534

asked

[UI3 Update] Building a Design System Using Figma Variables

[Practice✨] Register Semantic Variables and Connect to Styles

문의드립니다.

Written on

·

70

0

안녕하세요!

혹시 타이포그래피 베리어블 스타일을 지정했을때 line height를 1.4로 계산해서 지정했는데, 작업하다보니 1.2로 더 줄여야 하는 상황이 생긴다면 디자인 시스템 자체를 바꿔서 1.2로 적용해야하나요? 아니면 해당 작업물만 로컬로 별도 타이포그래피 지정해서 해야할까요?

다른 속성값들보다 Line height는 프로젝트 스타일에 따라 스타일로 정해놨어도 값이 조정이 되어야 할때가 발생해서 이런 경우의수는 어떤식으로 대응하는게 좋을지 의견 여쭤보고싶습니다.

 

베리어블값이 weight나 line height 와 같은 값들을 primitive에 지정해놓고, semantic에서 다양하게 참조해서 쓸 수 있다고 생각해서 확장성이 있는것 같은데, 만약에 로컬 타이포그래피에 베리어블을 참조해놓았고 (heading 4xl는 line height 56이라면) 이 값으로 개발팀에 공유가 됐다면 이후에 line height베리어블 참조값을 50 이렇게 바꿀때 개발팀에 공유를 매번 별도로 해야하는거죠?

 

마지막으로, color는 로컬 스타일을 지워주셨는데 타이포그래피는 로컬에 베리어블을 다 적용하고 로컬 스타일을 지우지 않는 이유가 무엇인가요?

웹-디자인figmafigma-tokens디자인-시스템아토믹-디자인figma-variable프로덕트디자인

Answer 1

0

boldux님의 프로필 이미지
boldux
Instructor

세번째 단락에 대한 답변을 드리면,

 

저의 경우에는 컬러의 경우 베리어블만 필요해서 스타일은 지웠습니다.

타이포그래피의 경우에는 스타일을 바로 UI에 적용하기 때문에 스타일을 무조건 살려두었습니다. 스타일 안에 베리어블이 다 들어가 있습니다.

 

다른 디자인 시스템 찾아보시면, 저의 경우처럼 되어 있는 경우도 있고 아닌 경우도 있습니다. 예를 들어, 머티리얼 디자인 시스템 같은 경우는 색상 스타일이 살아있는데, 이 경우 스타일안에 두개 이상의 베리어블이 사용되기 때문입니다. 첫 섹션에 나왔듯이 스타일은 여러개 베리어블을 담을 수 있지만 베리어블 그 자체는 한가지 색상과 투명도만 다는 다고 제가 언급드렸습니다.

 

이게 익숙하지 않은 개념일 수도 있지만, 혹시 더 궁금하신 부분 있으며 질문 주세요!

감사합니다.

syeoncloe5534's profile image
syeoncloe5534

asked

Ask a question