Thumbnail
BEST
디자인 UX/UI

피그마 배리어블을 활용한 디자인 시스템 구축하기 대시보드

(5)
32개의 수강평 ∙  603명의 수강생
198,000원

월 39,600원

5개월 할부 시
지식공유자: 볼드 UX
총 80개 수업 (13시간 29분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[UX/UI, Figma] 강의입니다.

배리어블은 일관된 사용자 경험을 제공하고 디자인 프로세스를 혁신적으로 개선할 수 있는 열쇠입니다. 피그마의 배리어블을 활용하여 함께 디자인 시스템을 만들어보세요!

✍️
이런 걸
배워요!
배리어블을 활용하여 디자인 시스템 구축하기
디자인 토큰, 아토믹디자인을 기반으로 배리어블 개념 다지기
33+ 코어 디자인 컴포넌트 직접 처음부터 하나하나 제작하기
배리어블 모드를 활용하여 B2B, B2C, 모바일 UI 페이지 만들기
2023년 후반기 피그마 최신 업데이트 반영

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
디자인 시스템에 관심 있는 누구나
배리어블/디자인 토큰에 대해 생소하신 분
디자인 시스템이 궁금한 PM/개발자
피그마 실력을 한단계 업그레이드 하고 싶으신 분
📚
선수 지식,
필요할까요?
피그마 기초(기본 인터페이스, 오토레이아웃)

안녕하세요
볼드 UX 입니다.
볼드 UX의 썸네일

저는 런던에서 Sr.프로덕트 디자이너로 일하는 볼드입니다.

제 경력은 리서처로 시작하여 프로덕트 디자이너로 커리어 전환 후 핀테크, 클라우드 테크, 마케팅 등 다양한 분야에서 경험을 쌓고 있습니다. 국내 석사 출신으로 해외교육 없이 런던에서 바로 취업하여 다양한 실무 경험을 하고 있으며, 실무에서 아래의 내용을 진행해왔습니다.

  • 사용자 리서치 시스템 구축, 관리

     

  • 디자인 시스템 구축, 관리,

    피그마 UI/프로토타이핑

  • 디자인 역량 코칭, 멘토링

인프런을 통해 제가 알고 있는 실무 노하우를 공유하고 이를 통해 저도 많이 배우고 싶습니다.

감사합니다.

 

경험 및 경력

(현) 런던 데이터 솔루션, K*회사, Sr. 프로덕트 디자이너

(전) 런던 글로벌 리서치 G* 회사, Sr. 프로덕트 디자이너

(전) 런던 핀테크 S* 회사, Sr. 프로덕트 디자이너

(전) 런던 클라우드 컴퓨팅 회사, UX/UI 디자이너

연세대 인지공학랩 리서처 출신

커리큘럼 총 80 개 ˙ 13시간 29분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의 소개
강의 개요 미리보기 06:09
강의 시작 전 필수사항
피그마 파일 공유
요약본 파일 공유
섹션 2. 배리어블과 파운데이션 세팅하기
[실습] 배리어블 등록 전 색상 스타일 맛보기 04:51
배리어블 인터페이스와 친해지기 07:26
색상 배리어블 구조, 이름 짜보기 미리보기 09:28
[실습] 색상 배리어블 등록하기 24:40
간격 배리어블 스케일 구성짜기 09:01
[실습] 간격 배리어블 등록하기 11:01
[실습] 타이포 그래피 스타일 플러그인으로 만들어보기 06:50
아이콘 등록하는 방법, 그리고 팁 09:49
다양한 효과 그리고 높낮이를 나타내는 그림자효과 - 파트 1 15:13
다양한 효과 그리고 높낮이를 나타내는 그림자효과 - 파트 2(업데이트) 10:30
그리드 시스템과 반응형 기준점 설정하기 13:57
기타 베리어블 살펴보고 등록하기(업데이트) 06:34
섹션 3. 컴포넌트 만들기 위한 준비
컴포넌트 만들기 전 라이브러리 세팅하기 04:05
컴포넌트 만드는 기본 레시피 순서 08:04
컴포넌트 워크시트 확인하기
[유의사항] 컴포넌트 Property Value 명명 정하기
섹션 4. 입력(Input) 컴포넌트 만들어보기
버튼(Button) 21:41
체크박스(Checkbox) 07:05
라디오 버튼(Radio) 07:33
스위치 버튼(Switch) 10:40
라벨과 컨트롤 그룹(Label & Control Group) 14:32
텍스트 필드(Text Field) 14:12
텍스트 상자(Text Area) 11:16
셀렉트(Select & Dropdown menu) - 파트 1 14:47
셀렉트(Select & Dropdown menu) - 파트 2 12:03
입력 컴포넌트 마지막 점검하기 05:58
섹션 5. 디스플레이(Display) 컴포넌트 만들어보기
아바타(Avatar) 17:14
아코디언(Accordion) 09:58
뱃지(Badge) 06:28
툴팁(Tooltips) 10:17
기본이 되는 구분선(Divider) - (구버전) 곧 아카이브 예정 04:47
기본이 되는 구분선(Divider) - 업데이트 버전 03:10
칩(Chips) 15:42
만능으로 쓰이는 기본 카드(Basic Cards) 10:14
테이블(Table) 16:39
디스플레이 컴포넌트 마지막 점검하기 02:53
섹션 6. 피드백(Feedback) 컴포넌트 만들기
알림/경고 메세지 만들기 13:43
토스트(Toast) 11:55
스켈레톤 로더(Skeleton Loader)와 로딩 스피너(Loading Spinner) 19:08
프로그레스 바(Progress Bar) 05:41
슬롯 컴포넌트로 재활용 가능한 모달(Modal & Slot) 24:18
피드백 컴포넌트 마지막 점검하기 02:05
섹션 7. 네비게이션(Navigation) 컴포넌트 만들어보기
간단한 기본 텍스트 링크(Link) 08:37
링크를 활용한 브레드크럼프(Breadcrumbs) 07:04
네비게이션 탭(Tabs) 10:37
모바일 하단 네비게이션(Bottom Navigation) 14:28
페이지네이션(Pagination) 08:07
메뉴를 활용한 사이드 네비게이션(Side Navigation) - 파트1 07:48
다양한 형태의 사이드 네비게이션(Side Navigation) - 파트2 16:15
상단에 위치하는 헤더와 메뉴(Header) 20:41
이미지 캐러셀(Carousel) 14:28
네비게이션 컴포넌트 마지막 점검하기 03:08
섹션 8. 모드 설정해서 배리어블 제대로 활용하기
배리어블 모드 활용 맛보기 미리보기 05:01
모드를 활용한 다크모드 전환, 그리고 그 원리 배우기 - 파트 1 11:32
모드를 활용한 다크모드 전환, 그리고 그 원리 배우기 - 파트 2 15:12
브랜드 구조와 모드를 활용한 통합 브랜드 구현하기 15:32
모드를 활용한 반응형 디자인 구현하기 18:33
모드를 활용한 다중언어 지원 화면 만들기 18:28
섹션 9. 페이지를 만들기 전에 알아야할 사항
컴포넌트 라이브러리 내보내기 05:28
섹션 10. 페이지 만들기 - B2B 이커머스 어드민 페이지
섹션 11. 페이지 만들기 - B2C 이러닝 페이지
헤더, 사이드 네비게이션 만들기 14:53
카드 만들기 15:44
카드 레이아웃 및 프로토타이핑 08:31
카드에 실제 데이터 입력하기 11:54
반응형 디자인 만들기 18:22
섹션 12. 모바일 OTT 서비스 페이지 만들기
모바일 OTT 앱 메인 페이지 만들기 14:21
모바일 OTT 컨텐츠 상단 페이지 만들기 08:46
모바일 OTT 컨텐츠 하단 페이지 만들기 10:03
모바일 OTT 컨텐츠 데이터 연결하기 08:06
섹션 13. 2024 피그마 업데이트 (추가 예정)
섹션 14. 마지막 세션
강의를 마치며..
강의 게시일 : 2023년 11월 09일 (마지막 업데이트일 : 2024년 03월 10일)
수강평 총 32개
수강생분들이 직접 작성하신 수강평입니다.
5
32개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
gs.kim thumbnail
5
제대로 된, 깊이 있는 피그마 강좌를 찾고 있는데, 이 강좌를 듣지 않는다면 무조건 손해 보는 겁니다! 강의를 완강한 사람으로서 리얼 코멘트할게요. 저는 프론트엔드 개발자지만 UI/UX에 관심이 많아 포토샵이나 스케치 등을 어느 정도 쓸 수 있는 정도의 스킬을 갖고 있어 이 강의를 경험한 느낌 그대로 적어보려고 합니다. 피그마가 디자인 툴이긴 하나 6월 말에 Variables 및 Dev Mode가 추가되면서 엄청나게 강력해졌지만, 제대로 적용해보려면 그만큼 로지컬한 느낌을 받을 수 있어, 디자이너 입장에서는 알아야 지식이 많아진 거 같습니다. 저는 처음 완강을 할 때는 제대로 설명하고 있는지 유심히 살피면서 강의를 여러 번 눈팅?했고요. (한번 봐서는 잘 모르겠더라고요? 😓) 그리고 두 번째 보기 시작할 때는 따라 하기 쉬운 예제 위주로 간간이 따라 해봤습니다다. 이 강좌의 특징이 밀도가 높아 각 장마다다 술렁술렁 넘어가는 장이 없습니다. 처음부터 완벽하게 다 기억하고 다 따라하면 포기할 확률이 높을 거 같습니다. 바로 제가 초반에 그렇게 하다가 좌절하고, 다시 마음 잡고 속도보다는 이해를 중심으로 같은 영상을 여러 번 다시 보기 시작했습니다. 강좌를 듣는 사람 수준을 고려해서 말씀드리자면, 피그마에 대해서 완전 생초보 자는 어려울 수 있어요. 그러나 디자인 시스템에 대해서 더 알고 싶어 구매한 분들이라면 어렵지 않게 강의를 보고 따라 하실 수 있어요. 약간 지루할 수 있는 이론적인 부분이 초반에 있지만 초반만 좀 넘기면 정말 쓸모가 많은, 내공이 느껴지는 강의가 많았고 상당히 디테일하게게 설명합니다. 인내심을 갖고따라 하다 보니 어느샌가 디자인 시스템에 대한 이해 수준이 높아지는 것을 느낄 수 있었습니다. 실전에서 쓸 예제는 넘치고 넘쳤습니다. 한 번에 다 해치운다고 생각하지 말고 사탕을 입 안에 넣고 천천히 녹여 먹는다는 마음으로 강의를 보시면 실력이 쑥쑥 늘고 있다는 걸 느끼실 거라고 확신합니다. 제가 그랬습니다! 여러분도 한번 느껴보시길 추천드립니다.
2023-12-03
작고귀여운둉이 thumbnail
5
완강했습니다. 저는 현직자고, 피그마를 몇년째 매일 만지는 사람입니다. 제가 가진 스킬의 부족함이 있는지 확인차 강의를 결제하고 설연휴 이틀에 걸쳐 수강했습니다. 디자인시스템, 디자인 작업시 베리어블의 사용례를 아주 잘 익힐 수 있습니다. 피그마 업데이트 사항에 따라서 강의도 업데이트 해주셔서 특히나 좋았습니다. 밑에 분이 말씀하신대로 처음부터 강의의 모든 것을 다 따라하려하거나 초심자가 보기에는 상당히 어려울 수 있습니다. 하지만 이게 실무의 맛보기라는 점은 현직자들은 알고 있을 것입니다. 처음이라 어려운 것이지, 반복하고 또 반복하다보면 원리가 보이고 그 원리가 응용되고 반복된다는 점을 알면 금세 적응할 수 있습니다. 강의 만들어주셔서 고맙습니다. 한번 보고 마는 강의가 아닌 것이 타 강의와 차별화된 강점이라고 생각합니다.
2024-02-11
김현석 thumbnail
5
도움 되는 내용들이 많습니다. 문득문득 평소에 궁금했던 점들이 강의에 나와 저에게는 개념 정리가 잘 되었던거 같습니다. 충분히 많은 도움이 되고 있습니다. 감사합니다.
2023-11-24
Minjoo Kim thumbnail
5
피그마가 일 년 동안 정말 많은 업데이트가 되면서 이걸 언제 배우고 실무에 어떻게 적용하면 좋을까에 대한 고민이 많았습니다. 그 고민을 덜어준 강사님께 정말 감사드립니다. 토큰 시스템은 들어봤지만 도전하지 못했던 저에게 베리어블을 통해 색상을 등록하는 거부터 디자인 시스템들을 하나하나 만들고 컴포넌트화하면서 베리언트 하는 방법을 기초부터 다질 수 있는 기회가 된 값진 시간이었습니다. 실무 하면서 어떻게 배리언트를 만들어야 편리한지 많이 알게 되어 업무 효율성이 매우 높아질 듯합니다. 저도 강의를 이렇게 빠르게 완강을 한 적이 없었던 것 같아요. 강의 하나하나가 길지 않은 시간이어서 더 좋았던 것 같습니다. 앞으로도 좀 더 좋은 강의 기대하고 있겠습니다.
2023-12-13
김주희 thumbnail
5
강사님 강의 퀄리티 너무 좋아서 볼때마다 감동받습니다 :) 👍 이런 개념들을 혼자 터득하기까지 많이 힘드셨을텐데... 강의로 만들어 공유 주셔서 감사합니다!! 저같은 초초초 쥬니어디자이너에겐 가뭄의 단비같은 강의인거 같아요! 완강 화이팅해보겠습니다!!
2023-11-28