Figma

| What Is 'Figma'?

Figma는 2016년 중순부터 서비스가 시작된 UI 제작 툴이다. 근 2년 사이 여러 UI 디자인 도구들이 출시되었고, 디자이너들은 다양한 선택지 아래 자신에게 가장 잘 맞는 도구를 찾아나가기 시작했다. 그중 가장 쉽고 사용이 용이한 툴로 Sketch와 Adobe XD가 꼽히는데, 이제 이 대열에 Figma를 추가해야 할 것 같다. (Figma 공식 홈페이지 www.figma.com)

 

Figma는 기본적으로, Sketch와 Adobe XD를 사용해본 유저라면 당장이라도 어렵지 않게 사용할 만큼 쉽고 익숙한 인터페이스를 가지고 있다. 그중에서도 Sketch와 조금 더 유사한데, 이는 Figma가 인터랙션 기능을 지원하지 않는 레이아웃/와이어프레임/정적 디자인 전용 툴이라는 점 때문이다. (Adobe XD는 간단한 트랜지션 기능들을 지원하고 있다.)

그런데 Figma는, Sketch 및 Adobe XD와는 확연하게 구분되는 그만의 강점들을 추가적으로 갖추고 있다. 이러한 까닭에 수많은 디자이너들이 그 출시를 더욱 특별히 기다려왔다. 이제 그 특장점들을 하나씩 살펴보자.

 

| Figma의 특장점

(1) 제작 환경

인터넷 브라우저 기반 서비스, Figma

Figma는 브라우저(ex. 크롬 브라우저) 기반으로 작동하는 툴이다. Sketch와 Adobe XD를 비롯한 대부분의 프로토타이핑 툴은 사용자의 컴퓨터에 설치해서 사용하는 오프라인 어플리케이션인데 반해, Figma는 브라우저에서 바로 작동한다. 때문에 사용자는 자신의 OS 환경에 구애받지 않고 Figma를 사용할 수 있다. 이러한 Figma의 괄목할만한 특징은, Mac에서만 사용 가능한 Sketch, 아직 윈도우 버전이 출시되지 않은(곧 출시 예정이지만) Adobe XD와 비교했을 때 매우 환상적인 강점이 아닐 수 없다. Figma는 2016년 말까지 무료로 사용할 수 있다. (학생들에게는 향후에도 계속 무료로 서비스된다고 한다.)

   

(2) 실시간 협업 시스템

 

Figma로 실시간 협업을! 

 

Figma에서는 디자인 작업을 여러 명이 동시에 진행할 수 있다. 이 부분이 많은 디자이너들에게 놀라움을 준 부분이었다. 즉 동료 디자이너들, 엔지니어들 혹은 클라이언트들과 함께 작업을 보고 토의하며 진행을 할 수 있게 된 것이다. 이를 통해서 (물론 효율적으로 사용한다는 가정 아래) 손쉽게 진정한 협업을 할 수 있는 가능성을 찾게 되었다.

물론 Figma를 사용해서 혼자 작업하는 것도 가능하다. 자신이 작업을 한 이후 사람들을 해당 캔버스에 초대하여 함께 토의를 할 수도 있고, 여러 사람들의 코멘트를 통해 피드백을 받거나 작업 프로세스를 확인할 수도 있다. 브라우저 기반 툴이기에 갖는 장점이 있다면, 초대를 받은 사람들은 번거로운 별도의 설치 절차 등을 거치지 않고도 참여가 가능하다는 점. 초대받은 사람들은 모든 기능들을 사용할 수 있고 작업 내용을 그대로 확인할 수 있다. 이를 통해 개발자들은 아무런 가이드 문서 없이도 작업물을 직접 보면서 모든 스펙을 체크할 수 있다.

 

(3) 버전 히스토리 관리

버전 히스토리 관리 

 

디자인을 하다 보면 시간의 경과에 따라, 혹은 수많은 수정사항에 따라 다양한 버전이 나오기 마련이다. 기존의 디자인 툴들이 이러한 버전 관리를 수많은 '파일 생성'으로 관리했다면, Figma는 브라우저 인터페이스 안에서 버전 히스토리를 볼 수 있게 구성하여 편리함을 준다. 세로형 타임라인을 통해 보다 직관적으로 버전 관리를 함으로써, 디자인 작업의 비교가 용이하게 됐다.

   

(4) 최적화된 어댑티브(Adaptive) 레이아웃 시스템

UI 디자이너들은 필연적으로 다수의 디바이스 해상도에 대응하여 작업을 하게 된다. 예전에 포토샵으로 작업을 할 때는 디바이스 별로 일일이 새로운 PSD 파일을 제작했고, Sketch도 초기에는 여러 벌의 아트보드들을 만들어서 디테일들을 조정해야 했다. (지금은 Pin to Corner / Resize object 등의 스케일 기능이 생겨서 조금 용이해졌다.) 후발 주자로 나온 Figma는 이 부분을 충분히 고려했다. Figma에서는 단순히 외곽 보더의 핀을 조정하는 것만으로도 대부분의 컴포넌트들을 크기에 맞게 자동 조정해준다.

(5) Sketch 파일과의 연동

 

 

Sketch 사용자들의 경우, 이전에 작업해온 포토샵 PSD 파일들을 불러올 수 없는 이유로, 모조리 새 작업을 해야만 했다. 그러나 Figma에서는 기존에 작업하던 Sketch 파일들을 임포트 할 수 있다. 이 기능은 실제 작업자에게 매우 중요하게 여겨지는 부분이다. 기존의 Sketch 파일들을 불러와 작업을 마친 그 지점부터 또다시 작업을 이어나갈 수 있다니 특출난 장점이 아닐 수 없다. 더불어 현재 온라인에 배포되어 있는 수많은 고퀄리티의 Sketch UI 킷들을 Figma에서도 사용할 수 있다는 보너스까지 따라붙어 일석이조!