[피그마 강의] 4주차: 컴포넌트 프로퍼티, 버튼 컴포넌트 이해하기

 

4-2) 컴포넌트 프로퍼티의 이해

 

• 의사상태 복습: (예시) 버튼에 마우스를 호버했을 때, 색깔이 바뀌는 것은 실제 버튼이 바뀐 게 아니라 버튼이 가진 가상의 상태를 나타내는 것이다. 

 

컴포넌트 프로퍼티란?

• 컴포넌트가 가상의 상태를 가질 때, 형태가 변화하거나 or 컴포넌트 안의 요소가 바뀌는 경우가 있다. 컴포넌트 프로퍼티는 이런 변화와 변경을 만들 수 있는 피그마 컴포넌트 기능이다. 
  
  
• 사용하는 이유: 
  • 피그마에서 UI를 디자인하는 것은 컴포넌트를 만들고 인스턴스를 다루는 것과 밀접한 관련이 있다. 
  • 오토레이아웃 등 피그마를 최대한 활용해서 컴포넌트를 만들고, 인스턴스를 디자인에 적용하는 과정을 반복하기 때문이다. 
  • 위 과정에서 하나의 컴포넌트로 더 많은 디자인을 효율적으로 만들어야 하는데, 이때 필요한 기능이 컴포넌트 프로퍼티다. 
    
    
• 배리언츠와 프로퍼티 두 가지로 나눌 수 있다. 
  • 배리언츠: 컴포넌트가 가질 수 있는 또 다른 모습을 만들 수 있게 하는 컴포넌트 기능이다. 컴포넌트의 가상의 상태(= 의사상태)를 만들 때 사용한다. 
    

    

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

  • 프로퍼티: 속성이라는 뜻으로, 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다룰 때 사용한다. (밑에 예시를 보면 알 수 있듯이, 기본상태 + 아이콘 이라는 디자인 구조는 그대로 두고 버튼의 글자나 아이콘 스타일을 변경할 때 프로퍼티로 조정한다. )

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

 

컴포넌트 프로퍼티 알아보기

• 베리언츠 제외하면 피그마 컴포넌트 만들 때 설정할 수 있는 프로퍼티는 3가지다. 
  버튼을 만들고, Propertiest 의 + 버튼을 누르면 아래 3가지 목록이 뜬다.
  • Boolean: 컴포넌트 안의 특정 요소들을 보이게 하거나 안 보이게 할 수 있는 속성 => 레이어를 껐/켰다 할 수 있는 속성값
  • Instance swap: 인스턴스를 다른 인스턴스로 교체하는 기능으로, 주로 버튼 안의 아이콘, 팝업 안의 버튼 등 교체할 때 사용
    (인스턴스가 아닌 것과는 바꿀 수 없다!!)
  • Text: 컴포넌트 안에 있는 텍스트를 수정하기 쉽도록 컴포넌트 속성으로 만든다. 
    
    
• 베리언츠로 만들 지, 프로퍼티로 만들 지
  • 💡 파운데이셔 요소인 색상, 간격, 폰트가 바뀌면? => 배리언츠
  • 💡 언뜻 보기엔 디자인이 바뀌었지만, 색상이나 간격·폰트·아이콘의 크기 등 파운데이션 값이 바뀌지 않았다면? =? 프로퍼티

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

 

 

4-3) 버튼 컴포넌트의 의사 상태 만들기

 

버튼의 위계 배리언츠 만들기

• 위계: '얼마나 중요한 행동을 하기 위한 버튼인가' 를 담고 있다. 
  버튼의 위계: hierarchy(계층이나 계급), priority(우선순위) 라고 쓸 수 있다. 
• 즉, 우리 제품에서 사용자가 반드시 해야하는 중요한 행동이라면 가장 돋보이는 1순위의 버튼을 쓰고, 중요하지 않을 수록 3순위의 버튼을 사용한다. 
• 일반적인 버튼: 프라이머리, 세컨더리, 터시어리의 3단계를 가진다. 

 

직접 만들어 보기

• 보통 세컨더리는 프라이머리의 색을 아웃라인으로 하거나 배경색을 연하게 한다. 
• Pressed 할 때 어떻게 변경해도 되지만, 변경되는 버튼이 모든 버튼에 일괄적으로 똑같이 적용되어야 한다.