Framer Studio

Framer Studio는 빠른 프로토타이핑을 위한 오픈소스 프레임워크인 Framer.js를 기반으로 구축되었습니다. Framer를 사용하면 애니메이션과 상호작용을 정의할 수 있으며, 모바일 기기에서도 실행됩니다.

GitHub 소스 코드 | 하드웨어 가속 이벤트 및 3D 애니메이션 | 스프링 물리 엔진

Framer.js를 사용하는 기업: Google, Facebook, Instagram, Stripe

생성: Sketch 및 Photoshop에서 자산을 자동 생성하여 새 프로젝트를 신속하게 설정합니다.

애니메이션: 스프링 물리와 베지어 곡선을 활용해 3D 공간 내 임의의 레이어를 애니메이션화할 수 있습니다.

성능: CSS Transform을 통한 하드웨어 가속으로 고프레임률 렌더링을 실현합니다.

유연성: 데스크톱, 모바일, 태블릿 모두 지원하며 WebKit과도 원활하게 작동합니다.

통합 워크플로우: Photoshop 및 Sketch와의 통합 기능을 통해 정적 디자인에서 직접 레이어를 가져와 인터랙티브 프로토타입으로 변환할 수 있습니다.

인터랙션 창조: 효율적이고 즐거운 코딩을 가능하게 하는 에디터를 통해 코드 기반의 유연한 인터랙션 설계를 구현합니다.

CoffeeScript: Framer Studio는 JavaScript를 보다 간결하고 가독성 높게 작성할 수 있는 CoffeeScript를 사용합니다.

코드 조각: 내장된 코드 조각 라이브러리를 통해 한 번의 클릭으로 레이어와 인터랙션을 추가할 수 있습니다.

자동 완성: Framer에 최적화되어 모든 함수, 속성, 변수 및 사용자가 지정한 레이어 이름을 지원합니다.

인라인 오류 표시: 문제 발생 위치를 즉시 파악할 수 있습니다. 내장 JavaScript 콘솔을 통해 심층 디버깅이 가능합니다.

무한한 창작: 즉각적인 인터랙티브 시각 피드백, 다중 기기 지원, 전체 화면 프레젠테이션 모드를 제공합니다.

프레젠테이션: 전체 화면 프레젠테이션 모드를 사용해 몰입감 있는 프로토타입 데모를 진행할 수 있습니다.

미리보기: 제작 중에도 픽셀 단위로 정확한 실시간 미리보기를 즉시 확인할 수 있습니다. 프로젝트별로 보기 모드를 맞춤 설정할 수 있습니다.

기기 미리보기: iPhone, iPad, Android 또는 전체 화면에서 프로토타입을 미리볼 수 있습니다.

공유: 프로젝트를 빠르게 내보내어 어디서든 업로드할 수 있습니다. Framer 프로젝트를 공유하여 협업을 쉽게 수행할 수 있습니다.

필요 사양: OS X 10.8 이상

스크린샷: 광고 차단기 사용 시, 본 사이트를 화이트리스트에 등록해 주세요. 광고 수익은 고품질 콘텐츠를 제공하기 위한 핵심 재원입니다! 또는 이 문서를 읽어 지원 방법을 확인하세요.