피그마 #33
피그마 #33이번시간에는 피그마에서 가장 중요하게 생각하는 컴포넌트에 대해서 배워보도록할게요. UI 디자인 작업 특성상 유지보수를 위한 잦은 수정이 필요하죠. 그렇기에 꼭 컴포넌트 기능을 알아야합니다. 다양한 예시를 다뤄보면서 컴포넌트 기능을 익혀볼게요
피그마에서 ‘프로퍼티(Property)’란?
프로퍼티는 컴포넌트의 다양한 속성을 조정할 수 있는 기능으로, 컴포넌트를 더욱 유연하게 사용할 수 있도록 도와줍니다. 이를 통해 디자인 시스템을 보다 체계적이고 효율적으로 관리할 수 있습니다. 피그마에서는 아래 네 가지 주요 프로퍼티를 제공합니다.
- Text: 텍스트 변경을 쉽게 관리.
- Variants: 다양한 타입과 상태를 하나의 컴포넌트로 관리.
- Boolean: 요소의 표시 여부를 제어하는 토글.
- Instance Swap: 다른 컴포넌트나 아이콘을 간편하게 교체.
Variants: 컴포넌트의 다양한 타입 관리
Variants란?
Variants는 하나의 컴포넌트에서 사이즈, 컬러, 스타일 등 다양한 타입과 상태를 관리할 수 있는 기능입니다. 이를 활용하면 여러 상태를 가진 UI 요소를 한 번에 관리할 수 있습니다.
활용 예시
버튼 컴포넌트를 예로 들어보겠습니다:
- 사이즈: Small, Medium, Large
- 스타일: Primary, Secondary
- 상태: Active, Hovered, Disabled
설정 방법
- 버튼 디자인을 여러 상태로 복제합니다.
- 모두 선택한 뒤 Combine as Variants를 클릭합니다.
- 우측 패널에서 각 상태를 정의합니다 (예: Size=Small, Style=Primary).
- 이후 인스턴스에서 드롭다운으로 다양한 상태를 쉽게 전환할 수 있습니다.
Boolean: 요소의 표시 여부 토글
Boolean이란?
Boolean은 요소를 표시하거나 숨기는 기능입니다. 토글 방식으로 작동하며, True(보이기)와 False(숨기기) 두 가지 상태를 가집니다.
활용 예시
- 체크박스: 체크 상태(True)와 체크 해제 상태(False) 간 전환.
- 아이콘 표시 여부: 버튼에 아이콘을 추가하거나 제거.
설정 방법
- 컴포넌트 내 특정 레이어를 선택합니다.
- 우측 패널에서 Boolean Property를 추가합니다.
- 토글로 해당 요소의 표시 여부를 조절할 수 있습니다.
Instance Swap: 간편한 컴포넌트 교체
Instance Swap이란?
Instance Swap은 컴포넌트 내부에서 다른 요소(아이콘, 컴포넌트 등)를 간편하게 교체할 수 있는 기능입니다. 이를 통해 UI 요소를 더욱 빠르고 유연하게 관리할 수 있습니다.
활용 예시
아이콘을 포함한 버튼 컴포넌트를 만들 때:
- 버튼에 사용 가능한 아이콘 목록을 등록.
- 필요에 따라 아이콘을 변경할 수 있도록 설정.
설정 방법
- 컴포넌트 내부에 교체 가능한 요소를 배치합니다.
- 해당 요소를 선택한 뒤 Instance Swap Property를 추가합니다.
- 교체 가능한 컴포넌트 목록을 등록합니다.
디자인 작업을 하다 보면 동일한 텍스트를 여러 곳에서 변경해야 하는 경우가 많습니다. 피그마에서는 이 작업을 빠르게 수행할 수 있습니다.
Text: 텍스트 변경 관리
Text란?
Text 프로퍼티는 컴포넌트 내부의 텍스트 콘텐츠를 간편하게 변경할 수 있는 기능입니다. 이를 통해 인스턴스에서 텍스트를 직접 수정하거나, 기본값과 변경 가능한 텍스트를 체계적으로 관리할 수 있습니다.
활용 예시
버튼 텍스트를 설정할 때:
- 기본값: “확인”
- 변경 가능: 자유롭게 입력 가능한 상태.
설정 방법
- 기본값을 설정하고, 인스턴스에서 변경할 수 있도록 구성합니다.
- 텍스트를 포함한 컴포넌트를 생성합니다.
- 텍스트 요소를 선택한 뒤 Text Property를 추가합니다.
