3. 피그마 컴포넌트 & Variants 기능 I 버튼 생성하기 Part 3

#버튼컴포넌트 #디자인시스템 #피그마기초
피그마 기초 - 컴포넌트의 개념 - https://designer-story.tistory.com/m/18
00:00 intro

*컴포넌트 기능
00:58 버튼 컴포넌트 생성하기
01:36 메인 컴포넌트와 인스턴스 구분하는 방법
02:25 인스턴스의 옵션 살펴보기
04:34 인스턴스의 Text Override 기능
06:10 Detach Instance(인스턴스를 메인 컴포넌트와의 연결을 해제하는 방법)
10:54 Create multiple components(여러개의 UI Asset을 한꺼번에 컴포넌트로 변환하는 방법)

*컴포넌트 Swap 기능
02:35 아이콘 인스턴스를 Design 패널에 있는 다른 아이콘으로 변경 하는 방법
03:41 아이콘 인스턴스를 Assets 패널에 있는 다른 아이콘으로 변경 하는 방법

* Variants 기능이란? 베리에이션 된 컴포넌트들을 하나의 컴포넌트로 합치는 방법
09:12 Variants 기능
11:09 컴포넌트 합치기(Combine as Variants)
12:04 신규 속성 추가(Add new property)
12:51 버튼에 아이콘이 있을 경우 Variant 값 정의 1(yes, on, true)
13:11 버튼에 아이콘이 없을 경우Variant 값 정의 2(no, off, false)
13:58 버튼의 상태 속성(pressed) 추가하기
16:00 Secondary 버튼 Type 추가하기
17:09 Design 패널에서 버튼 컴포넌트 최종 결과물 확인하기
17:34 Inspect 패널에서 버튼 컴포넌트 최종 결과물 확인하기
17:52 다음편 예고

* 회원 가입 및 figma 데스크톱 앱설치 : https://designer-story.tistory.com/34...
* 새파일 생성하는 방법 : https://designer-story.tistory.com/38
* 피그마 시작 가이드 #인터페이스: https://designer-story.tistory.com/40
* Figma 유료 결제 시 유의사항: https://designer-story.tistory.com/35