컴포넌트의 Property를 사용해서 멋진 컴포넌트를 만들어보자

목표

하나의 컴포넌트에서 Property를 사용하여 다양한 형태를 표현하기

실습

step.1

다음과 같이 대충 아이콘스러운걸 각각 컴포넌트로 만들어준다.

step.2

마음에 드는 녀석의 인스턴스를 생성한다.

step.3

• frame 으로 감싸준다. (Option + Command + G)
• 새로운 컴포넌트가 될 녀석이므로 컴포넌트의 이름을 지어준다.
• 컴포넌트로 만들어준다.(Option + Command + K)
• AutoLayout을 걸어준다. (Shift + A)
  

step.4 (Variant)

• 우측 상단에 more actions를 눌러서 add variant를 추가해준다. (Add property 의 플러스 버튼으로도 가능)
  
• 그럼 기존의 마스터가 보라 점선으로 둘러 싸져있다.
• 여기에도 Auto Layout을 걸어주자
• 점섬 안에 요소가 추가 되었는데 이를 복사 붙여넣기하거나 more actions에서 add variant로 새 상태를 추가해주자
  

step.5

• label이라는 text를 생성한다. (T누르고 대충 드래그)
  
• Layers의 label 요소를 드래그해서 아무 variant 맨 뒤에 추가해준다.
• 이제 각 variant tpye에 이름을 정해준다. simple과 named 라고 하겠다.
  • 주의 - variant의 이름 형식은 {propertyname} = {value} 이다.
    

step.6 (Text)

• 마스터에 Text Property 추가하기
  
• 텍스트의 Typography에서 생성한 property 연결하기
  
  

step.7

• named variant를 복붙한 뒤 다음과 같이 추가하기
  
• job이라는 text property추가 후 small-label에 적용

step.8 (Instance Swap)

• 마스터에서 Instance Swap Property 추가
• value에 기본으로 선택할 컴포넌트 선택
• Preferred values에 플러스 버튼으로 사용시 기본 보기항목 선택
  
• Instance swap할 항목 선택(처음에 했어야했는데 순서가 꼬임..)
  
• more actions에서 Apply instance swap property 클릭 후 방금 생성한 property 선택
  

step.9 (Boolean)

• 마스터에 Boolean Property 추가
  

• 선택적으로 안보이게할 요소 선택
  

• Appearance 에서 인스턴스 모양 아이콘(?) 클릭 후 방금 생성한 property 선택
  

결과

• 마스터의 인스턴스 생성
  
• 우측 인스턴스의 Design맨 위에 위에서 추가해준 Property가 보임 (Property 1 이름 깜빡하고 안바꿈...)
  
• 이제 하나하나 클릭해보면 위에서 어떤 것들을 추가 했었는지 확인가능!

마치며

이건 기본적인 사용방법만을 적어둔거고 이를 응용해서 더 복잡하고 멋진 컴포넌트 생성가능

Prototype을 사용해서 인터렉션도 걸 수 있음 (무료는 기능이 제한적)

끝나고보니 내가 만든 컴포넌트가 멋진 외관은 아니다. 나는 거짓말쟁이다.