[Figma] 피그마 프로퍼티를 이해해보자-3 (figma property 사용이유, 불리언, 인스턴스 스왑, 텍스트)

첫 번째 포스팅은 컴포넌트, 두 번째 포스팅 스왑인스턴스에 이어 이번 포스팅은 피그마 프로퍼티에 대해 알아보겠다.

 

프로퍼티(figma property)란?

피그마 프로퍼티란?

 

프로퍼티는 "속성, 성격"이라는 의미를 가진다. 이미 완성된 컴포넌트에 속성을 더해주는 기능이다.

컴포넌트에 옵션을 주고 컴포넌트의 경우의 수를 줄여줄 수 있다. 

 

 

 

컴포넌트 프로퍼티의 4가지 종류와 사용방법 

컴포넌트 프로퍼티별로 각각 다른 특성을 가지고 있으며, 각각의 사용법도 다르다.

1. '텍스트, 불리언, 인스턴스 스왑' 프로퍼티는 옵션처럼 추가해서 적용하는 방법이며

2. '베리언트' 프로퍼티는 커스텀해서 사용하는 방법이다.

아래에서 자세하게 확인할 수 있다.

 

 

 - Text properties(텍스트)

✔ 텍스트 프로퍼티  
컴포넌트텍스트 레이어에 속성을 더해주어서  여러 인스턴스의 텍스트를 한 번에 수정할 수 있는 방법이다.

🔎 적용가능한 요소 
 버튼 텍스트, Input의 Place holder, 헬프 텍스트 등 텍스트 레이어가 반복되는 요소에 적용된다.

 

필자가 정리한 텍스트 프로퍼티 사용방법은 아래와 같다.

피그마에서 텍스트 프로퍼티를 적용하기 위한 버튼, 레이아웃에 적용해 보자. 

디자인 및 프로토타입 툴이기에 적용해 보는 것만큼 좋은 학습방법은 없다. 

 

 

 - Boolean properties (불리언)

✔ 불리언 프로퍼티 (Boolean : 참 or 거짓을 구분하는 명제)
컴포넌트에서 반복되는 요소를 토글 버튼으로 on/off 할 수 있는 기능이다. 

🔎 적용가능한 요소 
주로 버튼이나 모듈의 아이콘 또는 이미지에 적용된다. 
모듈에서 중복+응용되는 요소가 있다면 응용 되는 부분에 옵션을 적용하여 끄고 켜며 사용할 수 있다. 

 

아래는 필자가 정리한 불리언 프로퍼티 사용방법이다. 

불리언 프로퍼티 사용방법

 

 

 - Instance swap properties (인스턴스 스왑)

✔ 인스턴스 스왑 프로퍼티
스왑 인스턴스 기능을 더 편리하게 사용할 수 있도록 옵션을 주는 기능이다.
(즐겨찾기, 모듈에서 바로 선택하기 등의 기능이 있다. )

🔎 적용가능한 요소 
스왑 인스턴스를 적용해야하는 모든 곳에서 적용할 수 있다. 
주로 이미지, 아이콘 등을 즐겨찾기 하고 바로 바꿀 수 있도록 인스턴스 스왑 옵션을 설정한다. 

 

아래는 필자가 정리한 인스턴스 스왑 프로퍼티 사용방법이다.  

 

 - Variant properties (베리언트)

✔ 베리언트 프로퍼티 
컴포넌트들을 카테고리별로 묶어 그룹핑하고, 필요할 때 꺼내어 쓰는 기능이다.  

⭐ 다음 포스팅에서 이어질 예정이다. 

 

 

 

프로퍼티 사용 시 참고할 부분

1. 프로퍼티 옵션 적용은 "마스터 컴포넌트"에서 한다.
2. 프로퍼티 옵션을 화면에 적용할 때에는 "인스턴스"를 활용한다. 

 

 

 

↓ 함께보면 좋은 피그마 콘텐츠↓

[Figma] 피그마 컴포넌트 기초에 대해 알아보자-1(figma component사용방법, 사용팁)

[Figma] 피그마 컴포넌트 응용기능인 스왑 인스턴스에 대해 알아보자-2(figma swap instance사용방법, 사