inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

[실습✨] 배리어블 등록 전 색상 스타일 맛보기

섹션3. 스타일가이드 다운받고 난후

1

미갱이

작성한 질문수 8

0

안녕하세요.


너무 초보적인 질문이라 해도 되는건지 모르겠어요.. 먼저 죄송하단 말씀드리겠습니다.


다름이 아니라,

섹션3에서 스타일가이드 파일 (BoldPlus Foundation 2025 v1 (Community)) 을 다운받았는데,

보니까 color, typography, grid, appearance

페이지가 있는데

각 페이지에 있는 값들을 style과 variable로 모두 등록해야 하는건가요?


저걸 왜 다운받았는지 일단 이해가 안되고,

다운받아서 등록하란건지 잘 모르겠어요 ㅠ.ㅠ

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

답변 1

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 미갱이님!

스타일가이드 파일은 모든 값을 그대로 style과 variable로 등록하라는 의미가 아니라, 디자인 시스템의 구성 방식과 등록 기준을 이해하기 위한 참고·실습 자료입니다.

color, typography, grid, appearance 페이지를 살펴보면서 어떤 항목을 디자인 토큰이나 스타일로 관리하는지 확인하시고, 강의에서 설명하는 부분을 중심으로 따라 하시면 됩니다. 실제 업무에서는 프로젝트에 필요한 색상, 폰트, 간격, 그리드 등을 선별하여 등록하며 모든 항목을 반드시 등록할 필요는 없습니다.

특히 처음에는 다음처럼 이해하시면 좋습니다.

  • Color: 색상 스타일 및 컬러 Variable 구성 참고
  • Typography: 폰트, 크기, 행간 등의 텍스트 스타일 구성 참고
  • Grid: 화면 레이아웃과 반응형 기준점 참고
  • Appearance: 라이트·다크 모드 등 테마 구성 참고

유사한 질문에 대해 지식공유자님께서도 제공된 스타일 가이드는 업무에 맞게 수정하여 사용하되, 팀의 규모와 구성원의 필요에 맞춰 필요한 가이드만 작성하면 된다고 답변해 주셨습니다.

따라서 현재는 파일의 모든 값을 무작정 등록하기보다는, 강의에서 설명하는 Primitive → Theme → Semantic 구조를 이해하고 직접 따라 해보는 용도로 활용해 보시면 됩니다. 이후 본인의 프로젝트에 필요한 항목만 골라 디자인 시스템으로 정리하시면 됩니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

강의 파일 다운로드

0

32

2

아이콘 컬러 자동 변경

0

57

2

'만능으로 쓰이는 기본카드' 강의 내용에 대해 질문드립니다.

0

65

2

figma.com/@boldux 계정이 없다고 나옵니다

0

72

2

반응형 웹 디자인

0

125

3

액션 아이콘 컴포넌트 질문

0

88

2

셀렉트(Select & Dropdown menu) - 파트 1 / selected 토글 버튼

0

110

3

스피너 아이콘 크기 질문

0

114

2

미리보기 빈칸생기는 현상

0

94

2

아이콘 빌런 부분

0

82

2

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

0

116

1

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

0

93

1

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

1

101

2

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

0

99

1

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

0

96

2

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

0

117

2

next step?

1

119

1

16강 Print Variables 출력 질문

0

135

2

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

0

147

2

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

0

162

2

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

0

178

2

이미지 캐러셀 영상

0

131

2

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

0

209

3

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

0

114

2