[4강] 01. 컴포넌트 프로퍼티 이해

 

컴포넌트 프로퍼티 

• 의사 상태에서, 컴포넌트는 가상의 상태를 가질 때, 형태가 조금씩 변화하거나 내부 요소가 바뀌는 경우에 사용되는 피그마의 기능.
• 하나의 컴포넌트로 더 많은 디자인을 효율적으로 만들기 위해서 필요한 기능이다.
• 배리언츠 : 컴포넌트를 다른 모습으로 만들기 위해 컴포넌트를 가상의 상태로 만들 때 사용하는 기능.
• 프로퍼티 : 속성. 디자인 구조가 바뀌지 않는 선에서 변경 가능한 요소들을 다룰 때 사용.
• 배리언츠 이외의 설정 가능 프로퍼티 종류
  Boolean : 컴포넌트 내 특정 요소를 보이게 하거나 안 보이게 할 수 있는 속성
  Instance swap : 컴포넌트 내에 다른 인스턴스가 있으면, 또 다른 인스턴스를 해당 인스턴스로 교체하는 기능.
  Text : 컴포넌트 내 텍스트 수정에 용이하도록 컴포넌트 속성으로 만들어준다.
• 배리언츠와 프로퍼티 : 둘 다 디자인에 변화가 생기는 건 동일. 컴포턴트에 적용된 파운데이션이 변경되는지를 기준으로 한다.
  디자인이 바뀌었으나, 색, 간격, 폰트, 아이콘 크기 등 파운데이션 값이 바뀌지 않으면 프로퍼티, 바뀐다면 배리언츠로 조정한다.

위계 : 우선 순위

• '얼마나 중요한 행동을 하기 위한 건가'에 대해 중요한 행동 정도에 따라 우선순위를 거쳐서 나눈 것.
• 일반적으로 프라이머리(1순위), 세컨더리(2순위), 터시어리(3순위)의 단계를 가진다.
• 제품에서 사용자가 반드시 해야하는 중요한 행동이라면 가장 돋보이는 1순위의 버튼을 쓰고, 중요하지 않을 수록 3순위의 버튼을 사용한다.