Study/Figma
피그마 초보 강좌 3편: 컴포넌트와 Variants 활용하기
wawManager
2024. 11. 1. 18:00
728x90
이번 강좌에서는 컴포넌트(Component) 기능을 통해 반복되는 디자인 요소를 쉽게 관리하고 재사용하는 방법을 알아보겠습니다. 특히, 컴포넌트의 Variants(변형) 기능을 활용해 버튼이나 카드 등의 다양한 상태를 한 번에 관리할 수 있습니다. 이 기능을 활용하면 프로젝트 전체에서 일관성을 유지하면서도 효율적으로 디자인을 수정할 수 있습니다.
1. 컴포넌트(Component)란?
컴포넌트는 UI 디자인에서 자주 사용하는 요소(버튼, 카드, 입력 창 등)를 하나의 모듈로 만들어 재사용할 수 있는 기능입니다. 컴포넌트로 만든 요소는 다른 곳에서도 쉽게 복제해 사용할 수 있고, 원본 컴포넌트를 수정하면 복제본들도 자동으로 업데이트됩니다.
컴포넌트를 사용해야 하는 이유
- 일관성 유지: 버튼, 카드 등 자주 사용하는 요소들이 동일한 디자인을 유지합니다.
- 수정 용이성: 원본 컴포넌트를 수정하면 복제본들이 자동으로 업데이트되어 빠르게 수정할 수 있습니다.
- 작업 속도 향상: 복제된 컴포넌트를 바로 사용하므로 디자인 속도가 빨라집니다.
2. 컴포넌트 만들기
1) 컴포넌트로 만들 요소 디자인하기
- 예를 들어 버튼을 컴포넌트로 만들어 보겠습니다. 새로운 버튼을 디자인할 때 직사각형 도형을 그리고 텍스트로 "로그인"을 입력해 버튼을 만듭니다.
- 버튼의 크기, 색상, 텍스트 스타일 등을 설정해 원하는 스타일로 꾸며줍니다.
2) 컴포넌트로 변환하기
- 버튼 요소 전체를 선택한 상태에서, 상단 메뉴에서 Create Component를 클릭합니다. (단축키: Ctrl + Alt + K 또는 Cmd + Option + K)
- 컴포넌트로 변환된 버튼은 왼쪽 레이어 패널에 다이아몬드 모양 아이콘이 표시됩니다.
- 이제 이 버튼은 컴포넌트로 설정되어 다른 곳에서도 쉽게 사용할 수 있습니다.
3) 컴포넌트 복제하여 사용하기
- 컴포넌트를 복제하려면 Alt 키를 누른 상태에서 드래그하거나, Ctrl + D(복제 단축키)를 눌러 복제본을 만듭니다.
- 복제된 요소는 인스턴스로, 원본 컴포넌트와 연결되어 있으므로 원본을 수정하면 인스턴스가 자동으로 업데이트됩니다.
3. Variants(변형) 사용하여 컴포넌트 상태 관리하기
Variants는 컴포넌트의 다양한 상태(예: 기본, 호버, 클릭 등)를 하나의 컴포넌트에서 관리할 수 있도록 도와줍니다. 버튼이나 카드 같은 요소에 Variants를 추가해 사용하면 매우 유용합니다.
예제: 버튼에 Variants 추가하기
- 버튼 컴포넌트를 선택한 후, 오른쪽 패널에서 Add Variant를 클릭합니다. 새로운 변형이 추가됩니다.
- 이 변형을 기본 버튼과 다른 색상으로 변경해 호버 상태로 설정해봅니다.
- 필요에 따라 + Add Variant를 더 클릭하여 클릭 상태나 비활성화 상태를 추가로 만들 수 있습니다.
Variants 설정 관리하기
- 오른쪽 패널의 Variants 섹션에서 상태 간 Property 이름과 값을 설정할 수 있습니다. 예를 들어, Property를 State로 설정하고 값으로 Default, Hover, Pressed를 설정하면 버튼의 각 상태를 명확히 구분할 수 있습니다.
- Variants를 추가한 컴포넌트는 프로토타이핑에서 조건에 맞게 상태를 변경하거나 특정 상황에서 자동으로 전환되도록 설정할 수 있습니다.
4. 컴포넌트 수정 및 업데이트
컴포넌트로 만든 요소는 원본 컴포넌트를 수정하면 해당 인스턴스들이 모두 변경되므로, 반복적인 수정 작업을 크게 줄일 수 있습니다.
원본 컴포넌트 수정하기
- 원본 컴포넌트를 선택한 후, 색상, 텍스트, 크기 등 원하는 속성을 수정합니다.
- 원본 컴포넌트를 수정하면, 이 컴포넌트를 사용하는 모든 인스턴스가 자동으로 업데이트됩니다.
인스턴스 수정 제한 및 해제
- 특정 인스턴스만 다른 속성을 사용해야 할 때, 해당 인스턴스를 선택하고 원하는 속성을 개별적으로 수정할 수 있습니다.
- 예를 들어 버튼 텍스트를 일부 인스턴스에서만 "회원가입"으로 변경하면, 텍스트 속성만 개별적으로 수정되고 나머지 속성은 여전히 원본과 연동됩니다.
5. 컴포넌트와 Variants의 활용 예
- 로그인 화면에서 버튼, 입력 필드, 카드 등을 각각 컴포넌트로 만들어 Variants로 상태를 관리하면 실전에서도 손쉽게 사용할 수 있습니다.
- Variants는 버튼 외에도 토글 버튼, 체크박스, 라디오 버튼 같은 요소의 상태를 하나의 컴포넌트로 관리하는 데 유용합니다.
결론
이번 강좌에서는 피그마의 컴포넌트와 Variants 기능을 활용해 재사용 가능한 UI 요소를 만들고 관리하는 법을 배웠습니다. 컴포넌트와 Variants는 실전 디자인에서 일관성을 유지하면서도 작업 효율을 높이는 필수 기능입니다. 다음 강좌에서는 프로토타이핑과 인터랙션 설정 방법을 알아보겠습니다.
728x90