내일배움캠프_디지털마케터_3기 (사전캠프 13일차)

오늘 배운 피그마 강의

---

 

 

컴포넌트 프로퍼티

컴포넌트 프로퍼티는 의사 상태와 아주 관련이 깊다. 의사 상태란 가짜의, 가상의(Pseude)의 뜻이다.
> 버튼에 마우스를 올렸을 때 색깔이 바뀌는 건, 실제 버튼이 다른 버튼으로 바뀐 것이 아니라 버튼이 가진 가상의 상태를 나타내는 것이다.

 

의미

컴포넌트가 가상의 상태를 가질 때, 형태가 조금씩 변화할 수 있고 컴포넌트 안의 요소가 바뀌는 경우들도 있다. 컴포넌트 프로퍼티는 이런 변화와 변경을 만들 수 있는 피그마 기능이다.

 

컴포넌트 프로퍼티 사용 이유

오토레이아웃 등 피그마를 최대한 활용하여 컴포넌트를 만들고, 인스턴스를 디자인에 적용하는 과정을 반복하기 때문이다. 이 과정에서 하나의 컴포넌트로 더 많은 디자인을 효율적으로 만들어야 하는데 이때 필요한 기능이 컴포넌트 프로퍼티이다.

 

• 배리언츠(Variants)
  배리언츠는 변종이라는 뜻이다. 변화와 관련있는 표현이다. 컴포넌트가 가질 수 있는 또 다른 모습을 만들 수 있게 하는 컴포넌트 기능이다. 즉, 배리언츠는 컴포넌트의 가상의 상태를 만들 때 사용한다.
  
  
• 프로퍼티(Property)
  프로퍼티는 속성이라는 뜻이다. 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다룰 때 사용한다.

 

컴포넌트 프로퍼티 3가지 기능(배리언츠 제외)

• Boolean(눈모양) :
  Y / N 을 선택하는 형식, 참 또는 거짓, 예 또는 아니오, 켜기 또는 끄기 모두 가능하다. 
  컴포넌트 안에 있는 특징 요소를 보이거나 안 보이게 할 수 있는 속성이다. 즉, 레이어를 껐다 켰다 할 수 있는 속성값이다.
  
  
• Instance swap :
  인스턴스를 다른 인스턴스로 교체하는 기능이다. (인스턴스가 아닌 것과는 바꿀 수 없다)
  컴포넌트 안에 다른 컴포넌트의 인스턴스가 있는 경우 또 다른 인스턴스로 교체할 수 있다.
  주로 버튼 안의 아이콘을 다른 아이콘으로 교체할 때 사용한다.
  
  
• Text :
  컴포넌트 안에 있는 텍스트를 수정하기 쉽도록 컴포너틑 속성으로 만들어준다.

> 배리언츠와 프로퍼티를 고르는 기준

컴포넌트에 적용된 파운데이션이 변경되는지를 기준으로 한다.

버튼에 적용한 파운데이션 요소인 색상, 간격, 폰트가 바뀐 경우 - 배리언츠

색상이나 간격, 폰트, 아이콘의 크기 등 파운데이션 값이 바뀌진 않은 경우 - 프로퍼티

 

 

---

 

오늘은 어제 못 끝낸 A/B 테스트 설문조사와 팀원들과 마켓팅 용어집 회의를 통해 발표자료를 만들었다!

중요하다고 생각되는 마케팅 용어를 추려서 정리하는 시간을 가졌다ㅎㅎㅎ

생각보다 의견나누고 만드는 과정이 재밌었다! 우리 팀원들 다 너무 착하셔👼

 

크리스마스 이브지만 난 열심히 공부하지...