* 해당 글은 메타코드M에서 진행되는 Figma 강의 서포터즈 활동으로 작성하는 글입니다.
섹션,프레임,그룹의 구조
작업 환경에서의 위계 순서
작업 환경에서의 위계 순서는 다음과 같습니다.
- Section
- Frame
- Group
이 위계 순서는 틀어질 수도 없고 변경 또한 불가합니다.
'Section'은 동일한 Section 내에서는 이동할 수 있지만 Frame 내에서는 존재할 수 없습니다.
컴포넌트와 인스턴스
반복적으로 관리해야 하는 요소 다루기
작업을 하다 보면 매번 만들기 귀찮은 아이콘이 존재할겁니다.
가령 서비스 내에서 검색 아이콘은 결국 같은 룩을 가지고 있을텐데
이를 관리하기 위해서는 매번 만드는 것이 아닌 컴포넌트로 관리를 할 수 있습니다.
컴포넌트가 된 요소를 복사하면 인스턴스가 되는데요.
인스턴스 = 복사가 되고 붙어넣기 된 요소들로 복사된 아이콘의 속성값은 그대로 유지하게 됩니다.
이건 컴포넌트 또한 마찬가지입니다.
그렇다면 컴포넌트와 인스턴스의 차이점은 무엇일까요?
컴포넌트와 인스턴스의 특징
컴포넌트
- 에셋 패널&리소스 메뉴에서 확인 가능
- 인스턴스 생성 시 , 메인 컴포넌트가 됨
- 다양한 속성값을 '베리언트'로 구별
베리언트 : 속성 값을 세분화하는 기능으로 메인 컴포넌트의 속성 값을 세분화한 묶음을 의미
인스턴스
- 컴포넌트 없이 생성 불가
- 메인 컴포넌트가 수정되면 함께 수정됨
- 메인 컴포넌트가 삭제되면 업데이트 안됨
- 메인 컴포넌트의 베리언트가 있을 시, 반영
- 일부 속성 개별 수정 가능
컴포넌트, 베리언트,인스턴스의 구별은 다음과 같은 기호로 표현됩니다.