UX/UI 디자이너인 당신이 Figma를 사용해야 할 7가지 이유

IT업계는 일견 혁신과 트렌드의 선두에 있는 듯하지만 국내 업계는 아직 그렇지 못합니다. 국내 IT업계에서 일반적으로 많이 쓰이는 UX/UI 디자인 툴은 Sketch와 Adobe XD입니다. 반면에 글로벌 시장에서 최근 가장 주목받고 있는 툴은 Figma(이하 피그마)입니다.

피그마

피그마 (Figma)는 처음부터 끝까지 팀이 더 좋은 디자인을 만들고,
테스트하고, 완료 할 수 있도록 도와줍니다.

피그마는 2016년 9월 출시된 웹 UI 디자인&프로토타이핑 툴로, UX design.CO에서 4,000여명의 업계 종사자를 대상으로 실시한 2020년 디자인 툴 조사에서 브레인스토밍&아이디에이션, UX&사이트맵, UI 디자인, 프로토타이핑, 디자인시스템 관리 등 모든 면에서 Sketch와 Adobe XD를 제치고 가장 많이 사용하며, 가장 높게 평가된 툴입니다. 그중 UI 디자인에서는 66%의 디자이너가 피그마를 사용한다고 말해, 전년도인 2019년의 37%에 비해 매우 큰 사용자의 증가를 보였습니다. 이는 코로나19로 인한 재택근무의 확대의 효과가 가장 컸다고 볼 수 있습니다.

그렇다면 어떤 특징이 피그마를 다른 툴과 다르게 만들고, 또 주목받게 만들까요? 피그마를 사용해야 하는 7가지 이유를 준비했습니다.

1. 강력한 협업 툴

피그마는 웹 기반으로 실시간 협업 기능을 가지고 있는 디자인 툴입니다. 하나의 draft(draft는 피그마에서 '파일'과 같은 개념으로 사용된다고 이해하시면 됩니다. )를 다수가 공유하여 동시에 작업할 수 있으며, 빠른 작업을 돕기 위한 다양한 기능과 플러그인이 제공되고 있어 웹 또는 앱 디자인 업계에서 사용하기에 적합합니다.


실 작업자가 아닌, 관리자나 개발자와의 소통을 위해서는 조회 권한만을 주어 디자인 리소스를 수정하지 못하고 조회만 할 수 있게도 할 수 있습니다. 조회 권한을 받은 사용자는 각 요소의 css 코드를 추출할 수 있습니다. 그 외에도 디자인 파일을 자세히 뜯어보며 간격이나 여백의 수치를 더 쉽게 확인할 수 있습니다.


공식 사이트 메인화면 상단에서 강조하고 있는 이미지에서도 알 수 있듯이, 실시간 협업 기능은 피그마를 사용해야 하는 가장 큰 이유입니다.

2. (거의 없는) 환경적 제약

