inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

[이론📖] 타이포그래피 배리어블 
구조, 구성 짜보기

local variables vs local styles

해결된 질문

513

klj00700

작성한 질문수 2

0

안녕하세요. 디자인 토큰을 만들기 시작한 프로덕트 신입 디자이너입니다!

 

색상은 local variables에서 만들었는데 타이포는 local styles에서 만드는 이유가 있을까요?

아니면 그것또한 토큰을 만드는 방법인가요?

토큰과 관련해서 너무 초보라.. 이해부탁드립니다!

 

감사합니다.

 

웹-디자인 figma figma-tokens 디자인-시스템 아토믹-디자인 figma-variable

답변 1

0

볼드 UX

안녕하세요!

 

저의 주 강의 대상이 토큰, 베리어블에 대한 지식이 전무한 분들이기 때문에 언제든지 질문 주셔도 됩니다!

강의가 만들어진게 작년 11월인데, 그때는 색상만 베리어블이 적용되었습니다. 4월에 이제 타이포 베리어블이 적용 가능한 업데이트가 되었는데, 이 부분에 대해서는 아직 강의가 업데이트 안되었습니다! 곧 6월 중으로 할 예정입니다.

 

하지반 업데이트가 안된 현재 강의로 진행하시는데, 큰 어려움이 없을 것입니다. 왜냐하면 피그마에서 스타일도 여전히 쓰도록 하고 있으며, 이것은 복합 토큰(즉, 여러 베리어블이 합쳐진 토큰)으로 사용될 예정입니다.

 

스타일 중 그라디언트도 없어지는게 각각 색의 조합익에 기본 베리어블을 가지고 옵니다.

타이포그래피도 여전히 우리가 쓰는 H1, Body는 그대로 스타일에 사용 되어지고 이 안에 세부적인 weight, font family 등을 기본 베리어블로 사용되어 집니다.

 

이해가 안되시거나 더 궁금하신 부분 있으면 알려주세요!

 

0

MATH POST

안녕하세요! 혹시 업데이트 된 폰트 베리어블 관련 강의는 어디에서 볼 수 있을까요?

0

볼드 UX

안녕하세요, 지금까지 폰트 베리어블 강의는 온라인 라이브 특강으로만 소개해드렸습니다.

제가 2월 초에 강의를 UI3로 다 바꿀 예정인데, 그 때 타이포그래피 베리어블도 함께 들어갈 예정입니다. 섹션2에 있을 예정입니다. 1~2주일 정도만 기다려주시면 감사하겠습니다. 업데이트 되면 새소식으로 전해드리도록 하겠습니다. 감사합니다.

배리어블 Value에 관해 질문있습니다.

0

36

0

Body>font weight 에서 semibold에 짝대기가 생기는 이유?

0

42

1

Navigation Mobile 토글 베리어블이 안됩니당

1

37

2

Typography 모드 적용시 표현된 값과 우측에 표시되는 값다름

0

36

1

디자인 시스템에 그룹명을 숨길 수도 있나요?

0

47

2

디자인 시스템 네이밍에 관한 질문드립니다.

0

57

2

next step?

1

75

1

16강 Print Variables 출력 질문

0

84

2

open in Figma 누르고 ui kit 다운?받았을 때

0

71

2

variables 이름 지을때 소문자,대문자 사용에 관해..

0

98

2

디자인 시스템 네이밍 순서에 대해 질문남깁니다!

0

117

2

이미지 캐러셀 영상

0

69

2

아이콘 사이즈 컴포넌트 구성 방식 관련

0

104

3

완강/리뷰 이벤트 후 강의자료

0

64

2

Stack 컴포넌트 관련하여 궁금한 점이 있습니다.

0

57

1

컴포넌트별 베리어블 구축

0

80

2

인풋 텍스트필드에서는 왜 'interactive/bg' 배리어블을 활용하지 않는 것인가요?

0

41

1

섹션 6 / 29.Button 강의의 아이콘 인스턴스 스왑 질문

0

54

2

UI Kit에서 배리어블 등록 안되는 문제

0

63

2

교육용 피그마 계정 문의

0

65

2

베리어블 등록했는데 스타일에 연결하려니까 안보여요..

0

89

3

폰트 웨이트 지정에서, '바디만 따로 웨이트를 시멘틱에 그룹핑 하는 이유'가 무엇인가요??

0

53

2

섹션 6 / 29.Button 강의 질문

0

67

2

67강, 70강, 75강 자료 다운로드

0

55

1