피그마(figma) 입문 - 기본 환경 이해하기

 

피그마(figma)는 전세계 UX, UI 디자이너가 가장 많이 사용하는 UI 디자인 프로토타이핑 툴이다. 가파른 성장곡선을 그리며 2017년에는 5위, 2019년에는 2위, 그리고 2020년에는 1위를 차지하며 스스로 '대세' 툴임을 보여주고 있다. (통계 출처: uxtools.co/)

 

이렇게 사랑받는 비결로는 다음과 같은 특장점을 들 수 있다.

 

1. 실시간 협업에 최적화

2. 높은 재사용성

   - 스타일, 컴포넌트 활용

   - 벡터 이미지 기반으로 디바이스별로 쉽게 리사이즈 가능

3. 무료버전에서도 충분히 기능사용 가능

4. 오프라인 상태에서는 사용이 제한적임

5. 서드파티의 오픈소스 플러그인, 템플릿이 풍부함

 

 

 

인터페이스

피그마의 인터페이스는 입문자도 빠르게 적응할 수 있도록 직관적으로 구성되어 사용자의 효율적이고 편리한 작업을 돕는다.

 

상단 내비게이션: 이미지, 텍스트, 도형 등 오브젝트 제작을 위한 메뉴

중앙 페이지캔버스: 제작한 오브젝트를 보여주는 공간

좌측 패널: 페이지 및 레이어, 그림요소, 에셋 관리

우측 패널: 각 오브젝트에 대한 속성 관리

 

 

 

작업계층

작업 계층은 크기가 큰 순서로 나열하면 다음과 같다.

 

1. 드래프트

2. 페이지캔버스

3. 프레임

4. 레이어

 

하나의 드래프트 내에 "Page 1", "Page 2"와 같은 복수의 페이지를 생성할 수 있고 좌측패널에서 확인 가능하다.

하나의 페이지 내에서 역시 복수의 프레임을 생성할 수 있는데 이때 한 프레임은 좌측패널에서 "MacBook - 1"과 같이 #으로 구분되고 프레임 하위에는 "Rectangle 1"과 같이 가장 작은 단위인 레이어를 생성해서 작업을 하게된다. 

 

좌측 패널에서 위에 있을수록 우선순위가 높은 프레임 또는 레이어 이다. 우선순위를 변경하려면프레임 또는 레이어를 선택해서 원하는 위치로 드래그앤 드롭 해주면 된다.