inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

[실습✨] 타이포그래피 스타일과 기본 베리어블 등록하기

타이포그래피 scope관련 문의드립니다.

해결된 질문

99

Cloe

작성한 질문수 15

0

안녕하세요! 혹시 타이포그래피에서 scope을 지정할 때 비슷해보이는 속성들이 목록에 있어 헷갈려서요. string scope의 font family, font weight or style, text content와 상단의 typography 항목들, 그리고 number scope에 있는 text content의 차이가 무엇일까요~?

image.png

 

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

답변 2

1

wlgus241

덕분에 저도 배워가요! 감사합니다

0

볼드 UX

타이포 그래피는 숫자(Number)와 문자(String) 두개 베리어블을 등록할 수 있으며, 각각 적용 가능한 곳이 다릅니다.

 

강의에서 자세히 언급되었듯이

문자(String) Scope 내에서는 Font family는 글꼴 종류(폰트 패밀리), Font weight: 폰트 두께

Number Scope 내에는

기타 여러 속성들이 보일 것입니다.

 

그리고 두개 다 들어가는 것 중에는 Font weight, Text content가 있습니다.

Font weight는 강의에서도 언급했듯이 500, Medium을 동일하게 보기 때문에 숫자, 문자 다 가능합니다.

Text content는 모든 보이는 문자열에 적용할 수 있으며, 버튼 라벨, 인풋 라벨 등 모든 적용가능한 컨텐츠에 가능합니다. 일반 텍스트에 바로 입력해도 인스턴스, 컴포넌트의 텍스트 프로퍼티에 적용하셔도 됩니다. 원칙적으로 Text content는 타이포그래피가 아니라 컨텐츠입니다. 그래서 숫자 스코프에서는 타이포그래피 밖에 있는데, 문자 스코프에는 다른 타이포그래피 속성과 같이 있어 착각을 불러 일으킵니다.

 

질문하신 답변에 도움이 되었으면 좋겠습니다.

아이콘 빌런 부분

0

22

1

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

0

46

0

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

0

46

1

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

1

43

2

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

0

40

1

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

0

49

2

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

0

62

2

next step?

1

78

1

16강 Print Variables 출력 질문

0

84

2

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

0

74

2

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

0

98

2

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

0

119

2

이미지 캐러셀 영상

0

70

2

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

0

107

3

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

0

66

2

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

0

59

1

컴포넌트별 베리어블 구축

0

82

2

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

0

41

1

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

0

54

2

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

0

63

2

교육용 피그마 계정 문의

0

65

2

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

0

91

3

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

0

53

2

섹션 6 / 29.Button 강의 질문

0

68

2