inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

[실습✨] 색상 배리어블 등록하기

섹션2 , 색상 베리어블 등록하기

해결된 질문

496

김성호

작성한 질문수 1

0

안녕하세요 이제 막 강의를 듣기 시작한 학생입니다.
색상 베리어블 등록하기 강의에서 영상을 보며 같이 색상을 등록해보려고 하는데, 강의 영상에는 이미 컬러 스타일이 다 지정이 되어 있는 상태라 style to variable 플러그인을 실행해도 색상 감지가 되지 않습니다. 컬러 스타일이 지정되어 있는 피그마 파일을 따로 공유해주시는 건가 하고 찾아봤는데 못찾겠어서요.

혹시 그냥 보고 따라하는게 아니라 배리어블에 색상 등록을 이렇게 하는거다 라는걸 참고해서 보라는 취지의 강의 내용인건가요?

답변 부탁드립니다, 감사합니다.

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

답변 1

1

볼드 UX

질문 주셔서 감사합니다.

 

우선 강의에서 보여주는 것을 통해서 우선 먼저 따라해보시고 나중에 실무/포폴을 만드실 때는 개인의 필요에 따라서 수정해서 사용하시면 됩니다.

 

강의에서는 베리어블 계층을 3단계로 나누었습니다.

  1. primtive

  2. theme

  3. semantic

이 부분을 우선 강의를 보시면서 따라해보시는 걸 추천드립니다.

  1. Primitive: style to variables 플러그인을 사용하시려면 반드시 색상 스타일이 등록이 되어 있어야 합니다. 그러기 위해서 본 강의에서는 가장 기본이 되는 primitive를 스타일에 등록하고 이 플러그인을 통해 로컬베리어블로 옮깁니다. 이 스타일을 등록하는 것은

    섹션 2의 첫번째 강의 [실습] 베리어블 등록 전 색상 스타일 맛보기를 보시면 됩니다.

  2. Theme: 지금 보시는 강의에서 컬렉션을 하나 만들어서 입력하시면 됩니다.

  3. Semantic: 동일하게 뒷부분에 나옵니다.

 

마지막 응용하기

강의에서 스크롤 하시면 아래 부분에 분석자료 & 워크시트가 공유 되어있으니 참조하시고 섹션 0 피그마 파일 공유 안에 보면 파운데이션 파일을 다운 받으실 수 있습니다. 이 자료들을 다운 받아서 분석을 해보신 다음 자신에게 맞는 계층, 토큰이름을 만들어보시는 걸 추천드립니다.

 

또 궁금하시거나 이해 안되시는 부분 있으시면 언제든지 질문주세요. 감사합니다.

0

김성호

너무 좋네요, 빠른 답변 감사합니다!

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

0

33

0

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

0

36

1

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

1

31

2

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

0

31

1

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

0

45

2

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

0

53

2

next step?

1

71

1

16강 Print Variables 출력 질문

0

82

2

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

0

65

2

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

0

92

2

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

0

114

2

이미지 캐러셀 영상

0

66

2

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

0

100

3

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

0

60

2

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

0

55

1

컴포넌트별 베리어블 구축

0

77

2

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

0

38

1

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

0

52

2

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

0

59

2

교육용 피그마 계정 문의

0

60

2

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

0

83

3

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

0

51

2

섹션 6 / 29.Button 강의 질문

0

64

2

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

0

52

1