UI & UX

[UI/UX] UI 디자인, 프로토타입, 그리고 피드백까지 - 피그마(Figma)에 대해 알아보자

디자이너 진희 in NZ 2020. 11. 8. 19:10

안녕하세요?

오늘은 해외 디자인 업계에서 많이 쓰고, 저도 실무에서 쓰고 있는 유저인터페이스, 프로토타입 툴인 피그마(Figma)에 대해서 알아보도록 하겠습니다.

 

피그마(Figma)란? www.figma.com/

 

피그마(Figma)는 클라우드 베이스 디자인 프로토타입 툴로, 스케치(Sketch)어도비 XD와 같이 프로토타입을 설계하는 툴입니다. 화면이나 기능적인 면 등에서 스케치와 유사하다고 볼 수 있는데요. 하지만 가장 큰 차이점 두 가지가 저에게 매력적으로 다가왔습니다.

 

 

1. 어느 환경에서도 사용할 수 있는 피그마

 

스케치 프로토타입은 애플 제품에서만 이용 가능한 반면, 피그마는 맥(Macs), 윈도우PC (Window PC)에서도 사용 가능하고, 웹(Web)페이지에서 또는 프로그램을 설치 해서도 사용할 수 있으므로 어느 환경에서든 사용한다는 점이 매우 매력적입니다. 특히 필자는 두 운영체제를 같이 쓰기 때문에 더할 나위 없이 편리한데요. 회사에서는 웹사이트로 접속하여 피그마를 사용하고, 집에서는 데스크탑에 설치 된 피그마를 동시에 사용해도 전혀 문제가 없으며, 따로 저장하지 않아도 자신의 작업물을 잃어버릴 일이 없습니다. 그리고 많은 개발자들은 대체로 윈도우 운영체제를 쓰기 때문에 팀으로 콜라보레이션을 했을 때도 용이하다는 이점이 있습니다.

 

 

 

2. 팀 콜라보레이션, 동시 접속, 동시 작업 가능, 피드백까지

 

피그마는 동시에 접속 가능하고, 동시에 또 작업이 가능합니다. 디자이너가 한쪽에서 작업을 하고 있을 때, 개발자가 같은 프로젝트에 들어와서 작업물들을 확인할 수도 있고, 프로젝트 매니저도 접속하여 피드백을 남길 수도 있습니다. 그래서

목업 디자인 > 프로토타입 디자인(선택) > 드래프트 디자인 출력하여 보내기 > 리뷰 후 목업 디자인 다시 업데이트 하기

의 긴 프로세스를

목업 디자인 > 실시간 리뷰와 수정으로 프로세스를 단축시킬 수 있습니다. 

 

피드백 남기기

 

 

디자인 시스템을 피그마에서 관리하기

 

팀 콜라보레이션과 클라우드 베이스라는 강력한 기능 때문에 디자인에 필요한 모든 컴포넌트들을 한 곳에 모아 라이브러리로 만들어 공유할 수 있습니다. 업데이트 버전을 매번 파일로 공유하기보다, 실시간으로 바로 업데이트를 할 수 있습니다.

아래 영상처럼, 색상 및 폰트 스타일 등을 디자인 시스템으로 만들어, 시스템 내의 색상 하나를 변경해야 할 시 전체를 변경할 수 있도록 링크 되어 사용할 수 있습니다.

 

라이브러리처럼 저장된 색상을 변경 시, 색상이 적용된 모든 개체의 색이 자동으로 변경됩니다. 

 

 

결론

 

피그마를 실제로 사용하고 적응하면서 많은 장점들을 보게 되고 그 편리함을 느끼게 됩니다. 무료로 언제든지 시작할 수 있으며, 유료로 시작하더라도 그 가격이 저렴하여 적은 가격으로 디자인 시스템을 투자할 가치가 있다고 생각합니다. 

 

 

그럼 이 글이 도움이 되었길 바랍니다!

 

 

1 2 3 4