스케치에 심볼이 있다면 피그마에는 컴포넌트가 있습니다. 컴포넌트를 이용해 재사용하는 요소들을 편리하게 관리할 수 있고, 전체 디자인 생산성을 높일 수 있습니다.
컴포넌트는 재사용하는 요소를 정의하고 필요할 때마다 검색해 사용할 수 있는 중요한 기능 중 하나입니다. 피그마에서 사용하는 모든 요소를 컴포넌트로 만들 수 있습니다. 컴포넌트는 Main Component와 Instance로 구분됩니다. Instance는 Main Component를 복사한 것으로 만약 Main component가 편집되면 모든 Instance에 적용됩니다. 피그마의 컴포넌트는 스케치의 심볼과 기본적인 개념은 비슷하지만, Instance를 조금 더 자유롭게 편집할 수 있습니다.
컴포넌트로 만들고 싶은 요소를 선택한 뒤, 메뉴 바의 컴포넌트 버튼을 누르거나, Option + Command + K (Ctrl+ Alt + K) 를 눌러 컴포넌트를 만듭니다. 여러 요소를 선택해서 통째로 컴포넌트를 만들 수 있으며 개별 컴포넌트를 만들 수도 있습니다.
캔버스에서 Option + 2(Alt + 2) 를 누르면 사이드바에서 Assets을 검색할 수 있습니다. 검색 후 원하는 컴포넌트를 클릭 후 드래그해 캔버스에 넣을 수 있습니다.
컴포넌트를 선택하면 오른쪽 메뉴에서 컴포넌트를 교체할 수 있습니다. 컴포넌트 아이콘을 눌러 메인 컴포넌트로 이동하거나 메인 컴포넌트와 인스턴스의 연결을 끊을 수도 있습니다.
컴포넌트의 특정 부분만 수정할 수 있습니다. 수정하고자하는 요소를 더블 클릭하거나 Command를 누르면서 선택한 뒤 다른 요소로 교체하면 됩니다. 교체했던 내용을 원래대로 돌리고 싶다면 오른쪽 패널의 더보기 아이콘을 눌러 초기화할 수 있습니다. 또한 인스턴스에서 수정한 내용을 마스터에 적용할 수도 있습니다.
Variant는 피그마의 강력한 기능 중 하나입니다. 하나의 컴포넌트를 다양한 속성으로 정의할 수 있는 기능입니다. 예를 들어 버튼이 눌렸을 때, 로딩 중일 때, 누를 수 없을 때 와 같은 다양한 상태를 하나하나 따로 디자인 툴에서 지정해야 했는데, , variant 기능을 이용해 손 쉽게 관리할 수 있습니다.
스케치의 Nested symbol과 유사하지만, 수없이 많은 심볼을 따로 등록하지 않고 Value를 따로 지정해 더 간편하게 다양한 케이스를 관리 할 수 있습니다.
먼저 낱개로 필요한 변수에 맞춘 컴포넌트를 제작합니다. 예를 들어 지금 주목도에 따른 Primary와 Secondary를 나누기 위해 Type으로 종류를 구분하고, 각 버튼의 상태를 표현하기 위해 Status로 변수를 정했습니다. 각 변수에 맞춰서 컴포넌트를 만들고 컴포넌트를 모두 선택하고 오른쪽 패널에서 Combined as variant로 묶어줍니다.
Variant를 선택한 뒤 오른쪽 패널의 더보기 아이콘을 눌러 속성을 관리할 수 있습니다. Variant나 Property를 추가할 수 있고 새 값을 추가한 뒤 Variant 내부의 컴포넌트의 위치를 정리 정돈합니다.
instance 컴포넌트를 선택하고 오른쪽 패널에서 Variant에서 정의한대로 사용할 수 있습니다. 컴포넌트를 복잡하게 nested하고 어려운 이름을 검색하지 않고 편하게 드롭다운 메뉴에서 골라서 적용할 수 있습니다.
매주 화요일 아침, 16년 차 디자이너가 큐레이션한 디자인 트렌드를 모아보세요.
