버튼에 아이콘 추가하기





버튼에 넣은 아이콘 변경하기
- 껐다/켰다 하기.

컴포넌트를 선택하고 프레임 속성 패널의+를 누른다.

프로퍼티 메뉴에서 Boolean을 선택하고 이름을 작성. 기본 값value은 아이콘을 보이게 할려면 True, 숨기려면 False로 만들어 준다.

프로퍼티 패널에 불리언 프로퍼티가 새로 추가된 것을 확인.

이후 아이콘을 선택해서, 우측의 Appearance 패널의 ⎆ 아이콘을 클릭.

만들어 둔 프로퍼티를 선택해서 적용.
- 다른 아이콘으로 바꾸기.

컴포넌트를 선택하고 프레임 옵션 패널의 + 를 눌러 프로퍼티 메뉴에서 Instance swap을 선택



프로퍼티의 이름을 작성하고, 기본값이 될 아이콘을 목록에 추가한다.


목록을 다 넣었으면, 이 프로퍼티의 기본값이 될 아이콘을 지정. 예시에서는 bell을 이용했으니 기본값으로 bell을 지정.
이후 프로퍼티의 생성을 확인.

아이콘을 선택하고, 디자인 패널에서 인스턴스 이름이 있는 패널의 ⎆ 아이콘을 눌러 만든 프로퍼티를 선택.


이후 제대로 작동하는 지 확인하기 위해 기존 컴포넌트의 인스턴스를 만들고, 프로퍼티를 통해 아이콘의 모양을 변경할 수 있다는 것을 확인할 수 있다.
위의 기능들은 나중에 동일한 프로퍼티의 다른 디자인이 필요할 경우 유용하게 사용할 수 있다.
'UI\UX 공부 > figma강의 정리' 카테고리의 다른 글
| [5강] 프로토타입과 프로토타이핑 (0) | 2025.07.16 |
|---|---|
| [4강] 합성 컴포넌트와 네스티드 인스턴스 (0) | 2025.07.16 |
| [4강] 02. 버튼 컴포넌트 (1) | 2025.07.14 |
| [4강] 01. 컴포넌트 프로퍼티 이해 (0) | 2025.07.14 |
| [3강] 03. 마스터 컴포넌트와 인스턴스,디자인 시스템 . (0) | 2025.07.11 |