Figma

 

Figma

와이어프레임, UI Design, 프로토타입, 협업, 버전 관리가 가능한, 협업에 큰 중점을 툰 UXUI Tool이다.

2020년 UX Tools에서 4천여 명의 디자이너를 대상으로 조사한 서베이(Survey)의 UI Design 부분에서 Fimga가 압도적인 사용률을 보여주는 것을 확인할 수 있다.

공동 작업이 가능하고 컴포넌트와 팀 라이브러리를 통해 변경된 디자인 내용을 빠르게 업데이트할 수 있으며, 면에 바로 피드백을 남겨서 실시간으로 소통이 가능하다.

또 Figma는 프로토타입 작업을 진행할 수 있으며, 프리뷰 및 모바일 미러링 앱을 통해 실제 디바이스에서 어떻게 보이는지 확인할 수 있다.

Figma는 맥, 윈도우뿐만 아니라 웹 기반으로 클라우드에서 작업이 가능하며 비용은 연 $144다.

오프라인 작업이 불가능하지만, 인터넷 연결이 필요 없는 오프라인 작업은 가능하다.

하지만 파일이 유실될 수 있으니 작업물을 로컬에 저장하는 등 파일 관리에 유념해야 한다.

 

Figma는 브라우저를 통해 웹과 앱으로 실행이 가능하다.

Figma 사이트에서 로그인하면 웹 브라우저를 통해 디자인 작업을 진행할 수 있다.

Figma 사이트에서 앱을 데스크탑에 다운로드 받아 로컬에서 실행할 수 있으며 웹과 크게 다른 점은 없다.

 

 

주요 기능
디자인	Figma는 백터 기반의 Tool로, 직관적인 UI를 통해 간편하게 디자인 작업을 진행할 수 있다. 오토 레이아웃 기능으로 다양한 해상도의 반응형 디자인을 작업할 수 있다.
프로토타이핑	코드 없이 직관적으로 프로토타이핑 작업을 진행할 수 있으며, 스마트 애니메이션을 통해 시각적인 작업을 진행할 수 있다.
협업	클라우드 기반 작업으로 실시간 팀 작업이 가능하며, 함께 디자인을 진행하거나 코멘트를 남기고 확인하는 것이 가능하다. 디자인 시스템 라이브러리를 등록해 일관되고 정돈된 디자인 작업을 진행할 수 있다.

 

 

화면

브라우저 화면의 Recent에서 최근에 작업한 파일을 확인할 수 있으며, +New를 통해 새로운 파일을 추가하거나 이미 작업된 디자인 파일을 Import 할 수 있다.

Drafts에서 현재 작업 중이며 갖고 있는 파일이라 볼 수 있으며 상단의 Deleted를 통해 삭제된 파일을 확인할 수 있다.

그 하위에 팀 명/팀 프로젝트 명으로 항목이 표기되며, Create new team으로 새로운 팀을 생성해 작업할 수 있다.

 

Figma는 벡터 기반의 작업을 진행하므로 이미지 확대해도 윤곽선이 깔끔한 단면을 확인할 수 있다.

하지만 픽셀 화면에서 이미지를 볼 경우 계단 현상이 발생하므로 Pixel preview를 통해 해당 디자인이 픽셀 환경에서 어떻게 보이는지 미리 확인할 수 있다.

혹시 작업 중 이미지가 흐릿하게 보일 경우 Pixel preview가 켜져 있는지 확인해 보는 것이 좋다.

Pixel preview는 View 메뉴에서 확인할 수 있다.

 

Figma는 Page 기능이 있는데, 페이지 별로 프레임 작업을 할 수 있다.

예를 들어 로그인, 회원가입, 마이페이지 등 다양한 메뉴가 있는 앱 디자인을 한다고 가정해보자.

만들고자 하는 화면(메뉴) 별로 페이지를 생성해 디자인을 진행할 수 있다.

마이페이지라는 페이지를 생성했다면 구매내역, 취소 내역, 환불내역 등 마이페이지와 관련이 있는 프레임을 생성할 수 있다.

이러한 기능은 여러 사람이 화면별로 나눠서 디자인을 진행할 때 도움이 된다.