피그마(figma) 알아보기

figma는 UX/UI 디자인 툴로 강력하고 편리한 기능을 제공한다. 많은 기능이 있지만 아래 내용만 알아도 기본적인 작업은 편하게 할 수 있다.

Local variables
Auto layout
Component
Properties
Prototype
( + Layout grid )

*Figma의 새로운 버전(UI3) 기준

Local variables

Local variables를 이용해 색상 가이드를 잡아보자.

우측에 Local variables를 클릭하면 창이 나타난다. 여기서 Name-Value 형식으로 값을 작성할 수 있다. 위 이미지는 색상 변수를 지정한 예시다.

value를 선택할 때 Libraries를 선택하면 앞서 만들었던 변수를 연결할 수 있다. 이 기능을 이용하면 #3B82F6 = Blue-500 = Primary와 같이 변수를 연결할 수 있다.

Auto layout

오토 레이아웃은 객체의 크기, 위치, 여백 등을 설정한 값에 따라 자동으로 변경해준다.

텍스트를 도형으로 감싼 요소를 만들 때 텍스트 길이에 따라 도형의 길이를 매번 조정해야 한다. 이 작업이 매우 귀찮기 때문에 자동으로 크기와 여백을 설정해 주겠다.

요소들을 모두 선택해주면 Layout 옆에 버튼이 생긴다. 마우스를 올리면 "Use auto layout"이라는 문구가 뜬다. 이 버튼을 클릭하면 오토 레이아웃이 걸린다.

W(너비)와 H(높이)를 Hug로 설정해주고 아래에 padding 값을 입력해준다. 위 예시는 8 6으로 입력했다.

이제 텍스트를 변경해도 여백이 유지되면서 크기가 자동으로 조정된다.

외부에 있는 요소들에 추가로 오토 레이아웃을 걸면 간격도 설정할 수 있다. 위 예시는 8을 입력했다.

이제 요소를 생성하거나 정리할 때 번거롭게 하나하나 조정할 필요가 없다.

Component

컴포넌트는 요소를 반복적으로 사용해야할 때 유용하다.

component 등록

버튼 세 종류를 만들었다. 이 형태의 버튼을 디자인 전반에 걸쳐 사용한다고 해보자. 그럼 버튼이 필요할 때마다 찾아서 복사하고 붙여넣어야 해서 번거롭다. 따라서 위 버튼을 컴포넌트로 등록해 필요할 때마다 재사용하려 한다.

요소를 선택하고 Frame 옆에 있는 점에서 Create component를 클릭해 등록할 수 있다.

컴포넌트를 여러 개 선택해 Combine as variants를 이용하면 같은 종류의 컴포넌트를 그룹으로 묶을 수 있다.

등록된 컴포넌트는 좌측 Assets에서 조회 및 삽입할 수 있다.

참고로 방금 등록할 때 사용한 컴포넌트(보라색 점선으로 묶인 컴포넌트 모음)를 마스터 컴포넌트라고 한다. 마스터를 수정하면 다른 곳에 삽입한 컴포넌트도 함께 수정된다. 다시 말해, 재사용된 컴포넌트(instance)는 마스터에 종속되어 있다.

Properties

그룹으로 묶인 컴포넌트는 삽입 후 원하는 옵션으로 선택할 수 있다. 여기에 여러 옵션을 추가할 수 있는데 이것을 프로퍼티라고 한다.

만약 버튼 앞에 아이콘을 추가하고 싶다고 하자. 그런데 어떨 때는 아이콘이 필요하고 어떨 때는 필요하지 않다. 그렇다면 버튼 컴포넌트를 삽입할 때 아이콘을 숨길지 말지 옵션을 추가할 수 있다. Appearance 옆 마름모 아이콘에 마우스를 올리면 "Create boolean property"라는 문구가 뜬다. 이 버튼을 클릭하면 아이콘을 프로퍼티로 등록할 수 있다.