피그마 강좌ㅣ디자인 시스템을 위한 핵심 기능 Variants

00:00 Intro
00:20 Variants 아이콘 샘플 리뷰
00:52 Variants 기능이 디자인 시스템을 위한 핵심 기능인 이유
01:20 피그마 커뮤니티에서 아이콘 샘플 복제하는 방법 // 버튼 컴포넌트 생성하기 영상에서 활용 예정
01:53 컴포넌트 재사용을 위한 로컬 컴포넌트를 캔버스로 불러오는 3가지 방법
02:23 컴포넌트 위젯 불러오기 단축키 : shift +i //오류 정정 "cmd + i" (X)
04:12 Shape 툴을 사용하여 아이콘 제작 및 스타일 베리에이션 도입부
04:24 Layout Grid를 활용한 아이콘 가이드라인 생성
05:13 Star Shape 비율 조절
05:27 Star 아이콘의 스타일 베리에이션, Star 도형 편집
06:43 여러개의 에셋을 일괄 개별 컴포넌트로 생성하는 방법(Create Multiple Components)
06:51 컴포넌트 그룹핑 Part 1 - Page 기준 그룹핑
07:30 컴포넌트 그룹핑 Part 2 - Rename 기능 활용하여 그룹핑한 사례
08:06 컴포넌트 그룹핑 Part 3 - Frame 활용 사례
08:53 컴포넌트 그룹핑 Part 4 - 컴포넌트 그룹핑이 중요한 이유
09:31 Frame의 Constraints기능을 활용한 아이콘 리사이징
09:54 Outline Stroke
10:59 Variants 기능으로 컴포넌트 그룹핑하는 방법
11:38 Variants의 Values 순서 수정하는 방법
11:50 Variants의 Property Name 정의하는 방법
12:10 Inspect 패널에서 Variants 컴포넌트 확인하는 방법
12:25 Variants 사용 사례 - Button 컴포넌트

*피그마 커뮤니티의 Material Design Icons 샘플 파일 링크 : figma.com/community/file/1014241558898418245