[디자인 툴] 와이어프레임 부수기 Figma - (1) 컴포넌트와 인스턴스

Figma 사용 예제

 프로젝트를 시작할 때 꼭 해야 하는 게 있다. 구상한 아이디어를 시각적으로 보여주는 와이어프레임 짜기. 처음 팀 프로젝트를 진행했을 때는 그냥 그림판으로 그리던가해서 허접하게 만들어서 썼다. 하지만 Figma를 알고 난 뒤 이걸 어떻게 하면 제대로 써볼까 하는 생각이 들어 이 글을 정리한다.

 

 

 

---

01. 컴포넌트와 인스턴스

 피그마에도 컴포넌트와 인스턴스가 있다. 

컴포넌트 : 디자인 전체에서 재사용할 수 있는 구성 단위

인스턴스 : 컴포넌트의 복사본. 컴포넌트의 모든 속성을 물려받는다

 

간단한 예제를 통해 컴포넌트와 인스턴스에 대해 알아보고 얼마나 유용한지도 알아보자.

 

이미지와 텍스트로 이루어진 요소

 

포맷이 변경되었다..

 

 

 그림과 텍스트로 이루어진 위와 같은 요소들이 있다고 하자. 우리는 저 포맷을 그대로 써서 옆과 아래에도 복사 붙여넣기를 열심히 해서 위의 사진처럼 페이지를 열심히 만들어 놓았다. 하지만 다시 포맷을 아래 그림처럼 같이 바꿔야 한다면? 일일이 지울 건 지우고 새로 넣을 건 넣고 색깔도 바꿔가면서 다시 하나씩 열심히 만들어야 한다.

 피그마에는 그런 귀찮은 작업을 하지 않아도 되도록 반복하고자 하는 요소들의 묶음을 컴포넌트로 만들어 줄 수 있다

 

Create component

반복하고자 하는 범위를 선택한 다음 우클릭-Create component 혹은 Ctrl + Alt + K를 누르면 된다.

 

컴포넌트

이제 지정된 범위가 컴포넌트로 바뀌면서 경계가 보라색으로 바뀌었다. 위를 보면 보라색 마름모 네개가 보이는데 이 표시가 있으면 컴포넌트다. 이제 이 컴포넌트를 복사해서 다시 각 위치에 넣어주자.

 

컴포넌트를 복사하기

이제 컴포넌트를 복사한 요소는 전부 이 컴포넌트의 인스턴스가 된다. 이제 차이점을 보자

 

컴포넌트와 인스턴스

 인스턴스는 컴포넌트의 모든 속성을 따라간다. 따라서 위의 예시처럼 글씨를 바꾸는 것만 아니라 색깔을 바꾸거나 위치를 조정하는 것까지 컴포넌트 하나를 수정해서 전부 바꿔줄 수 있다. 사실 기준이 되는 컴포넌트는 프레임 바깥으로 빼내고 인스턴스만으로 페이지를 구성하는 것이 유지관리를 위해서 좋다.

 

 네스팅

 또 다른 고민이 있다. 컴포넌트를 이용해서 인스턴스의 속성을 일괄적으로 바꿔주는 기능은 좋은데 그 안에 있는 요소들을 각각의 내용들로 바꿔주려면 어차피 각 인스턴스를 수정해주어야 한다. 예를 들어 오른쪽 위에 하트 표시를 두고 하트를 클릭했을 때는 체크표시로 바꿔주는 상태를 표현하고 싶다.

 

체크표시와 하트

 이 친구들도 일일이 바꿔줄 수 있겠지만 피그마에서는 이 친구들 또한 쉽게 바꿔줄 수 있는 네스팅이란 기능을 제공한다. 네스팅은 컴포넌트 안에 또 다른 컴포넌트의 인스턴스가 들어갈 수 있는 기능이다. 그래서 컴포넌트 안에 있는 인스턴스를 instance swapping 기능을 이용해 쉽게 바꿔줄 수 있다. 사용 방법을 보자.

 

각각의 친구를 컴포넌트로 만들어준다

 체크표시와 하트를 각각 컴포넌트로 만들어준다. 위에서 한 것처럼 Ctrl + Alt + K 등을 이용해서 만들어주면 된다. 그리고 그 중 하나의 인스턴스를 만들어 준다. 이제 이 인스턴스는 instance swapping기능을 이용해 다른 컴포넌트들로 바꿔줄 수 있다. 

 

인스턴스의 instance swapping 기능 사용하기

 

 인스턴스를 선택하면 오른쪽 작업도구에 마름모로 된 인스턴스 표시가 뜬다. 그걸 클릭하면 Swap instance가 뜨고 아래에서 선택해 인스턴스를 다른 컴포넌트의 인스턴스로 바꿔줄 수 있다.

이제 이 인스턴스를 컴포넌트에 넣어주기만 하면 된다.

 

컴포넌트 안에서 instance swapping하기

 

Nested component의 예시

 이를 잘 이용하면 이런 식으로 입력 폼을 구성할 때도 쓸 수 있다.