inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

배리어블과 스타일 중 무엇을 사용해야 할까?

4분 부분에서 궁금한점이있습니다.

해결된 질문

507

김성진

작성한 질문수 5

0

앞족에서 베리어블은 스타일과 베리어블을 참조받을수있따고 설명해주셧는데 3분 20초에서는 스타일을 찾을수 없다고 말씀하셔서요.

 

실제로도 해보니

베리어블은, 기존 베리어블을 참조할 수잇고 스타일은 참조못하고

스타일은, 라이브러리에서 베리어블만 적용되고 스타일은 안된느데

둘이 각각 서로 참조가 안되는 부분으로 실제 적용되는데 제가 잘못 하고 잇는걸까요?

 

앞에서 하신 설명과 보여주신 설명이 조금 다르게 느껴져서 혼동이오네요 ㅠ

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

답변 1

0

볼드 UX

안녕하세요. 질문 주셔서 감사합니다.

충분히 헷갈리실 수 있을 것 같습니다. 왜냐하면 준비한 이론과 실습의 예제가 살짝 다르기 때문입니다. 그렇게 한 이유는 이론과 실제로 적용할 때 이해를 돕기 위해서 어쩔 수 없이 구조를 다르게 해서 만들었기 때문입니다.

[이론 파트]

앞에서 제가 언급한 경우 아래 그림처럼 배리어블, 스타일이 참조를 받는 기준(왼쪽)으로 "배리어블은 다른 배리어블과 스타일에서 참조할 수 있다"라고 제가 언급했습니다.

 

image[실습 파트]

3분 20초 예시의 경우 배리어블 또는 스타일이 참조 하는 기준(오른쪽)으로 "배리어블은 스타일을 참조하지 못한다"입니다.

image결국 둘다 똑같은 말인데 무엇을 기준으로 해서 설명하느냐에 따라 다릅니다.

결국은 제가 전하고자 하는 말은 "기본 색상의 경우 참조를 받을 수 있는 배리어블을 쓰자"입니다.

제 답변이 이해하시는데 도움이 되셨으면 좋겠습니다. 만약 안되시면 답글 적어주세요! 감사합니다.

 

1

김성진

와 자세하게 알려주셔서 감사드립니다! 알려주신대로 실습해보고 궁금한점 생기면 답글 드릴게요 😃

아이콘 빌런 부분

0

26

2

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

0

51

1

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

0

47

1

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

1

43

2

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

0

40

1

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

0

50

2

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

0

62

2

next step?

1

78

1

16강 Print Variables 출력 질문

0

84

2

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

0

78

2

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

0

100

2

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

0

120

2

이미지 캐러셀 영상

0

72

2

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

0

108

3

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

0

67

2

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

0

62

1

컴포넌트별 베리어블 구축

0

83

2

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

0

42

1

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

0

54

2

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

0

63

2

교육용 피그마 계정 문의

0

67

2

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

0

91

3

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

0

53

2

섹션 6 / 29.Button 강의 질문

0

68

2