Mac이나 Windows 과 같은 PC의 OS가 아닌 웹 브라우저 기반 프로그램이기 때문에 사용하는 기기나 프로그램 설치에 구애되지 않고 어떤 환경에서도 디자인 작업이 가능합니다. 심지어 리눅스나 크롬 OS에서도 동작합니다 (!) 특정 프로그램을 사용하기 위해 주 사용 OS가 아닌 기기를 하나 더 사용해야만 했던 불편에서 완전히 벗어났다고 할 수 있습니다. 심지어는 i-pad 일부 모델에서도 작동하는 것으로 알려져 있습니다. (물론 draft의 용량이 너무 큰 경우에는 파일 편집이 어렵지만, 작은 용량의 파일은 쉽게 열리고 블루투스 마우스와 키보드 연결을 통한 간단한 작업이 가능합니다.


물론 웹 기반 프로그램이기 때문에 인터넷 이용이 불가능한 환경에서는 Mac또는 Windows 데스크탑 앱을 사용하여 작업해야 하며, 인터넷에 변경한 data가 반영되지 않기 때문에 fig 확장자의 파일을 다운로드 받아야 한다는 번거로움은 남지만, 인터넷 이용이 가능한 환경에서는 언제 어디서나 접속하여 디자인 작업을 할 수 있습니다.

3. 다양한 무료 폰트

구글 폰트(900여개 이상의 무료 폰트)를 활용할 수 있어 협업 과정에서 각 사용자가 폰트를 별도로 설치하거나, 보유하지 않은 폰트가 정상적으로 표시되지 않는 현상을 겪지 않습니다. 또한, 구글 폰트에서 제공하는 무료 웹폰트만을 사용하기에, 물론 사용자가 별도로 보유하고 있는 폰트를 적용할 수도 있습니다.


피그마에서 로컬 폰트(피그마에서 제공하지 않는 폰트의 폰트파일을 가지고 있는 경우)를 사용하는 방법은 아래와 같습니다.


1. 피그마 Font Installer를 설치합니다.

1. 또는 web으로 피그마에 접속하여 "Account Setting" 화면으로 이동합니다. (Web app에서는 폰트 적용 불가)

2. "Font" 항목의 "Download Installer to enable local fonts" 버튼을 클릭합니다.

피그마 폰트

4. 편리한 버전관리와 자동저장기능

자동저장을 기본으로 제공하며, 히스토리를 통해 버전관리를 할 수 있습니다. 웹 기반 툴이기에 자동저장과 히스토리 기능을 위한 디스크 스페이스의 부담이 없습니다. Team 결제 시, 무제한의 버전 관리를 제공하여, 잦은 수정으로 삭제되거나 옮겨진 디자인 과정의 산출물을 언제든 확인할 수 있습니다.


또한 코멘트 기능을 통해 팀 멤버들이 각자의 디자인에 대해 서로에게 noti를 줄 수 있어, 별도의 협업 툴이 필요하지 않습니다. 이 기능은 피그마를 단순히 UI디자인 툴만이 아닌, 브레인스토밍과 아이디에이션을 위한 툴로도 인기를 끌게 한 이유입니다. 다른 사용자의 마우스 움직임과 코멘트, 보고 있는 화면의 위치까지 볼 수 있습니다.

5. 놀라운 벡터 처리방법

피그마가 일반 사용자에게 처음으로 선보인 초기 모델은 벡터 그래픽 편집&프로토타이핑이었습니다. 다만 Adobe XD, Sketch와 달리 피그마에서는 벡터포인트가 아닌 라인을 기준으로 벡터를 수정할 수 있습니다. 대부분의 벡터 그래픽 툴은 벡터포인트간의 거리와 방향을 바탕으로 연결을 짓는 방식으로 작업한다면, 피그마는 벡터포인트를 훨씬 직관적인 처리방법을 사용하고 있어, 벡터 이미지 생성에 편리합니다. 피그마에서도 이를 ‘Vector Network’라 부르며, 자사 툴의 가장 독특한 기능이라고 소개하고 있습니다.


놀랍게도 적지 않은 국내 회사에서 아직까지 UI디자인 작업에 포토샵을 사용하고 있습니다. 포토샵은 비트맵 기반 프로그램으로, 용량의 효율적 관리와 픽셀 이미지 추출 시에 발생하는 선명도 문제가 있는 반면에, 벡터 그래픽 툴인 Adobe XD와 Sketch 그리고 피그마는 다양한 해상도를 고려해야 하는 웹/앱 제작시 가장 효과적입니다.

6. Adaptive Layout&Auto Layout

오토 레이아웃은 피그마를 돋보이게 하는 실용적이고 특징적인 기능입니다. 개체와 개체 간의 간격과 정렬에 규칙을 부여하여, 해당 개체들의 크기가 변하더라도 간격이나 정렬이 유지되도록 하는 기능입니다.


디자이너는 하나의 화면만을 작업하지 않습니다. 디바이스의 화면 크기와 비율에 따라 같은 화면을 여럿 작업하게 되는데, 이 과정에서 작업 시간을 효율적으로 줄여줍니다. 정렬과 적응형 레이아웃을 제대로 설정해두면, 같은 화면을 여러 번 만들 필요 없이, 하나의 원본을 여러 개 화면 크기로 늘리거나 줄이는 것 만으로 다양한 크기의 화면을 생성할 수 있습니다. 이 기능은 작업시간을 크게 감소시킬 뿐만 아니라 반복작업에서 발생하는 사소한 Human Error를 발생하지 않도록 도와줍니다.

피그마 폰트
피그마 폰트

7. 프로토타이핑(Prototyping)

안드로이드와 iOS 모두 지원하는 피그마 미러 앱을 사용하면 PC의 웹 브라우저에서 편집 중인 디자인 화면을 앱을 실행한 휴대폰 디바이스 화면에 띄울 수 있습니다. 클라이언트 또는 팀 회의에서 디자인이 실제 구현되었을 때의 형태를 볼 수 있어 디자인의 설득력을 높여줍니다.


피그마를 이용한 간단한 프로토타이핑 또한 기획자와 디자이너 그리고 개발자가 소통하는 데에 많은 도움을 줍니다.


또한 기본으로 제공되는 기능으로 화면 전환, 팝업, 슬라이드 등의 간단한 상호작용 구현을 할 수 있고, 다양한 플러그인으로 여타 프로토타이핑 툴에 못지않은 훌륭한 애니메이션을 구현할 수 있습니다.


2020년을 기점으로 폭발적으로 증가한 재택근무의 수요와, 탄력적인 근무 형태를 지탱하게 도와준 피그마는, 앞으로도 앞으로도 재택근무의 수요는 꾸준히 있을 것으로 보이며, 이미 66%의 해외 디자이너들이 사용하고 있는 UI 툴이 되었기에 더욱 활성화될 것으로 예상됩니다.


놀랍게도, 피그마는 개인에 한해 무료 정책을 펼치고 있기 때문에, 계정을 만들기만 해도 무료로 사용할 수 있기에 부담없이 시도해보고 학습할 수 있습니다. 2021년에는 피그마를 사용해보시는게 어떨까요?

이제, 피그마 (Figma)를 국내에서도 손쉽게 구매하실 수 있습니다.

(빠른 견적서 제공, 원화결제 및 세금계산서 발급)

Professional
20만원 per editor
1 year / (부가세별도)
  • 무제한 프로젝트
  • 무제한 버전 기록
  • 사용자 지정 파일/사용자 권한
  • 초대 전용 개인 프로젝트
  • 공유 가능한 팀 라이브러리
Organization
75만원 per editor
1 year / (부가세별도)
Professional의 기능, 추가로...
  • 조직 전반의 설계 시스템
  • 중앙 집중식 팀
  • 개인 플러그인
  • 플러그인 관리
  • 공유 글꼴
  • SSO + 고급 보안
  • 설계 시스템 분석