피그마는 쉬운툴이다. 제대로 알려하기 전까지.
앞선 내용에서 피그마의 컴포넌트와 베리언츠에 대해서 알아보았을 것이다. 뭔가 편하다기 보단, 어질어질하다. 이게 쉽다는 사람들은 참 똑똑한 사람들이다.
프로퍼티가 뭔지 알거나, 제대로 알아야겠다고 느낀 사람이라면 대강 이게 베리언츠와 관련된 개념이라는걸 알거다.
인터렉티브 웹
누르면 변하고, 움직이고, 사용자에게 뭔가를 알려주려는 사이트를 만들고싶어서 찾아봤다.
코딩을 하다 지치다, 결국 uxui 디자인으로 넘어와 공부를 하고 이 글을 쓴다.
아래 움짤을 통해 이 기능으로 변하는 버튼을 만든 것을 보자. 아직도 이런 쉬운 기능을 구현하려고 코딩을 시작했다는게 어이가 없다.
사실, 프로퍼티를 설정하지 않아도 이렇게 변한다. 베리언츠만 지정해줘도 되기 때문이다.(베리언츠는 해도 프로퍼티는 안해도 된다? 완전 잘못된 이해)
포스트를 작성하는 와중에도 내가 이해를 잘못했다는걸 깨달았다. 이정도로 헷갈리는 개념이다. 다음은 내가 뇌피셜로 이해한 설명이다.
프로퍼티는 한 요소의 특정 상태를 결정한다. 버튼, 패스워드 입력창 등을 선택할 때의 강조 효과를 프로퍼티 상에서 여러 상태로 정의할 수 있다는 뜻이다.
1. 컴포넌트에서
객체를 선택했을때, Properties라는 특성창이 추가가 된다. + 버튼을 눌러보자.
프로퍼티에는 총 4가지 종류가 있고, 컴포넌트에선 4가지 프로퍼티를 모두 사용가능하다. 각각의 프로퍼티가 무엇인지는 있다가 더 알아보자.
2. 인스턴스에서
인스턴스에서 아이콘 여러개 중에 원하는 걸 선택해야 할 때, 다음과 같은 선택지가 있다.
a. varients에 원하는 아이콘들을 적용한 변경안을 갯수만큼 만들 것
b. 아이콘 세트를 각각 컴포넌트로 만들고, 버튼 컴포넌트, 혹은 아이콘을 적용할 컴포넌트에서 인스턴스를 하나만 만들어도 원하는 아이콘을 선택해서 사용하도록 '인스턴스 스왑 프로퍼티'를 사용할 것.
b가 만들어야할 갯수도 훨씬 적고, 단순히 아이콘만 선택지가 아닌, 폰트, 색깔에 따라 여러 선택지가 존재한다면 3개 폰트, 3개 색깔일 때, 9x3(아이콘 경우) 개의 베리언츠를 만들게 아니라, 9개만 만들고 아이콘은 인스턴스 스왑 프로퍼티를 사용하면 된다.
만드는 법
개별 아이콘을 각각 컴포넌트로 등록 > 아이콘 하나를 인스턴스로 만들어 원하는 버튼에 적용 > 해당 인스턴스에 인스턴스 프로퍼티를 추가 > 원할 때 변경
굵게 강조한 저 단계에서 어느 메뉴를 선택할지를 몰라서 명확히 다른 요소, 다른 프로퍼티와 구분할 줄 아는게 이번 포스트의 목적이다.
>각각 컴포넌트로 만드는 방법에는 두 가지가 있다.
첫번째로 각각 컴포넌트로 만들어주는 방법. 현재 인스턴스 상태인 예시 아이콘이 있다. 컴포넌트 자격을 얻지 못했다는 뜻이다.
아래 캡처본과 같이 아이콘을 선택하고 사진상 오른쪽 위(실제 화면상 가운데 위)의 컴포넌트 버튼을 클릭해 만든다.
혹은, 여러개를 선택해 한번에 각각의 컴포넌트로 만들 수 있다. 이를 Create multicomponent라고 한다.
>인스턴스로 하나의 아이콘을 사용한다.
> 아이콘을 선택하고 오른쪽 사이드바에 생긴 레이어 특성 중에 강조한 부분을 선택하자.
특성이 더럽게 많다. 하하 심지어 이게 어떤 요소를 선택했냐에 따라서 생겼다가 사라졌다가 한다. 환장한다
cart는 내가 작성한 레이어 이름 icon/cart 에서 따온 듯 하며, 하얀색 배경의 다이아몬드는 이것이 컴포넌트가 아니라, 인스턴스임을 나타낸다. 어쨌든 저 Create instance swap property 버튼을 눌러보자.
> 인스턴스 스왑 프로퍼티 만들기
+ 버튼을 눌러 추가하고 싶은 인스턴스를 선택하자. 웃긴건, 이때 고를 수 있는건 컴포넌트다. 느낌이 이상하다고?
컴포넌트에서 인스턴스가 만들어지니, 진짜 인스턴스를 만들지 않고도(노가다를 하지 않고도) 하나의 버튼에서 다양한 아이콘을 프로토타이핑 할 수 있게 한 기능이다. 따라서 '이 컴포넌트를 선택지로 둘거야.' 라고 전달하면 피그마가 해당 아이콘 인스턴스를 우리 선택에 따른 인스턴스로 바꿔준다는 뜻이다.
사실, 여기서는 한 디자인 파일 내에 페이지 > 프레임 > 공통컴포넌트 이름(있다면) > 컴포넌트 이름 순서로 찾을 수 있다. 위 사진의 경우, Frame7에 아이콘들이 있을 것이다. 아래 사진으로 확인해보자.
자, 이제 아래에서 결과물을 확인해보자.
컴포넌트에서 인스턴스로 하나를 복제해주었고, Button이라고 쓰인 특성창 아래에 선택지 중에서 Instance라고 쓰여진 부분을 고르면 된다.
이제 스왑 인스턴스 프로퍼티를 버튼 전체에 적용해봐야한다. 왜냐하면 이게 노가다이기 때문에, 안하고 된줄알고 넘어가면 나중에 낭패다.
왼쪽 위의 장바구니 아이콘에만 스왑 인스턴스 프로퍼티를 적욯안 인스턴스를 적용했고, 나머지는 적용하기 이전의 인스턴스를 사용했다면, 전부다 .. 바꿔야한다.
그러면, 어떤 작업을 하다가 하나의 컴포넌트에서 100개의 인스턴스를 사용했고, 나중에서야 이 컴포넌트에 다른 선택지를 가져와 스왑 인스턴스 프로퍼티를 만들었다면, 나머지 100개의 인스턴스에도 다 지우고 이를 일일이 다시 인스턴스를 붙여넣어줘야하나???
다행히도, 아래와 같이 할 수 있다.
위와 같이 하려면 아래처럼 한 인스턴스를 클릭하고 매칭하는 27개 레이어를 선택하면 된다.
