UI/UX 편집 도구 Figma의 강점 (feat. Sketch 보다 좋은 이유)

Figma

---

 

출처: Figma 공식 홈 figma.com

 

Figma는 클라우드 기반 UI 편집 도구이자 협업 도구입니다.
디자이너뿐만 아니라 비 디자이너 직군에서도 협업 도구로서 다양한 용도로 사용 가능합니다. 

 

Figma의 용도

• UI/UX 디자인
• Wireframe, 화면 기획
• 시안 관련 실시간 공유 및 피드백
• 시안 버전 관리
• 프로토타입핑
• 아이디어 공유
• 프레젠테이션
• 아이콘 디자인
• Zeplin처럼 Code Veiw역할 
• 블로그 썸네일 이미지, 배너 제작

 

디자인 툴을 스케치에서 Figma로 변경한 이유

* 당시 만들었던 Youtube 영상 참고 : https://youtu.be/urx7KsMV7ao

 

• 비용 절약 - Sketch(UI 에셋 관리 및 편집), Abastract(버전 관리), Zeplin(Code View, 시안 딜리버리), Indesign(프로토타입 핑)등의 역할을 Figma 하나로 대체 가능 
• 비용 이슈 - 디바이스당 결제해야 하는 시스템 -> 회사 컴퓨터에 설치하면 동일한 계정으로도 다른 서브 컴퓨터에서 재설치 불가. 반면 figma는 인터넷만 되면 어디서나 접속 및 편집 가능.
• Figma는 Windowm Mac 상관없이 인터넷이 되는 컴퓨터에서 클라우드 방식으로 업무 가능. 최근 아이패드 3세대, 4세대 12.9인치에서 편집도 가능해짐
• 실시간 화면 공유 가능 -> 협업 측면 시간 절약
• 디자인 시스템의 용이성 - 컬러 및 컴포넌트 에셋 관리의 용이성이 스케치 대비 유연함(무료 계정에서도 가능), 팀 라이브러리 기능 (유료 계정에 제공됨)
• 최종 파일의 버전 관리의 용이성 - Version History (유료 계정에 제공됨)

 

---

 

Figma 가격

• 2명 이상의 협업이 필요하다면 유료버전(Professional)을 추천드립니다.
• 저는 2019년 2월부터 Figma를 연 $144(월 약 $14)로 이용 중입니다. {자세히 보기}
• 무료 : 3개의 프로젝트로 제한됨, 한 달간 버전 관리 기능 사용 가능, 무제한 Viewer 초대 가능
• 유료 : 팀 라이브러리 기능, 버전 관리, 프로젝트 개수 무제한, Community Beta 기본 제공

 

출처: https://www.figma.com/pricing/

 

 

지난 에피소드 

• 스케치에 대한 해외 유료 튜토리얼 영상을 구독하다가 해외에서 인기 상승 중인 툴 Figma에 대해 처음 알게 되었습니다.
• 툴 리서치 결과 현존하는 툴 중 협업에 가장 최적화된 툴이라 파악되어 실무에 적용하기 시작(2019년 2월)

*추천 - 해외 튜토리얼 강좌 "Design+Code"  :  이분이 저의 figma 스승이십니다. ㅎㅎ 선생님 Youtube에 Figma 강좌 관련해서 무료로 오픈되어 있습니다. 공식 사이트는 아래 링크를 참고해주세요. 

Design+Code Courses

 

Figma를 사용하기 전 UI Edit Tools &  Prototype Tools

• 2018년 이전 - Adobe Photoshop, XD(2017년)
• 2018년 1월 ~ 2017년 12월 : 스케치(Sketch)는 2018년 1월부터 1년간 사용, Zeplin으로 가이드 전달
• 기타 프로토타입핑 툴로 시도했던 툴, 하지만 실무에서 사용빈도는 현저히 줄어서 지금은 사용 안 하는 툴:  Frinto, Framer, Protopie

 

---

내가 Figma를 사용하는 이유 Top 3

 

1) APP을 별도로 설치하지 않아도, Mac, Window 상관없이 공유 URL을 통해 웹 브라우저에서 접속 가능

이 부분은 스케치, Adobe 제품군과 비교 시 현재까진 그들에겐 없고 figma에만 있는 최대 강점입니다. 비 디자이너 직군과 협업 시 공유 및 피드백을 주고받을 시 이 부분이 큰 강점으로 작용합니다. Figma 무료 버전의 경우 공유 링크만 있으면 누구나 그 페이지를 볼 수 있습니다. 유료 버전에 경우, 이메일로 초대한 사람들에 한에서 제한적으로 작업물을 공유할 수가 있습니다. 그래서 회사에서 처럼 대외비 시안 작업 시에는 유료버전을 권장합니다. 

저는 편의성 때문에 대부분 데스크톱용 figma 앱을 설치해서 사용하고 있습니다. 웹과 App의 인터페이스는 거의 동일하나, 여러 개의 figma 파일을 열고 작업 시 Web보다는 App에서 작업하는 것을 추천드립니다. 아래의 링크를 통해 Figma App을 다운로드할 수 있습니다.

