실습 중심

부트캠프

6주 만에 피그마 디자인 시스템 전문가가 되세요!
단순한 툴 교육이 아닌, 실무에서 바로 써먹는 디자인 시스템 구축 경험을 제공합니다. 체계적인 미션을 통해 자연스럽게 마스터하는 완벽한 학습 여정이 시작됩니다.

볼드 UX

입문

초급

중급이상

Web Design

웹 디자인

Design System

디자인 시스템

product design

프로덕트디자인

피그마

Figma

6주 완성 디자인 시스템 부트캠프 4기

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

무료 계정으로 배리어블 등록은 가능하지만 다중 모드를 사용하기 위해서는 그 이상의 계정이 필요합니다. 본 강의를 들으시면 피그마의 모든 기능을 무료로 사용할 수 있는 방법을 안내해드릴 예정이니 걱정하지 않으셔도 됩니다.&nbsp;

피그마 무료 계정을 사용하고 있는데 배리어블, 모드를 사용할 수 있나요?

토큰 스튜디오와 비교했을 때 피그마 배리어블의 갯수는 현저히 적습니다. 그럼에도 불구하고 배리어블을 지금 공부해야 하는 이유는 "네이티브"라는 점입니다.<ul><li>네이티브 토큰:&nbsp;배리어블이 피그마 내에 내재되어 있어 플러그인을 열 필요가 없고 대개 안정적이고 유지보수가 빠른 반면 전반적으로 플러그인의 문제는 많은 버그가 있으며, 유지보수 대처가 느릴 수 있습니다.</li><li>비용: 토큰 스튜디오도 무료로 사용 가능하지만 제대로 사용하려면 비용을 지불해야합니다. 하지만 피그마는 현재 Restful API를 사용하지 않는 이상 프로페셔널 기능에서 모두 사용할 수 있습니다. </li></ul>그러면 토큰 스튜디오는 이제 필요없나요? 저는 아니라고 봅니다. 배리어블이 나오고 난 후 토큰 스튜디오도 가장 먼저 내놓은 기능이 현재 토큰 스튜디오의 토큰을 배리어블로 옮길 수 있도록 하는 기능입니다. 그리고 현재 배리어블을 토큰 스튜디오로 옮기는 기능이 출시 되었습니다. 생태계 측면에서 둘은 상호보완적으로 필요할 것으로 보입니다. 특히 토큰 스튜디오 프로 기능에 있는 토큰 플로우, 세컨드 스크린 보면 막강합니다.결국 내가 만들고 싶거나 바꾸고 싶은 것이 무엇인가에 따라 결정하시는 것을 추천드립니다.

토큰 스튜디오와 피그마 배리어블의 차이가 궁금합니다.

온라인 강의는 혼자 자유롭게, 내 속도에 맞춰 학습할 수 있다는 장점이 있고,부트캠프는 정해진 일정(6주) 안에서 동료들과 함께 몰입하며 실무에 가까운 학습 경험을 할 수 있다는 점이 큰 차이입니다.부트캠프에서는 따로 아래와 같은 혜택이 존재합니다.<ul><li>오리엔테이션, 라이브 Q&amp;A, 특강 세션 등이 제공</li><li>우수자들을 위한 멘토링 기회</li><li>부트캠프 수강증 </li></ul>

기존 온라인 강의와 부트캠프의 차이가 무엇인가요?

[1주차] 부트캠프 소개 및 기본 개념 익히기

[2주차] 베리어블과 스타일 파운데이션

[3주차 파트1] 컴포넌트 만들기 준비 및 인풋 컴포넌트 만들기

[3주차 파트2] 피드백(Feedback) 컴포넌트 만들기

[4주차 파트1] 디스플레이(Display) 컴포넌트 만들어보기

[4주차 파트 2] 네비게이션(Navigation) 컴포넌트 만들어보기

[5주차 파트 1]  모드 설정해서 배리어블 제대로 활용하기

[5주차 파트 2]  B2B, B2C 페이지 만들기

[6주차] 모바일 페이지 만들고 마지막 점검하기

회사에서 유일한 UX/UI 담당자로 일하면서 막히는 모든 부분을 혼자 해결해야 했는데 정말 많은 도움이 되는 수업이었습니다. 
디자인 시스템을 실제로 어떻게 구축하고 활용하는지 명확하게 이해할 수 있었고 특히 베리어블(Variables)을 활용해 색상, 타이포, 스페이싱, 테마 등을 체계적으로 관리하는 방법이 매우 인상 깊었습니다. 그리고 실제 실무에서 마주치는 상황을 예시로 들어 설명해 주셔서 이해가 훨씬 쉬웠고, 그런 부분들이 저의 실제 업무에서 개발자들과의 의사소통에 많은 도움이 되었습니다.
이 수업은 디자인 시스템을 처음 도입하려는 디자이너뿐만 아니라, 이미 사용 중이지만 구조를 더 체계화하고 싶은 분들에게도 정말 추천하고 싶습니다.

77강 동안 너무 좋은 내용 만들어주셔서 수업듣는 내내 집중하며 열심히 들은 것 같습니다! 디자인시스템을 제작해보기도 했고, 나름 잘 만들고 있다고 생각했지만 여전히 부족하다고 느껴 문서로 공부를 시작했을 때 막막했던 순간에 해당 부트캠프를 통해 열심히 수강할 수 있어서 너무 좋았어요! 무엇보다 그냥 읽고 습득하는게 아닌, 직접 제작해보면서 공부를 할 수 있었다는게 좋았습니다 ㅎㅎ 제작해주셔서 너무 감사해요~! 수고하셨습니다!

볼드님의 기초 강의에 너무 만족해서
마침 디자인 시스템 부트캠프를 하셔서
이어서 듣고 있습니다.
소중한 시간 낭비 하기 싫은 분들에게  볼드님 강의  추천 드립니다.

