Figma와 Framer 소개
선요약
피그마의 주요 목적은 UIYX디자인
프레이머의 주요 목적은 웹퍼블리싱
피그마와 프레이머는 서로 닮아가고 있다.
레이아웃 등 외형도 비슷하다.
피그마
일러스트나 포토삽에 비해 편하고 앱 ui를 위해 만들어진게 느껴진다.
UXUI 디자인 툴이 메인 기능이었고 일러스트나 포토샵에 비해 편하고 앱UI를 위해 만들어진게 느껴진다.
프레이머
2020년 전까지는 코딩 툴이었지만 어느 순간 노코딩이 되었고 2020년도 쯤 갈아엎었다. 그 때부터 웹을 노코드로 만들어서 릴리스를 해주는 방향으로 전향했다.
키 포인트
- 피그마처럼 디자인을 할 수 있는데 웹을 디자인하는 것에 중점이 맞춰져 있고 퍼블리시까지 해결했다.
- 호스트 역할과 서버 역할도 다 하게 해주는 기능까지 있고, 디자인을 하면 그게 다 코드로 넘어간다.
Figma와 Framer를 사용하는 이유는?
피그마
디자이너를 위한 툴이다.
디자이너가 앱을 만들 때 와이어 프레임을 짜고, 앱의 UIUX를 디자인해서 개발자한테 넘기기 전까지의 과정이다.
뒤에 코딩 구현이 하나도 안 돼 있는 상태인 것이다.
그리고 앱을 개발하기 전에 프로토타입 UIUX를 개발 해놓고 어떻게 전환되는지 인터렉션이 잘 되어 있다.
프레이머
주요 목적은 웹디자인과 퍼블리싱이다.
피그마와 닮았지만 가장 큰 차이점은 포로토타이핑이다.
피그마는 보여주는 것에 무게를 많이 둔다면 프레이머는 프로토 타입을 기준으로 구현한다는 것에 무게를 많이 둔다.
Figma와 Framer 중 하나를 선택한다면?
단위
- 피그마:
소수점 단위로 디테일하게 다룰 수 있다. - 프레이머:
1 단위(0.5단위도 가능)로 다룬다.
사용 난이도
- 피그마:
자유도가 높고 훨씬 직관적이다. 그림 그리듯 그냥 그리면 된다.
프레이머와 달리 다 만들어놓고 그룹을 묶을 수 있다. - 프레이머:
어떤 그룹을 클릭해서 그 안에 뭘 넣고 입력하는 등 복잡하다.
물론 오토 레이아웃이라고 하는 섹션을 묶어서 더 편하게 관리할 수 있게끔 하는 그룹핑 기능이 잘 되어있긴 하지만, 프레이머는 애초에 만들 때 전체적인 큰 틀을 짜고 가는게 좋다.
프레이머는 반응형이기 때문이다.
디자이너와 개발자의 선호도
- 디자이너:
디자이너 입장에서 더 직관적인 툴이다. - 개발자:
개발자 입장에서는 프로그램 UI만 봤을 때 피그마보다 프레이머가 훨씬 직관적일 수 있다.
업로드 용량 제한
향후 패치로 변동 가능
- 피그마:
피그마는 퍼블리싱을 할 일이 없기에 용량 제한이 관대하다.
현재 동영상 100메가까지 가능하다. - 프레이머:
패치로 미디어파일 업로드에 5MB 이하만 가능한 용량제한이 생겼다.
Figma와 Framer의 또다른 활용법은?
피그잼
피그마의 또 다른 프로그램
여러 사람들이 온라인 환경에서 쌍방으로 소통하며 실시간으로 공유 가능한 큰 보드를 열어준다.
피그잼의 경쟁툴
프리폼, 미러보드
피그마의 경쟁툴
어도비XD, 스케치
프레이머의 경쟁툴
윅스, 아임웹, 카페24 등의 웹퍼블리싱 툴
프레이머로 PPT 제작
피그마처럼 프레이머도 PPT 제작 가능
- 프레이머 PPT 장점:
-
프레이머는 웹퍼블리싱이 가능하므로 구독을 안 해도 프레이머 자체 호스트 페이지 주소를 만들어서 인터넷으로 들어갈 수 있다.
만약 거기서 인터랙션이 버튼식으로 필요할 경우, 거기서 컴포넌트를 만들어서 버튼을 만들면 된다.(슬라이드를 웹으로 만들어버림) -
피그마에 비해 수치가 저절로 맞아떨어져서(자동) 빠르게 PPT 제작 가능
-
PPT 파일이 필요없다.
-피그마 PPT 단점:
정확한 규격을 맞추는 데 의외로 시간이 오래 걸린다.결론
피그마는 디자이너가 코딩 공부를 하며 개발자로 달려가는 느낌
프레이머는 개발자가 디자인 공부를 해서 디자이너로 달려가는 느낌프레이머는 이미 코드를 짠 컴포넌트들을 제공
프레이머를 쓰는 유저들끼리 컴포넌트를 만들어서 공유도 한다.프레이머는 만드는 순간 코딩이 코딩이 되는 것이라 피그마에 비해 무겁다. 다만 디자인한 걸 바로 퍼블리시 버튼으로 구현 가능하다.
피그마는 그린 것들을 프로토타입화, 코딩화를 해야한다.
참고 자료