Download Figma Desktop Apps, Mobile Apps, and Font Installers

 

최근 iPad 4세대 12.9인치를 구입하여 iPad에서도 figma 작업이 가능하게 되었습니다. iPad의 경우 한글 입력 오류가 있는 부분을 제외하고 불편함 없이 사용 중입니다.  {App Store - Figurative : 바로가기}

 

 

 

2) Figma는 실시간으로 협업이 가능

[사례 1 - 프로젝트 회고] 2018년 5월~7월 *** 가상화폐 관련 프로젝트]

하나의 프로덕트, 두 개의 플랫폼이었기에 하나의 디자인 시스템이 필요했었습니다. 스케치는 그런 면에서 유연하지 못했고 협업 측면에서 여러모로 불편했습니다. 

Figma는 구글 공유 문서처럼 문서에 누가 접속하고 있는지 접속한 사람이 무엇을 하는지 무엇을 보고 있는지를 실시간으로 확인이 가능하며, Figma안에서 피드백을 주고받을 수 있습니다. 협업하는 사람 간에 지켜야 할 규칙만 명확하다면, 효율적으로 협업을 할 수가 있습니다. 

스케치에서 Figma로 정착한 후 두배 이상의 시간을 절약할 수 있었습니다. 

디자이너가 시안 작업을 하는 중에 기획자나 에디터가 와서 문구를 변경할 수 있다는 것을 의미하죠. (물론 협업적 측면에서  시안의 소유자가 상대방을 초대한 뒤 편집 권한을 줬을 경우에만 해당)

 

동시에 한 파일을 수정하면 동선이 꼬이는 거 아니야? 란 의문을 둘 수 있는데, 네 맞습니다. 꼬일 수 있죠. 그래서 있는 기능이 Figma의 "Version Control" 기능입니다.

스케치에서 버전 컨트롤을 하려면, Abstract라는 고가의 서비스를 구독해야 합니다. 스케치는 유료 플러그인이나 기타 프로그램의 도움을 받아야만 완벽해졌던 툴로 회상합니다.

물론 Figma도 일부분은 플러그인에 의존합니다만 Figma 하나로 버전 컨트롤이 가능하고, Zeplin 없이도  Inspector기능을 제공한다는 점, 그리고 파일 내에서 직접 커뮤니케이션이 가능하고 url로 동료들에게 작업물을 공유할 수 있다는 점은 현존하는 UI 편집 툴 중 단 하나뿐 입니다. (2020년 8월 기준)

그래서 최근 많은 분들이 Figma에 주목하고 있는 거죠. 다른 툴들도 언젠가는 Figma의 방향성을 어느 정도 따라갈 거라 예상됩니다.

 

3) 최적의 디자인 시스템 구축 Tool

 

실시간 동시 편집이 가능하고, 시안 공유가 된다는 점 덕분에 스케치와 포토샵 대비 큰 강점이 있다는 점은 면접을 갈 때마다 입이 아플 정도로 강조했던 점입니다. 그때마다 면접관님들의 반응은 정말이지 신세계를 만난 듯한 눈빛이었어요. 맞습니다. Figma는 전 세계 IT 종사자 그리고 비 직군들에게 마저 신세계를 제공했습니다.

Figma도 스케치처럼 컴포넌트 기반의 UI 편집 툴입니다. 스케치의 Symbol이 Figma에서는 컴포넌트라고 지칭됩니다. Master Component라고 불리다가 최근에 Main Component라고 명칭이 변경되었습니다.

컴포넌트를 복제한 것을 인스턴스라고 불리는데, 즉 반복적으로 사용되는 UI 요소들을 컴포넌트 화하여 웹 프레임워크의 부트스트랩, 머터리얼 디자인 시스템과 같은 디자인 라이브러리처럼 재활용합니다. 이 시스템을 활용해서 디자인 시스템을 효율적으로 구축할 수 있습니다.

그리고 figma의 강점 중 하나인 로컬 스타일링 기능은 컬러, 폰트, 이펙트 등을 로컬 스타일 화하여 중복 작업을 줄일 수 있는 부분은 가장 매력적인 부분입니다. 올해 추가된 오토 레이아웃(Auto Layout) 기능과 선택된 오브젝트에 대해 사용된 컬러를 일괄적으로 수정할 수 있는 Selection Colors 기능은 figma의 완성도를 한층 업그레이드시켰습니다.

 

 

최근엔 프로토타이핑과 관련하여 소소한 업데이트가 있었습니다. 웹 기반 플랫폼이어서 인지 툴의 성장 속도가 다른 툴 대비 빠릅니다. 버그에 대한 개선도 빠르게 대응하고 있습니다.  

 

{Figma YouTube 공식 채널}

Figma

 

 

그 밖에 여러 가지 강점이 있으나, 대표적인 강점 3가지 만을 공유드리고 다음 포스팅에서 찾아뵙겠습니다.

 

---

 

연정's Figma YouTube 채널 링크

연정's Figma

 

 

 

 

 

 

---