혼자 공부할때보다 뭔가 중간중간 체크받으면서 진행하니 완강은 하게 되었습니다. 혹시나 완강 스트레스가 있으신 분들에게는 추천합니다. 또한 강사님의 고퀄리티 강의는 기본이고, 추천합니다.

볼드쌤 강의 오픈할 때마다 모두 수강하고 있습니다!! 👍👍👍
이번 챌린지 부트캠프 라이브에서도 특강마다 실무에서 헷갈리는 부분이나, 디자이너가 핸드오프하는 방법(파일, 문서화, 레이아웃/그리드 표시 방법, 디자인 시스템 체크, 접근성 체크 플러그인 사용 상세 방법, 핸드오프 미팅 노하우 등) 실무 노하우를 자세하게 예시와 함께 설명해주셔서 참고하기 너무 좋았습니다!!
사수 없는 1인 주니어 디자이너분들에게 많은 도움이 됩니다!! 꼭 추천하고 싶어요!!
강의 관련 등 실무에서 모르는 부분도 디스코드에서 질문할 수 있어서 좋았습니다!!
좋은 강의 항상 감사드립니다!!

디자인시스템 강의다 보니 프로토타입 부분이 많진 않았지만 OTT 서비스를 제작하면서 프로토타입 돌려보는게 재밌었습니다 ㅎㅎ 알찬 강의 내용 만들어주셔서 너무 감사합니다! 완강 수고하셨습니다!

다크모드 모바일 OTT 앱 제작하기

모모

베리어블 활용해서 반응형 페이지 제작하고, 구글 시트 활용해서 내용 넣는게 너무 편리하고 좋은 것 같아요! 이번 수업도 알차게 들었습니다 ㅎㅎ

B2C 이러닝 페이지 제작하고 다크모드, 반응형 구현하기

수업을 듣다보면 베리어블을 활용해서 많을 걸 할 수 있다는 걸 깨닫게 됩니다! 이번 수업도 잘 들었습니다 ㅎㅎ

B2B 페이지 제작하고 다크모드, 반응형 구현하기

<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.figma.com/design/kTiznZzmYj0siK1Xu5xLjh/%F0%9F%8C%B1-Bootcamp-2025-Mission?node-id=8-525&amp;t=mi9rcPV1qmCj398l-1">https://www.figma.com/design/kTiznZzmYj0siK1Xu5xLjh/%F0%9F%8C%B1-Bootcamp-2025-Mission?node-id=8-525&amp;t=mi9rcPV1qmCj398l-1</a> 작업중입니다. 폰트 작업 중에 취소선이 생겨서 다시 했는데도 생기고 print variables 했을때도 안 나옵니다.어떻게 수정해야 하는지 알고 싶어요.

배리어블 기반 스타일 가이드 제작

배리어블 기반 스타일 가이드 제작 - 작업중

choco91

디자인시스템 강의를 듣다보면 이렇게 상세하게 제작하는구나...! 싶습니다(제가 여태껏 만들었던 시스템은 적당히만 제작했던것 같기도 해서 반성이 되네요 ㅎㅎ) 이번 수업도 잘 들었습니다!

네비게이션 컴포넌트 7종 만들기 (메뉴, 탭, 브레드크럼 등)

디스코드에 질문 드렸는데 한번 확인 부탁드립니다! 테이블 시트가 올려주신 피그마 파일에 따로 없어서 강의 내용 참고하면서 제작했습니다~!

정보 표시 컴포넌트 8종 만들기 (카드, 테이블, 리스트 등)

항상 모달 만들때 종류를 여러개 제작했었는데 slot을 먼저 만들고 모달을 만드니까 훨씬 효율적인 것 같습니다! 이번 강의도 재밌게 들었습니다 ㅎㅎ

피드백 컴포넌트 6종 만들기 (알림, 토스트, 모달 등)

부랴부랴 3주차 파트1 완성 다했습니다ㅜㅜ! 생각보다 범위가 많아서 보고 따라하느라 오래 걸린 것 같아요! 디자인 시스템 공부할 수록 피그마에 대해 자세히 알아가는 것 같아 수업이 즐겁네용ㅎㅎ 질문이 있습니다! Textfield나 Radio, Checkbox처럼 Stroke가 들어가는 컴포넌트를 제작할 때, 보통 Stroke 설정을 Inside / Center / Outside 중 어디로 설정하는 걸까요? 저는 보통 Clip Content 시 Stroke가 잘리지 않도록 Inside로 설정해왔는데, 강의에서는 컴포넌트마다 Stroke 설정이 조금씩 다르게 설정된 것 같아서요! 혹시 각 컴포넌트별로 Stroke 위치를 정할 때 일반적으로 따르는 규칙이나 기준이 있을까요?

입력 컴포넌트 8종 만들기 (버튼, 폼, 인풋 등)

제출이 늦어 죄송합니다. 처음 제작해보는 작업이라 우선은 주신 자료를 참고하는 것에 초점을 맞췄습니다. 다음에는 조금 더 주도적으로 제작해보고 싶네요ㅎㅎ&nbsp;궁금한점이 있습니다. 올려주신 피그마 자료에서 [Typography Styles]의 Responsive와 Style variations은 어디 부분을 참고해서 제작하면 되는걸까요?

개발 · 프로그래밍

디자인 · 아트

기획 · 경영 · 마케팅

UX/UI

figma variable

Figma Tokens

아토믹 디자인

기획 · 경영 · 마케팅 기타

개발 · 프로그래밍 기타

그래픽 디자인

ViewContent.1770207665.338815.91c23cd1-c51a-4947-96a2-c54d7ba5a47e