Framer 사용하기

hailey·2022년 12월 9일
0

TIL

목록 보기
13/14

제플린, 스케치, 피그마에 이어서 핫하게 사용되고 있는 Framer를 사용하기로 했다.

Framer는?

  • 화면 드로잉부터 애니메이션,페이징, 스크롤 등 다양한 제스처 기능까지 화면의 디자인에 필요한 모든 기능을 제공하며 빠르게 퍼블리싱이 가능한 디자인 툴이다.

  • 애니메이션 기능이나 코딩 없이 퍼블리싱 할 수 있다는 점에서 많은 디자이너, 개발자들이 사용하는 듯 (그리고 베타긴 하지만 handshake 기능이 좋아보인다)

  • 반복되는 디자인 요소를 시스템화하여 빠르게 인터랙션에 따른 디자인이 구현할 때 편리하다 (토스가 이렇게 사용 중)


  • 그동안은 스케치 -> 피그마를 사용하면서 더 쉽게 작업할 수 있다는 장점을 느꼈는데(다른 팀원과의 접근성 + 시스템화) 퍼블리싱이나 프로토타입으로 확인하는 기능이 아쉬웠다. 그런데 프레이머는 더 잘 쓰게 해주는 듯?

  • 디자인 툴로 디자인 작업을 하고 코드로 뽑아서 연결시켜주는 시도들은 제플린, 스케치, 피그마에서도 계속 있어왔다. 그렇지만 그 코드를 막상 복붙해서 넣으면 다를 때가 많아서 디자인 + 개발자의 디자인 감에 맞춰서 다시 작성해야했다. 프레이머는 리액트 코드 기반 툴이기 때문에 그런 부분에 있어서 더 유연하게 느껴진다. 디자인 + 코딩을 다 할 줄 아는 사람이 할 때 되게 메리트를 느낄 듯! (그리고 큰 프로덕트의 시스템을 바꿀때)

0개의 댓글