피그마 이해하기
- 컴포넌트 프로퍼티
1) Boolean
2) Instance swap
3) Text
4) Variants - Variants vs 프로퍼티
- 의사 상태
- 버튼 컴포넌트
- 합성 컴포넌트
- 네스티드 인스턴스
컴포넌트 프로퍼티
▶ 프로퍼티(Property) = 속성, 성격
: 이미 완성된 컴포넌트에 속성을 더해주는 기능
디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다룰 때 사용
▶ 컴포넌트 프로퍼티
: 변화와 변경을 만들 수 있는 피그마 컴포넌트 기능
→ 컴포넌트를 만들고 인스턴스를 다루는 과정과 밀접한 관련
- 의사상태) 컴포넌트는 가상의 상태를 가짐
- 컴포넌트가 가상의 상태를 가짐) 형태가 조금씩 변화할 수 있음
- 컴포넌트 안의 요소가 바뀌는 경우도 있음
▶ 컴포넌트 프로퍼티의 종류
- Boolean → 옵션처럼 추가해서 적용
- Instance Swap → 옵션처럼 추가해서 적용
- Text → 옵션처럼 추가해서 적용
- Variants → 커스텀하여 사용
하나의 컴포넌트에 3종류의 프로퍼티가 있음 (Variants 제외)
▶ Boolean
: Yes or No 를 선택하는 형식
→ 참 or 거짓 / 예 or 아니오 / 켜기 or 끄기 모두 가능
컴포넌트 안에 있는 특정 요소를 보이게 하거나 안보이게 할 수 있는 속성
= 레이어를 껐다가 켰다가 할 수 있는 속성값
▶ Instance Swap
: 인스턴스를 다른 인스턴스로 교체하는 기능
→ 인스턴스를 인스턴스가 아닌 것으로 바꿀 수 없음!
- 컴포넌트 안에 다른 컴포넌트의 인스턴스가 있는 경우, 또 다른 인스턴스로 교체 가능
- 주로 버튼 안의 아이콘, 팝업 안의 버튼 등을 교체할 때 사용
▶ Text
: 여러 인스턴스의 텍스트를 한 번에 수정할 수 있는 방법
→ 텍스트 레이어가 반복되는 요소에 적용
- 일관된 스타일 유지 (폰트 크기, 색상, 줄 간격)
- 수정 시 자동 반영 (컴포넌트 변경 → 모든 인스턴스에 적용)
- 디자인 시스템 연동
- 접근성 고려
- 다국어 대응 (텍스트 구조만 변경하면 되도록 설계 가능)
그냥 텍스트를 클릭하여 수정하게 되면, 텍스트 스타일을 각각 다시 설정해야 함 (협업에선 최악의 경우)
▶ Variants
: 한 컴포넌트 안에서 여러 상태나 타입을 묶어서 관리할 수 있게 해주는 기능
유지보수가 용이하고 컴포넌트 재사용성을 향상시켜 일관성을 유지함
→ 버튼의 크기, 타입, 상태 등을 한 컴포넌트로 통합하여 관리할 수 있음
→ 베리언츠로 묶인 각각의 마스터 컴포넌트들은 서로 다른 프로퍼티를 가짐
- 여러 컴포넌트를 선택
- Combine as Variants
- 속성 패널에서 Property 생성 (Type, State, Size 등)
- 속성값을 조정하며 조합 추가
Variants vs Property
▶ 두 가지 모두 디자인에 변화가 생긴다는 공통점을 가짐
▶ 기준은 파운데이션에 변화가 있냐 없냐로 나뉨
| 구분 | Variants | Property |
| 파운데이션 변화 O (색상, 크기, 스타일 등 UI 자체 변화) |
사용 추천 | 사용 비효율 |
| 파운데이션 변화 X (텍스트, 아이콘 유무, 토글의 on/off) → 시각적 스타일은 동일, 내용이나 조건에 따라 보이기만 다른 경우 |
과한 사용 | 사용 적합 |
▶ 예시
| Variants | Property |
| 버튼의 색상이 바뀜 (Primary → Secondary) |
텍스트 변경 (등록하기 → 삭제하기) |
| 카드의 배경 스타일이 다름 (Basic → Higjlighted) |
아이콘 유무 |
| 토글 스위치 on / off 상태에 따른 색상과 위치 변화 | 설명 추가 여부 |
| 체크 상태 Boolean |
의사 상태
▶ 의사란?
: 가짜의, 가상의라는 의미로 컴포넌트의 가상의 상태를 표시할 때 사용
- Hover : 마우스를 요소 위에 올렸을 때
- Active : 요소를 클릭하고 있는 중일 때
- Focus : 요소에 포커스가 맞춰졌을 때 → 텍스트 입력 시
- Disable : 비활성화 상태일 때
- Checked : 체크박스나 라디오버튼이 선택된 상태일 때
▶ 의사상태의 중요성
- UX 향상 : 사용자 반응을 시각적으로 피드백
- 디자인 시스템 표준화 : 상태별 스타일을 정리함으로써 UI 일관성 유지
- 개발 협업 용이 : 상태별 컴포넌트 제공의 명확함
버튼 컴포넌트 프로퍼티 설정
▶ 버튼의 위계 베리언츠 생성
- Variants 안에 있는 각각의 컴포넌트(인스턴스)에 Variant Property 를 다르게 설정
- Property 이름을 Priority 로 지정
- 그 안의 각 컴포넌트의 값을 Primary, Secondary, Teritiary 로 지정
▶ 버튼 크기 / 상태 베리언츠 생성
크기
: 일반적으로 Large, Medium, Small 의 3가지 단계 사용
- 컴포넌트를 선택하고 패널에서 베리언츠를 하나 더 추가
- Name 에는 Size / Value(속성) 에는 Large
- 버튼 사이즈를 모두 Small 로 변경
- 폰트와 패딩값 조절
→ 만약 Large 버튼이 좌우여백이 24, 상하여백이 16이라고 가정
→ Small 버튼은 4배수 단위에 따라 16과 8
→ 곡률 적용도 마찬가지로 4배수 단위에 따라서 다르게 표현
합성 컴포넌트
▶ 하나 이상의 다른 컴포넌트를 포함하고 조합해서 구성된 컴포넌트
* 컴포넌트끼리 결합해도 여전히 컴포넌트인 경우
* 컴포넌트와 파운데이션을 결합한 컴포넌트인 경우
▶ 합성 컴포넌트 종류 (대부분 복잡한 구조의 컴포넌트)
- 바텀시트
- 다이얼로그
- 리스트
- 카드
- 탭
네스티드 인스턴스
▶ 인스턴스 안에 또 다른 인스턴스가 들어간 구조
: 하나의 컴포넌트 인스턴스 내부에 또 다른 컴포넌트 인스턴스를 포함한 상태
▶ 네스티드 인스턴스를 사용하는 이유
- 디자인 시스템 관리 최적
→ 하위 인스턴스가 마스터 변경 시 자동 반영 - 부분만 교체 가능
→ 상위 인스턴스에서 하위 인스턴스의 텍스트/아이콘 교체 가능 - 확장성 높음
→ 다른 페이지에서도 계속 재사용 가능
▶ 주의할 점
- 마스터 구조에서만 수정 가능
- 오토레이아웃 안에서의 배치 확인
→ 내부 오토레이아웃 설정이 부모한테 영향을 줄 수도 있음
▶ 예시
- 팝업카드 (컴포넌트 or 프레임)
1) 텍스트 인스턴스 : "팝업 제목"
2) 텍스트 인스턴스 : "팝업 본문입니다..."
3) 네스티드 인스턴스 : 아이콘 + 버튼 라벨
탭 컴포넌트
▶ 컴포넌트의 종류 중 네비게이션에 해당하는 컴포넌트로 현재화면을 전환해주는 요소
▶ 탭의 구조
: 개별 아이템인 탭 메뉴와 메뉴를 모아 만드는 탭으로 구성할 수 있음
▶ 탭 컴포넌트
- 머티리얼 디자인 https://m3.material.io/components/tabs/overview
- 우버 디자인 시스템 https://base.uber.com/6d2425e9f/p/2345e5-tabs
- 카본 디자인 시스템 https://carbondesignsystem.com/components/tabs/usage/
- 라이트닝 디자인 시스템 https://www.lightningdesignsystem.com/2e1ef8501/p/1152cf-tabs
▶ 머티리얼 디자인
: 2014년, 구글이 발표한 디자인 시스템
→ 현실세계의 재질(Material)을 모티브로 한 인터페이스 설계 원칙
(빛, 그림자, 깊이 등을 통해 사용자에게 직관적이고 일관된 경험 제공)
'TIL' 카테고리의 다른 글
| 레이아웃과 그리드 시스템 (0) | 2025.04.24 |
|---|---|
| 피그마 이해하기 (5) (0) | 2025.04.21 |
| 피그마 이해하기 (3) (0) | 2025.04.17 |
| 피그마 이해하기 (1) (0) | 2025.04.15 |
| (1) 디자인 입문 _ UXUI란? (0) | 2025.04.14 |