[피그마] 피그마 입문 A to Z 부트캠프 메타코드_ 5강 컴포넌트, 베리언트, 인스턴스 구별

 

https://mcode.co.kr/

메타코드M

---

▶ 1.  작업 환경에서의 위계 순서

위 사진처럼 작업 환경에서는 위계 순서가 존재합니다. 

순서대로 섹션, 프레임, 그룹, 여러가지 레이어

로 위계 순서가 있습니다. 

 

▶ 2.  Section

Section은 Section 안에 넣을 수 있지만

섹션이 보다 높은 위계는 없기 때문에

낮은 위계인 프레임 안에는 넣을 수 없습니다. 

하지만 프레임은 그룹 안에 들어갈 수 있음. 

 

▶ 3. Section과 Frame은 언제 쓰면 좋을까? 

섹션은 여러 개의 화면 프레임을 담고 있기에 좋음

하나의 플로우를 하나의 섹션으로 묶어서 

관리할 수 있음. 

프레임은 아트보드 용도로 활용하고 있음

 

▶ 4. 컨포넌트와 인스턴스 

반복적으로 관리해야 하는 요소가 있다면

컨포넌트와 인스턴스로 관리하면 편합니다.

컴포넌트 아이콘은 다이아몬드 모양 아이콘

컨포넌트가 된 요소를 복사하면 인스턴스! 

 

▶ 5.  컨포넌트와 인스턴스 특징

컴포넌트가 된 요소는 

에셋 패널과 리소스메뉴에서 확인이 가능함.

인스턴스 생성 시, 최초 컴포넌트는

마스터 기능을 가진 메인 컴포넌트가 됨.

메인 컴포넌트로 다른 인스턴스 관리가 가능함.

다양한 속성값 베리언트를 포함할 수 있음.  

 

▶ 6.  베리언트란?

베리언트는 속성값을 세분화하는 기능

메인 컴포넌트의 속성값을 세분화하는 

묶음이라고 생각하면 됨. 

메인 컴포넌트가 베리언트 속성 값을 가지고 있을 때, 

인스턴스는 무조건 하나의 베리언트 값을 가지게 됨. 

인스턴스는 일부 속성을 개별 수정 가능하지만

수정이 가능한 범위는

메인 컴포넌트에서 베리언트 값으로 지정되지 않은 것들임.

 

---

https://mcode.co.kr/

메타코드M

그럼 다음 강의에서 만나요! 

#피그마사용법 #피그마유료 #피그마다운로드 #피그마자격증 #피그마무료 #피그마 #피그마강의 #피그마사이트 #피그마다운 #메타코드엠 #메타코드