[TIL] 24.10.15(화)

피그마 4주차 강의 내용 정리(1~4강)

컴포넌트 프로퍼티

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

 

배리언츠(Variants)

배리언츠도 넓은 관점에선 프로퍼티의 한 종류로, 배리언츠는 '변종'이라는 뜻 / 배리언츠의 vari-는 '변화'와 관련

컴포넌트가 가질 수 있는 또 다른 모습을 만들 수 있게 하는 기능 > 즉, 배리언츠는 컴포넌트의 가상의 상태를 만들 때 사용

 

프로퍼티(Property)

프로퍼티는 '속성'이라는 뜻

디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소를 다룰 때 사용(버튼에서 기본상태+아이콘 이라는 디자인 구조는 그대로 두고 버튼의 글자나 아이콘의 스타일을 바꿀 때 프로퍼티로 조정)

 

컴포넌트 프로퍼티의 종류(배리언츠를 제외하면 총 3가지)

- 불리언(Boolean): Y or N을 선택하는 형식 > 예 또는 아니오, 켜기 또는 끄기 모두 가능(레이어를 껐다 켰다 할 수 있는 속성값)

- 인스턴스 스왑(Instance swap): 인스턴스를 다른 인스턴스로 교체, 주로 버튼 안의 아이콘, 팝업 안의 버튼 등을 교체할 때 사용

- 텍스트(Text): 컴포넌트 안에 있는 텍스트를 수정하기 쉽도록 컴포넌트 속성으로 만들어 주는 기능

 

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

두가지 모두 디자인에 변화가 생긴다는 것은 동일함

컴포넌트에 적용된 파운데이션이 변경되는지를 기준으로 결정하면 됨

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

* 언뜻 보기엔 디자인이 바뀌었지만 색상, 간격, 폰트, 아이콘의 크기 등 파운데이션 값이 바뀌지는 않은 경우 > 프로퍼티

 

버튼 컴포넌트의 의사 상태(상태 프로퍼티는 State, 기본값은 Default로 설정)

위계(hierarchy, priority): 같은 제품 안에서도 버튼을 보면 디자인이 모두 다름 > 버튼의 위계를 나눠놨기 때문 > 버튼의 위계는 hiearchy(하이어라키)=계층, 계급 / priority(프라이어리티)=우선순위 > 두 표현 모두 '얼마나 중요한 행동을 하기 위한 버튼인가'를 의미함> 일반적인 버튼은 프라이머리(Primary, 1순위), 세컨더리(Secondary, 2순위), 터시어리(Tertiary, 3순위)의 3단계를 가짐

* 만드는 제품에 따라 버튼의 위계를 하나만 써도 되고, 2개만 써도 가능함. 제품의 규모에 따라 단계를 유연하게 나눠서 사용해야함

버튼 컴포넌트 세트에 프로퍼티를 세가지 추가했다(프라이어티 / 사이즈 / 상태)

 

버튼 컴포넌트에 아이콘 추가하기(Boolean 사용)

버튼 컴포넌트 세트에 Boolean 프로퍼티를 추가해서 복제한 버튼 인스턴스의 Show_Leading Icon 토글로 텍스트 앞쪽의 아이콘을 껐다 켰다 할 수 있다