피그마 기초 강의 4-1
이번주에 배울 것
<컨트롤 컴포넌트>
- 컴포넌트 프로퍼티
- 베리언츠, 프로퍼티 생성 관리 in Figma
- 컴포넌트 응용 및 결합하는 과정 이해
파운데이션 + 파운데이션 = 컴포넌트
컴포넌트 + 컴포넌트 = 상위 컴포넌트 or 합성 컴포넌트
피그마 기초 강의 4-2
컴포넌트 프로퍼티의 이해
<의사 상태 복습하기>
= 가상의 상태 = 가변의, 변화 가능한
<컴포넌트 프로퍼티_component property>
-
Varients
프로퍼티의 한 종류지만 별개의 속성
컴포넌트가 가질 수 있는 또 다른 모습을 만들 수 있게 하는 기능 -
Property
디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다룰 때 사용한다. -
컴포넌트 프로퍼티 종류 in Figma
Varient
Boolean
Yes or No를 선택하는 형식
참 거짓, 예 아니오, 켜기 끄기
Instance swap
인스턴스를 다른 인스턴스로 교체하는 기능
반드시 인스턴스 --> 다른 인스턴스로 스왑
Text
컴포넌트 안의 텍스트를 수정하기 쉽도록 컴포넌트 속성으로 만들어줌
직접 디자인 수정이 아닌 속성 설정으로 빼줌 -
베리언츠와 프로퍼티 선택 기준
파운데이션이 변경되느냐(디자인 토큰 값이 바뀌느냐)
색상, 간격, 폰트가 바뀜 -> 베리언츠
색상, 간격, 폰트, 아이콘 크기 등 안 바뀜 -> 프로퍼티 -
프로퍼티로 제작할 수 있다면 하는 편이 좋음_ 모두 베리언츠로 만드는 것은 비효율적
피그마 기초 강의 4-3
버튼 컴포넌트의 의사 상태 만들기
- 위계
얼마나 중요한가, 우선순위
primary > secondary > tertiary
실습
버튼의 의사 상태 분류
피그마 기초 강의 4-4
버튼 컴포넌트에 아이콘 추가하기
피그마 기초 강의 4-5
버튼 컴포넌트의 아이콘 바꾸기
