사전캠프 TIL | 10월 16일 컴포넌트 프로퍼티

Today I Learned !

 

<컴포넌트 프로퍼티>

가상의 상태에서 컴포넌트의 유연성을 높이는 다양한 속성

 

• Variant (변형) : 컴포넌트의 여러 버전
  마스터 컴포넌트 선택 ->  프로퍼티스 + -> 배리언츠 클릭 -> 속성값 입력 -> 버튼 수정
  -> Auto Layout 으로 자동 정렬
  
  - Priority : Primary (중요버튼) / Secondary (덜 중요한 버튼) / Tertiary  (회색조 버튼)
  - Size : Largre (Title/18) / Small (Title/14) -> 패딩값, 래디어스 조정 (4배수)
  - State : 호버값 (마우스를 버튼에 올려놓았을 때) 
                Default / Pressed (명도 진하게)

• Boolean (참/거짓) : 컴포넌트의 특정 요소를 보이거나 숨길 수 있는 프로퍼티 (on/off, Y/N)
  마스터 컴포넌트에 아이콘 추가 -> Boolean 추가 -> 아이콘 선택 -> Layer 패널에서 Apply Boolean Preoperty 클릭
  -> 복제해서 인스턴스 만들기 
  
  

• Instance Swap (인스턴스 교체) : 인스턴스를 인스턴스로 교체하는 프로퍼티
  버튼의 아이콘을 다양한 아이콘으로 쉽게 교체
  마스터 컴포넌트 선택 -> 프로터피 인스턴트 스왑 추가 -> 대표 아이콘 설정 -> 아이콘 프리셋 추가
  -> 복사 -> 적용

• Text (텍스트) : 컴포넌트 내의 텍스트를 인스턴스에서 쉽게 수정할 수 있는 프로퍼티