[피그마 강의] 4주차: 버튼 컴포넌트에 아이콘 추가/교체하기, 텍스트 바꾸기, 합성 컴포넌트와 네스티드 인스턴스, 컴포넌트 합체와 분리 이해하기

 

4-4) 버튼 컴포넌트에 아이콘 추가하기

 

실습: 아이콘 추가하기

• 아이콘 모두 잡고 컴포넌트로 만들면 안되고 --> 아이콘들이 개별적으로 컴포넌트로 만들어야 한다. --> 컴포넌트 옵션을 선택하고 여러 컴포넌트로 만들기를 눌러야 한다. 
• 만든 컴포넌트를 복제하려면 alt 누르면 복제가 된다. 
• 복제된 인스턴스는 이름이 안보이고, 마스터 컴포넌트만 이름이 보인다. 
• 버튼 컴포넌트에 불리언 추가 (True로 해놓는 게 좋음 -> 나중에 수정할 때 다시 켜야 하니까)

• 버튼 아이콘 눌러서 appearance 외형 -> 위에서 추가한 불리언 선택

• 복사해서 불리언 껐다, 켰다가 되는 지 확인해본다. 

 

 

4-5) 버튼 컴포넌트의 아이콘 교체하기

 

실습: 아이콘 교체하기

• 컴포넌트 속성 추가-> 인스턴트 교체
• 아이콘 선택하고 상단의 인스턴스 교체 

• 그럼 다음과 같이 이름이 변경된다.

• 버튼 복사해서 살펴보면 다음과 같이 내가 등록한 아이콘들이 표시되며, 교체해서 사용이 가능하게 된다. 

• 주의할 점: 스왑이 안된다면 인스턴트끼리 교체하려고 하는 게 맞는 지 확인해야 한다! 

 

4-6) 버튼 컴포넌트의 텍스트 바꾸기

 

실습: 텍스트 바꾸기

• 이전에는 버튼에 텍스트를 직접 수정함 -> 보기 좋지 않음
• 컴포넌트 패널에서 관리할 수 있도록 변경해야 한다. 

 

• 컴포넌트 속성 추가-> 텍스트 선택
• 버튼의 텍스트 선택 -> 앞에서 만든 버튼 라벨 적용

• 마찬가지로 버튼 복사해서 살펴보면 쉽게 수정이 가능하다. 

 

 

4-7) 합성 컴포넌트와 네스티드 인스턴스

 

합성 컴포넌트란?

• 컴포넌트들은 대부분은 파운데이션 요소들을 모아 만드는 것이다. 
• 하지만 파운데이션이 아니라 컴포넌트를 모아 또 컴포넌트를 만드는 경우가 있는데, 이를 합성 컴포넌트라고 한다.
  

  

  출처: 체계적으로 배우는 피그마 기초 완전 정복 (4)_합성 컴포넌트 예시

• 합성 컴포넌트에는 바텀시트, 다이얼로그, 리스트, 카드, 탭 등 복잡한 구조의 컴포넌트들이 있다. 

 

 

네스티드 인스턴스란?

• 컴포넌트를 만들면 컴포넌트에 프로퍼티를 적용(텍스트, 불리언, 인스턴스 스왑, 배리언츠 등)할 수 있다. + 우측 프로퍼티 패널에서 바로 조작할 수 있음
• 만약 이 컴포넌트가 다른 컴포넌트의 재료로 쓰인다면?
  
  • 아래와 같이 팝업 컴포넌트 안의 버튼 컴포넌트를 따로 선택해야 하는 번거로움이 생긴다. -> 하위 컴포넌트 속성을 조작하는 것이 어려움

출처: 체계적으로 배우는 피그마 기초 완전 정복 (4)

• 그럴 때 네스티드 인스턴스, 감싼 인스턴스 기능을 사용한다. 
• 네스티드 인스턴스는, 재료로 쓰인 컴포넌트를 하위 컴포넌트 + 본체를 상위 컴포넌트라고 봤을 때, 상위 컴포넌트에서도 하위 컴포넌트 속성을 조작할 수 있도록 하는 기능이다.  

 

탭 컴포넌트란?

• 컴포넌트의 종류 중 네비게이션에 해당하는 컴포넌트다. 
• 탭 컴포넌트는 현재 화면을 전환해주는 요소다. 
• 탭의 구조
  

  

  출처: 체계적으로 배우는 피그마 기초 완전 정복 (4)

  • 탭은 개별 아이템인 탭 메뉴 + 탭(메뉴를 모아 만드는)으로 구성할 수 있다. 
  • 탭은 인디케이터와 라벨/레이블로 이루어져 있다.
    - 인디케이터: 탭이 선택되어 있는 지 알려주는 표시자
    - 라벨/레이블: 탭 제목을 나타내는 텍스트로, 탭 이름이라고 불러도 무방함
• 탭 디자인의 다양함

💡탭은 선택된 것과 선택되지 않은 것을 명확하게 구분할 수 있어야 한다.

• • 위를 만족하면 어떤 디자인이라도 괜찮다. 
• 탭 만들기
  • 텍스트 만들기 + 오토 레이아웃 -> 복사해서 두 개로 만들기
  • 둘 다 잡은 상태에서 -> 컴포넌트 옵션 선택 -> 컴포넌트 세트 만들기 선택
  • 프로퍼티 속성 이름을 Active 로 변경
  • 베리언츠 각각의 이름은 On, Off로 변경
  • On 은 외곽선 추가(아래쪽만 설정)

  • 

  • on/off 복사해서 오토레이아웃 + 컴포넌트로 만들기 -> 이름은 Tab으로 변경
  • off 두개 더 추가로 복사하기
  • Tab의 속성 추가 -> 맨 아래 중첩된 인스턴스 누르기
  • 전부 다 선택해주면 탭 컴포넌트 안의 컴포넌트를 조작할 수 있음
  • 복사해서 확인해보면 밖의 패널에서 안의 on/off를 조작할 수 있음 

 

 

4-8) 컴포넌트 합치고 분리해보기

 

컴포넌트 합치기

• 컴포넌트 세 개를 동시에 잡으면 결합하기가 나타난다. 

• 새 컴포넌트는 드래그 해서 추가하면 된다. 

 

컴포넌트 분리하기

• 드래그해서 끌어내린다. 
• 밖으로 꺼내진 컴포넌트의 이름을 보면 처음에 만들었던 이름과 다르게, 폴더 안으로 이름이 변경된 것을 볼 수 있다. 컴포넌트의 배리언츠는 특정 컴포넌트의 하위 폴더처럼 구분된다는 뜻이다.