피그마 컴포넌트 심화1 (Swap instance, Property)

**모든 내용은 피그마튜터 강의를 듣고 혼자서 복습 한 것입니다 ! 유튜브에 '피튜브' 추천해요.

 

스왑 인스턴스 (Swap instance)

인스턴스를 다른 인스턴스로 바꿔주는 기능

이미지나 아이콘만 변경하고 싶을 때 쓰면 된다.

 

 

예를 들어, 나머진 그대로인데 아이콘만 변경하고 싶을 경우에 사용할 수 있다.

단, 모든 아이콘과 바꾸고 싶은 모듈(아이콘+텍스트 조합 최소단위)을 컴포넌트화 해야한다.

그리고 활용할 때는 당연히 인스턴스에다 해야한다!! (마스터 컴포넌트 원본은 별도로 관리한다.)

 

프로퍼티 (Property)

프로퍼티의 뜻은 '속성'이다. '속성'은 사물이 가진 특징이나 성질을 일컫는다.

그래서 피그마에서 사용하는 프로퍼티는 이미 완성된 컴포넌트에 어떠한 필요한 속성을 더해주는 기능이라고 보면 쉽다.

컴포넌트에 플러스 알파로 옵션기능을 넣어주는 것이다!

 

1. 텍스트 프로퍼티 (Text properties)

텍스트 레이어에 프로퍼티 옵션을 주어서 여러개의 인스턴스에 적힌 텍스트를 한번에 바꾸어 주는 기능이다.

버튼 텍스트, 인풋텍스트의 Place holder, 헬프 텍스트 등 텍스트 레이어가 반복되는 곳에 적용한다.

피그마가 새롭게 업데이트 되어서 인터페이스가 조금 달랐다. 그래서 연습용 버튼을 만들어보았다.

 

 

연보라색 연습용 버튼을 컴포넌트로 만든 후 프로퍼티를 줄 텍스트 부분만 클릭하고, 오른쪽 텍스트 패널에서 Create text property (=핑크색 동그라미)를 누르면 Create component property 모달창이 뜬다.

Name값에는 Button을, Value값에는 연습용이라고 입력해보았다.

 

 

인스턴스 두개를 꺼냈다. 핑크색 사각형 부분에는 수정할 텍스트를 입력할 수 있다. 

메롱 이라고 입력하니까 두개 텍스트가 후루룩 바뀌었따.

만약 인스턴스가 너무 많거나 여러 프레임에 걸쳐 중구난방으로 위치해있을 때는 인스턴스 하나를 클릭하고 command + / 를 눌려서 select all with same instance를 입력하면 전부 다 찾아준다!

 

2. 불리언 프로퍼티 (Boolean property)

불리언(Boolean)이란 오직 참(True)과 거짓(False)만을 구분하는 논리값을 뜻한다.

프로퍼티 특정요소를 참과 거짓 값으로 on/off 토글을 만들 수 있다.

 

주로 버튼이나 모듈의 아이콘 또는 이미지에 적용을 한다. 옵션을 적용해서 끄고 켤 수 있다. 

ex) 토글버튼 on/off, 모듈 내 아이콘 숨김/노출 처리 등

 

그럼 적용해보자!

옵션을 주고자하는 모듈전체를 컴포넌트로 만들고 불리언 프로퍼티를 적용시킬 이미지만 클릭하여서 오른쪽 Layer 패널에 Create boolean property(=핑크색 사각형)을 누른다.

그리고 모달창이 뜨면 네임값을 이미지라고 써두고 프로퍼티를 만든다.

인스턴스 꺼내오면 이미지 부분에 토글버튼이 생긴것을 확인 할 수 있다. 토글버튼을 끄면 숨김처리가 된다.

 

3. 인스턴스 스왑 (Instance swap)

스왑 인스턴스 기능을 좀 더 편리하게 사용할 수 있는 기능.

하다보니 전부 비스무리하다는 느낌이 있넹..

 

모듈과 아이콘들 모두 컴포넌트로 만든 후, 모듈에서 바꿔 줄 부분을 선택한다.

그리고 create instance swap property(=핑크색 사각형)을 클릭한 후,

preferred values 에서 플러스 버튼을 눌러주고 바꾸고싶은 아이콘들에 체크해준다 (=빨간색 사각형)

 

Nested instances에 뜨는 아이콘들은 컴포넌트로 이미 만들어져있는 것들이다. 바꾸고싶은 아이콘들을 모두 체크하면 여러가지 모듈을 만들 수 있다.

이렇게 말이다 !! 캬캬 끝

 

너무 길어져서 variant 부분은 다음 글에 작성할게요 !