Framer는 자신을 아래와 같이 소개하고 있습니다

• 팀을 위한 최고의 프로토타이핑 도구
• 강력한 디자인 도구
• 실시간으로 프로젝트를 함께 설계, 비평 및 테스트

실제로 Toss 의 사례를 보여주고 있습니다.

Framer 이전에 Toss 팀은 Abstract, Sketch, Zeplin 및 Storybook을 사용하여 개념에서 프로덕션으로 이동

이전 프로세스에서 디자이너와 개발자는 너무 많은 시간을 할애

Framer는 디자인 툴과 스크린을 제공하여 요소들을 배치할 수 있으며, 해당 요소에 대한 컴포넌트를 code component로 작성할 수 있습니다

더 나아가 props 데이터를 DOM Tree로 만들어 디자인 요소들의 대한 데이터를 바로 보여줌으로써 디자인 툴에서 작업한 내용을 바로 code로 받아올 수 있는 단계까지 나아갈 수 있음을 볼 수 있었습니다

**https://youtu.be/LmLchZ4tCXc : 토스 디자인 시스템**

테스트 예시)

1. 오른쪽 영역이 디자인한 스크린이고 왼쪽이 Data파싱을 위해 개발한 code component 라고 생각했을 때, 파싱 컴포넌트의 빨간색 영역에 컴포넌트 코드를 출력해줄 수 있습니다

1. preview기능은 code component 실행에 대한 결과나 실행화면을 볼 수 있습니다