inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

모드를 활용한 반응형 디자인 구현하기

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

26

한별

작성한 질문수 4

0

image.png

따라해보고있는데
Mobile 모드로 했을때 표현되는건 40/48로 잘 적용이 됐는데
우측 Typography 창에는 60/68 이라고 뜨고 뜯어봐도 60 / 68 로 등록되어있어요

40/48 이어야되는데

왜이럴까요..?

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

답변 1

0

볼드 UX

안녕하세요, 한별님

좋은 질문 주셔서 감사합니다.

 

저도 제 파일에서 직접 확인해봤는데, 한별님과 동일한 현상이 나타났습니다. 제 판단으로는 버그처럼 보이기도 하지만, 피그마에서 의도한 방식일 가능성도 있어 보입니다.

 

현재 상황을 보면, 텍스트가 외부 프레임 안에 있고 그 외부 프레임의 모드가 모바일로 변경될 경우, 텍스트 자체는 변경되지만 스타일 패널 내부에 표시되는 값은 기존 값 그대로 유지되는 것 같습니다.

 

앞부분에서 스타일과 베리어블의 차이에 대해 언급되었다시피 베리어블은 모드에 의해 직접 제어됩니다. 반면 스타일은 내부에 베리어블이 연결되어 있을 경우 간접적으로 변화가 반영될 수는 있지만, 스타일 자체가 모드에 의해 직접 제어되는 것은 아닙니다. 그래서 스타일 내부에 표시되는 값들은 모드가 바뀌더라도 함께 변경되지 않는 것으로 보입니다.

 

저도 이번에 확인하면서 처음 알게 된 부분인데, 꽤 흥미로운 동작 방식이네요. 그리고 이 현상은 타이포그래피뿐 아니라 색상에서도 동일하게 적용됩니다.

즉 정리하자면, 스타일은 모드가 바뀌어도 화면 내에서는 바뀌지만, 실제 내부 스타일 값은 변화가 없다고 보시면 됩니다. 의도가 되었든 안되었든, 조금 혼동스러운 UI이긴 합니다.

더 질문 있으면 답변 주세요.

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

0

21

0

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

0

26

1

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

1

25

2

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

0

39

2

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

0

49

2

next step?

1

67

1

16강 Print Variables 출력 질문

0

79

2

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

0

62

2

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

0

89

2

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

0

111

2

이미지 캐러셀 영상

0

64

2

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

0

98

3

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

0

58

2

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

0

53

1

컴포넌트별 베리어블 구축

0

76

2

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

0

35

1

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

0

49

2

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

0

57

2

교육용 피그마 계정 문의

0

57

2

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

0

81

3

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

0

47

2

섹션 6 / 29.Button 강의 질문

0

63

2

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

0

50

1

베리어블 이름에 대해 질문드립니다

0

119

2