💡Figma란?
Figma는 UX/UI 디자인 및 프로토타입 제작을 위한 기능을 온라인에서 사용할 수 있는 디자인 툴이다.
웹, 앱, 인터페이스 디자인 등 다양한 분야에서 사용되며, 디자인과 개발 과정에서 필요한 여러 협업 기능을 지원한다.
2022 Design Tools Survey 결과, 현업에서 UI 디자인과 프로토타이핑에 가장 많이 사용하는 툴로 Figma가 선정되었다.
프로토타이핑 툴의 차이점
| 피그마 (Figma) | 스케치 (Sketch) | 프레이머 (Framer) | 포토샵 (Photoshop) | |
| 실행 환경 | 웹, 프로그램 | 프로그램 (MAC OS만 가능) |
웹, 프로그램 | 프로그램 |
| 실시간 공동 작업 | O | X | X | X |
| 히스토리 관리 | O | X | O | X |
| 애니메이션 프로토타이핑 |
O | O | O | X |
| 디바이스별 대응 | O | O | O | X |
위 표를 통해 각 프로토타이핑 툴의 차이점을 살펴보도록 하자.
실행 환경
스케치는 맥 OS에서만 설치를 할 수 있으며, 포토샵은 프로그램으로만 사용할 수 있다. 그리고 프레이머는 Figma와 같이 웹에서도 사용이 가능하고, 프로그램도 설치해서 사용할 수 있지만, 진입장벽이 높은 편이다.
반면에 Figma는 인터넷 환경만 접속할 수 있다면 디자인을 할 수 있으며, 실시간 공동 작업을 할 수 있기 때문에 디자이너, 마케터, 개발자 간에 더욱 원활한 소통이 가능하다.
히스토리 관리
디자인 작업의 특성상 수정이 굉장히 잦고, 각자의 심미안이 달라 새로운 피드백을 반영해야 하는 경우가 생기는데, Figma는 며칠 전에 작업한 것까지 모두 클라우드에 자동 저장하므로 불러오고 적용하기가 쉽다.
애니메이션 프로토타이핑
포토샵에서는 정적인 화면만 보여주기 때문에 동적인 화면을 보여주려면 gif 파일을 생성하는 별도 작업이 필요하다. 하지만 Figma는 애니메이션 프로토타이핑 기능을 지원하여 개발자가 없더라도 디자인이 움직이고 구동하는 모습을 확인하는 게 가능하다.
디바이스별 대응
Figma는 Windows OS, Mac Os, Android, ios 등의 기종에 따라서 템플릿이 만들어져 있다. 이를 불러오기만 하면 원하는 디바이스에 디자인을 하는 게 가능하다. 디바이스별 대응을 하기 때문에 제공하는 대지 사이즈에 맞춰 디자인을 하기만 하면 된다.
참고자료
피그마 입문 A to Z 부트캠프, Rena, MetaCode, 2024.01.26.
피그마(Figma) 사용법 | 기본 단축키부터 유용한 기능까지, 코드스테이츠, 2023.04.14.
