이번 피그마의 핵심 기능은 컴포넌트, 네스팅, 스마트 셀렉션입니다. 각각의 기능은 피그마를 더욱 효율적으로 사용할 수 있도록 돕는 역할을 합니다. 컴포넌트로 요소의 속성을 하나의 기준으로 설정한 후에 그다음에 생성한 인스턴스를 더욱 편리하게 작업할 수 있습니다. 네스팅은 같은 모양의 요소에서도 다르게 수정해야 하는 아이콘의 그림을 변경해 주는 작업을 합니다. 마지막으로 스마트 셀렉션은 각 요소 간 간격은 유지하면서 요소의 순서를 변경하는 작업을 도와줍니다.
1. 컴포넌트 알아보기
컴포넌트는 재사용 할 수 있게 만든 UI의 묶음입니다. 예를 들어, 버튼을 만들었으면 전체 이미지를 마우스 오른쪽 버튼을 클릭한 후 Create component를 눌러주거나 단축키를 사용하면 컴포넌트를 만들 수 있습니다. Windows에서는 Ctrl + Alt + K, MacOS에서는 Cmd + Option + K를 누르면 됩니다. 이때 왼쪽 레이어 패널을 살펴보면 다이아몬드 네 개가 있는 모양의 아이콘이 생긴 것을 볼 수 있는데 이것이 컴포넌트입니다. 그리고 방금 만든 버튼을 그대로 여러 개 복사한다면 동일한 컴포넌트를 물려받은 인스턴스라는 것이 만들어집니다. 왼쪽 레이어 패널에서 빈 다이아몬드 아이콘이 곧 인스턴트를 의미한다는 걸 함께 알아두면 좋습니다.
인스턴스의 가장 큰 특징은 컴포넌트가 변할 때 같이 변한다는 점입니다. 인스턴스에 색이나 텍스트의 속성을 덮어 씌울 수도 있습니다. 이것을 오버라이드라고 표현합니다. 이때 오버라이드가 적용된 버튼만큼은 전체 컴포넌트의 속성을 따라가지 않게 됩니다. 오버라이드 기능을 활용하면 컴포넌트를 훨씬 유동적으로 사용할 수 있습니다. 컴포넌트와 인스턴스의 연결을 끊는 것도 가능합니다. 인스턴스를 클릭한 상태에서 프로퍼티 탭에서 더보기 아이콘을 클릭해 줍니다. Detach instance로 컴포넌트와의 연결을 해제할 수 있습니다. Reset all changes로는 모든 변경 사항을 초기화할 수 있습니다.
2. 네스팅 알아보기
아이콘 인스턴스처럼 특정 컴포넌트의 인스턴스를 또 다른 컴포넌트 안에 넣는 것을 네스팅이라고 합니다. 네스팅을 잘 활용하면 하나의 인풋 박스이지만 여러 종류의 아이콘 인스턴스를 사용할 수 있는 훨씬 더 유연한 컴포넌트를 만들 수 있습니다. 예를 들어, 회원 가입 UI를 설계한다고 가정했을 때, 이메일, 비밀번호 등 해당 항목을 적는 칸의 맨 앞쪽에 관련 아이콘을 넣는다고 가정해 봅시다. 그럼 하나의 인풋 박스를 여러 개 복사한 뒤, 각 인풋 박스마다 네스팅을 활용하여 내용에 맞는 아이콘 인스턴스를 연결할 수 있는 것입니다.
3. 스마트 셀렉션 알아보기
디자인을 만들다보면 좋은 배치를 찾기 위해 여러 가지 시도를 하게 됩니다. 그 과정에서 요소의 위치를 자주 바꾸는 상황이 발생합니다. 예를 들어, 요소들이 같은 간격으로 배치되어 있는 내비게이션 UI에서 각 요소들 사이의 간격은 유지하되 항목의 순서만 바꾸고 싶다면 어떻게 하는 게 좋을까요? 이럴 때 스마트 셀렉션을 사용하면 좋습니다.
순서를 바꿔야하는 모든 요소를 한 번에 선택해 주면 피그마에서 스마트 셀렉션 기능이 자동으로 활성화됩니다. 이때 마우스를 가져가면 요소들 사이에 핑크색 선이 생기고, 각 요소의 중심에는 분홍색 점이 생깁니다. 이 분홍색 점을 클릭하면서 요소를 드래그하면 요소들 간의 간격을 유지한 채로 순서만 간단하게 바꿔줄 수 있습니다. 또한 선택한 요소들 사이에 세로선을 클릭해서 드래그하면 요소들 간의 간격도 쉽게 조정할 수 있습니다.
게다가 스마트 셀렉션이 활성화되어 있다면 마우스 드래그뿐만 아니라 프로퍼티 패널에서 수치로도 간격을 설정할 수 있습니다. 다만, 스마트 셀렉션 기능은 요소들 간의 간격이 일정할 때만 활성화되는 기능입니다. 따라서 모든 요소의 간격을 일정하게 맞추고 사용해야 합니다. 이럴 때 선택된 요소들을 자동으로 같은 간격으로 배치해 주는 Tidy up이라는 기능을 사용하면 됩니다. 모든 요소를 드래그 한 상태에서 마우스를 가져가면 아이콘이 하나 생깁니다. 이 아이콘을 누르면 같은 간격으로 요소들이 자동으로 정렬이 됩니다. 이 이후부터는 스마트 셀렉션이 활성화되기 때문에 효율적으로 요소 간 순서를 변경할 수 있습니다.
※ 해당 글은 코드잇(codeit)의 [Figma 핵심 기능] 강의 내용에서 참고하여 작성하였습니다.