UI\UX 공부/figma강의 정리

[4강] 버튼에 아이콘 넣기/바꾸기

아노말로카리스 2025. 7. 15. 20:50

 

버튼에 아이콘 추가하기

 

 

 

버튼에 넣은 아이콘 변경하기

 

  • 껐다/켰다 하기.

 

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

 

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

 

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

 

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

 

만들어 둔 프로퍼티를 선택해서 적용.

 

  • 다른 아이콘으로 바꾸기.

 

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

 

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

 

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

 

이후 프로퍼티의 생성을 확인.

 

 

 

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

 

 

이후 제대로 작동하는 지 확인하기 위해 기존 컴포넌트의 인스턴스를 만들고, 프로퍼티를 통해 아이콘의 모양을 변경할 수 있다는 것을 확인할 수 있다.

 

 

위의 기능들은 나중에 동일한 프로퍼티의 다른 디자인이 필요할 경우 유용하게 사용할 수 있다.