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 以降

スクリーンショット：広告ブロッカーをご利用の場合、当サイトをホワイトリストに登録してご支援ください。広告収入こそが、皆様に高品質なコンテンツを提供する原動力です！あるいは、こちらの記事で支援方法をご確認ください。