잡오브브라더스, 디자인 툴 이용안내 (피그마 사용 방법 정리)

잡오브브라더스에서는 디자인 툴을 피그마로 채택하고, 현재까지 이용하고있습니다. 디자인 및 기획 시 사용 툴인 피그마 (Figma)에 대해 안내 해드리려고 합니다.

쟁쟁한 경쟁자들을 넘어 가장 많이 사용 하는 툴

XD, Sketch, 포토샵등 수 많은 웹 디자인 툴의 전쟁에서 Figma 피그마는 UX 디자이너 뿐만이 아니라 기획자, 개발자가 가장 많이 사용하는 UX 툴로 급부상하였습니다. ​ Jobofbrothers에서도 포토샵, 일러스트를 넘어 피그마 툴을 안정적으로 도입하였습니다. Figma 피그마는 따로 재플린을 연결할 필요 없이 기획, 디자인, 개발 공유까지 Figma 피그마 툴로 사용하고 있습니다.

언제 어디서든 클라우드 기반 저장

Figma 피그마는 스케치와 XD 같이 비트맵 기반이 아닌 백터 기반이라는 점은 같습니다. 하지만 스케치와 XD와 가장 큰 차이는 Figma 피그마는 클라우드 웹 기반의 프로그램이라는 점입니다. ​ 인터넷이 되는 Mac OS, Windows 모두에서 데스크톱 앱이 없더라도 어디서든 접속해서 작업을 할 수 있다는 점입니다. 인터넷이 되는 공간이라면, 내가 사용하던 컴퓨터가 아니더라도 파일 링크만 보내면 어디서든 확인 및 수정작업이 가능하다는 점이 다른 UI 툴 시장에서 Figma 피그마의 큰 장점 인 것 같습니다. ​ 각 파일의 용량이 커서 외장하드를 따로 구매하거나 하는 별도의 저장 공간을 필요로 하지않습니다. 데스크톱에 용량을 단 1mb도 차지하지 않습니다.

합리적인 가격 측정

XD, 포토샵, 스케치 등 보편적인 작업 툴 들은 고정적인 비용을 듭니다. Sketch의 경우 30일의 무료체험판을 제공하기는 하지만 99$의 비용을 지불 후 1년 후에는 매년 79$의 비용을 내야한다는 점에서 차별성이 적용됩니다. ​ Figma 피그마는 무료입니다. ​ 팀 단위 프로젝트라면 무료가 아니지만 개인으로 이용한다면 돈을 지불할 필요 없이 웹 브라우저 상에서 로그인만 하면 사용이 가능합니다. Figma 피그마는 기간제도 체험도 아닌 개인과 편집자 2명에 한해서 무제한 무료인 점입니다. 디자인 회사를 운영하지 않는 이상 비용을 지불할 일이 없습니다.

오토 레이아웃 시스템

Figma 피그마는 훌륭한 디자인 작업을 지원합니다. 디자인 시스템으로 디자인 속도를 높이고 디자인 일광성을 유지하도록 도와줍니다. PD 키트의 기반이 되는 유용한 기능입니다. ​ ​ 각 컴포넌트는 스타일, 모양 및 기타 구성 요소로 만들어지므로 몇번의 클릭만으로 레이아웃을 쉽게 복사하고 만들어갈 수 있습니다.

디자인 시스템 지정

디자인 작업중, 마무리 단계에서 기존 포토샵을 사용할때 색상이나 글꼴등 클라이언트의 무리한 수정요청이 들어올때가 있습니다. 그럴때마다 디자이너들의 멘탈이 터져나갔는대요, ​ figma 피그마는 애초에 이러한 시스템을 지정할 수 있습니다. 예를 들어 색상 #ffffff와 사이즈 32px인 타이틀로 구축하였을때 클라이언트가 #e4e4e4와 사이즈 42px로 바꾼다고합니다. 여기서 문제가 발생합니다. 수십 페이지의 타이틀을 바꾸니, 서브 텍스트 또한 전부 수정해야하는 현상이 발생합니다. ​ figma 피그마는 이런 문제를 쉽게 해결하기위한 기능을 지원합니다. 처음 지정해놓은 타이틀, 컬러 시스템에서 한 번만 바꾸면 한번의 클릭으로 수십 페이지들이 모두 수정되는 기능을 지원합니다. 

자동 저장과 자동 업데이트 

Figma 피그마는 클라우드 기반이며 서버에 자동 저장하기 기능이 지원됩니다. 포토샵을 사용하신 분들은 아시겠지만 저장을 못해 작업이 날라가거나 프로그램이 멈췄을때 디자이너들의 멘탈이 터져나가지 않게 됩니다. ​ 무료 플랜을 사용하면 지난 작업의 30일까지의 버전 관리가 가능합니다.