피그마 기초 완전 정복 - 컴포넌트 심화 활용 (버튼 컴포넌트 활용 편)

1. 오늘 학습 키워드

- 아이콘 추가하기

- 버튼 아이콘 변경

- 텍스트 변경

---

2. 오늘 학습 한 내용을 나만의 언어로 정리하기

 

<아이콘 추가하기>

- 피그마에서는 다양한 방식으로 아이콘을 활용할 수 있음

- 커뮤니티의 플러그인이나 아이콘 세트를 다운로드하여 사용할 수 있음

 

 

아이콘 컴포넌트로 변경하기

- 여러 컴포넌트 만들기 (Create multiple components)

→ 선택한 여러 개체를 한 번에 각각의 컴포넌트로 변환해 주는 기능

 

 

버튼 컴포넌트에 아이콘 넣기

1. 아이콘 컴포넌트 하나를 선택해 인스턴스를 만들어 넣기

 

2. 아이콘 인스턴스를 드래그해서 컴포넌트 안에 넣기
- 인스턴스는 드래그하거나 복사/붙여넣기로 컴포넌트 내부에 추가할 수 있음

- 드래그할 경우 컴포넌트 영역이 하이라이트되는지 확인하면 배치 여부를 쉽게 확인할 수 있음

 

3. 아이콘 색을 글자 색과 동일하게 맟춰 주기

- 선택 색상 패널(Selection Colors)은 현재 선택한 영역에 있는 모든 색상을 보여주는 패널

- 아이콘만 선택했으므로 아이콘 색상을 확인 및 변경해줌

 

 

True와 False

- 디자인은 빈번하게 수정하게 되는 일이 많음
- 기본값을 True로 하는 것이 편함
- 기본값을 False로 할 경우 디자인 수정 시 아이콘을 다시 보이게 만들어야 하는 불편함이 발생

 

 

아이콘에 프로퍼티 적용하기

프로퍼티 적용 방법
- 컴포넌트의 프로퍼티 패널에서 적용하기

- 프로퍼티를 적용할 요소에서 바로 적용하기

 

⎆ - 프로퍼티를 적용할 수 있는 아이콘

 

프로퍼티 잘못 연결 시 해제 방법
- 프로퍼티에 마우스를 올리면 오른쪽 끝에 속성 분리(해제 아이콘)가 나타남

 

 

 

<버튼 컴포넌트의 아이콘 바꾸기>

 

스왑이 되지 않는 경우

- 인스턴스가 아닌 걸 인스턴스로 교체하려고 했는지 확인해보기

- 인스턴스를 인스턴스가 아닌 걸로 교체하려고 했는지 확인해보기

 

 

 

<버튼 컴포넌트의 텍스트 바꾸기>

 

프로퍼티 적용 확인하기

- 텍스트 프로퍼티의 기본값을 ‘버튼 라벨’로 설정함
→ 해당 프로퍼티가 적용된 텍스트는 자동으로 ‘버튼 라벨’로 표시됨

→ 버튼의 텍스트가 기존 내용에서 ‘버튼 라벨’로 변경된 것을 확인할 수 있음

---

3. 학습하며 겪었던 문제점 & 에러

1) 

 학습 과정 도중 아이콘을 추가할 때 외부 아이콘을 어디서 가져오는지 궁금해졌다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 피그마 커뮤니티(Figma Community)에서 아이콘 플러그인이나 아이콘 세트를 설치해 사용할 수 있다는 것을 알게 되었다. 또한 Iconify, Google Material Icons, Heroicons 등 다양한 아이콘 사이트도 존재하며, SVG 파일을 다운로드해 피그마에 직접 사용할 수도 있다는 점을 알게 되었다.

2)

 학습 과정 도중 프로퍼티를 잘못 연결한 뒤 해제했을 때 어떤 요소에 연결되어 있었는지 기억하지 못하면 어떻게 해야 하는지 궁금해졌다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 컴포넌트의 프로퍼티 목록과 각 레이어에 표시되는 프로퍼티 아이콘을 확인하면 현재 어떤 요소에 프로퍼티가 적용되어 있는지 추적할 수 있다는 것을 알게 되었다. 또한 레이어 이름을 명확하게 작성하고 프로퍼티 이름도 역할에 맞게 지정해두면 관리가 훨씬 수월해진다는 점을 이해하게 되었다.

3)

 학습 과정 도중 인스턴스 스왑이 동작하지 않을 때 인스턴스 여부를 확인해야 한다고 배웠지만, 요소가 많아질 경우 어떤 요소가 문제인지 찾는 방법이 궁금해졌다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 레이어 패널에서 인스턴스 아이콘을 확인하거나 검색 기능을 활용해 특정 요소를 찾을 수 있다는 것을 알게 되었다. 또한 컴포넌트 구조를 단계적으로 확인하면서 문제가 발생한 범위를 좁혀 나가면 많은 요소 속에서도 원인을 비교적 빠르게 찾을 수 있다는 점을 이해하게 되었다.