Figma ON/OFF 컴포넌트 만들기

Figma를 사용하면 커뮤니티에 다양한 컴포넌트들이 올라와있다.

사용해보면서 컴포넌트 하나를 가져다 놓고 디자인을 선택해서 모양을 바꾸는 기능을 한번쯤은 접해봤을 것이다.

그런 컴포넌트를 직접 만드려면 어떻게 해야하는지 알아보겠습니다.

컴포넌트 Variants

목차

1. 예시

2. 만드는 방법

3. 총평

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

예시

컴포넌트 예시이다. 아래처럼 컴포넌트명 하나에 여러개의 컴포넌트 들이 들어있고

Property 항목을 선택하여 내부 컴포넌트를 골라서 선택하면 해당되는 컴포넌트로 바꿔 사용할 수 있다.

snow ui 컴포넌트

변경 후 바뀐 컴포넌트 모양

 

만드는 방법

순서는 간단하다.

1. 컴포넌트로 엮을 것들을 제작한다
2. 같이 선택한 후 Design탭의 Components항목에서 Combine as variants 클릭

순서대로 진행해보겠다.

 

1. 컴포넌트 제작

일단 엮을 컴포넌트들을 각각 제작한다. 

컴포넌트로 사용할 것을 만들고 우클릭하여 Create component를 누르면 된다.

컴포넌트로 만들기

위와 같은 방식으로 초록색을 적용한 것도 세트로 컴포넌트로 제작하였다.

컴포넌트로 제작된 모습

다이아몬드 모양 4개가 보라색으로 채워져있다면 이게 컴포넌트 원본이라는 뜻이다.

 

2. variants로 결합

combine as variants

이제 만든 컴포넌트들을 같이 선택하면 위처럼 우측 디자인탭에 Components 항목에 Combine as variants라는 버튼이 표시 될 것이다. 클릭하면 기본 작업은 완료된다.

 

보라색 점선으로 결합된 모습

property 설정

이제 해당 항목을 골라쓸 수 있도록 내용을 작성해야한다.

위처럼 기본=1, 기본=2 이런식으로 작성하게되면 아래와 같이 선택항목으로 뜬다.

컴포넌트 디자인을 선택하여 변경

하지만 여기선 1, 2 방식으로 골라쓰기에는 상대적으로 불편하고 직관적으로 보이지 않는다.

그래서 property 내용을 다음과 같이 변경했다.

property 내용 변경

위처럼 '=' 뒤에 내용을 on/off로 지정해주면

onoff 모양

컴포넌트 선택이 on/off 방식으로 변경된 것을 확인할 수 있다.

 

총평

Figma는 정말 많은 편의기능을 제공해준다. 가끔 편하게 갖다 쓰던 것들을 직접 커스텀하여 사용하려면 어느정도 학습이 필요한 영역이라고 생각된다. 예전 포토샵을 사용하기위해 학습해야하는 만큼의 수고가 들진 않지만 유용한 기능들을 능숙하게 사용하기 위해선 그만한 노력이 필요한 것 같다.

 

추천글

Figma UI/UX 저작툴 소개