피그마의 가장 큰 특장점 : 컴포넌트
컴포넌트는 재사용이 가능한 최소의 단위라고 정의할 수 있다.
컴포넌트라는 개념은 개발 / 디자인 분야에서 많이 사용하는데, 처음에는 이해하기 어려울 수 있다.
UI/UX를 구성하다 보면, 복사 + 붙여넣기를 많이 이용하게 된다.
이 때 복사 + 붙여넣기가 필요한 부분이 아주 작은 부분(ex. 일반 텍스트, 도형, 단순 글꼴이나 색상)일 수도 있고, 앱 또는 웹의 한 페이지 정도의 많은 요소들로 이루어진 복잡한 부분일 수도 있다.
간단한 텍스트 추가하기
피그마 프로젝트를 하나 만들고, 간단한 텍스트를 추가한다.
간단한 텍스트를 컴포넌트로 만들기
상단 Create Component 아이콘을 클릭한다.
다음과 같이 색상이 바뀌면 텍스트가 '컴포넌트화'되었다는 것을 알 수 있다.
마스터 컴포넌트를 복사하면 복사본이 생긴다. 이 복사본을 인스턴스라고 하는데, 인스턴스는 컴포넌트의 특성을 가진 실체라고 생각하면 된다.
컴포넌트를 변경하여 인스턴스에 함께 적용하기
오른쪽 디자인 영역에서 마스터 컴포넌트의 속성을 변경해보면 인스턴스도 함께 변경되는 것을 볼 수 있다.
마스터 컴포넌트인 텍스트의 색상을 빨간색으로 변경해보았다.
이 특성은 인스턴스가 여러개인 경우에도 동일하게 적용되기 때문에, 공통적인 속성을 적용하는 경우에 유용하게 사용할 수 있다.
대표적으로 안드로이드 리스트 뷰나, iOS의 테이블 뷰 등을 표현할 때 아주 유용하게 사용할 수 있다.
컴포넌트화 되돌리기 (Undo)
만약 처음에는 공통적인 속성을 사용하고자 컴포넌트를 복사했는데, 앞으로는 마스터 컴포넌트의 속성을 따르고 싶지 않다면 연결을 해제해서 독립적인 요소로 되돌릴 수 있다.
인스턴스를 선택한 후, 오른쪽 Design 영역을 보면 Instance에 마스터 컴포넌트가 표시된 것을 볼 수 있다.
마스터 컴포넌트와의 연결을 해제하려면 Detach Instance 메뉴를 선택한다.
이제 마스터 컴포넌트와 연결이 해제된다.
팁) 왼쪽 메뉴에서 Assets를 선택하면 이 프로젝트에 어떤 컴포넌트가 있는지 확인할 수 있다.
