Libx Awesomeリスト

    このページの内容

    Awesome Framer

    Framerを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

    目次

    一般情報

    記事

    動画

    • Stripe Speaker Series: Designing with Framer - コエン・ボクとジョルン・ヴァン・ディクが、Framerについての短いトークとQ&Aを行う。その中で、プロトタイピングの一般論や市場に存在するさまざまなデザインツールについての議論も含まれる。
    • FORM SF 2014: Panel - Design Tooling - 人気デザインツールの開発者たち（Framerのコエン・ボクを含む）が、プロトタイピングの価値、デザイナー向け製品開発における学び、そしてUXツールの未来についてのディスカッションを行う。

    チュートリアル

    動画コース

    書籍

    サンプル

    モジュール

    • framer-googlefonts - Framerプロトタイプ用のGoogle Fontsローダーモジュール.
    • tabBarModule - FramerでiOSのタブバーを再現するモジュール.
    • framer-animation-collections - 大量のアニメーションを管理するためのFramerクラス.
    • framer.iosnotification - FramerでiOS通知を再現するモジュール.
    • Framer-Grid - Framerにグリッドオーバーレイを生成する柔軟なモジュール。プロトタイプ上にコンテンツを正確に配置したり、設計プロセスの初期段階で実験を行うために便利です.
    • shortcuts-for-framer - Framerによるモバイルプロトタイピングを簡単にするための便利な関数のコレクション.
    • framer.placehold - Framer用のモジュールで、さまざまな画像プレースホルダーサービスを提供するライブラリを備えています.
    • FramerNavigationComponent - iOSに基づいた再利用可能でカスタマイズ可能なナビゲーションコンポーネント（Framer用）.
    • RippleTransition.framer - マテリアルデザイン風のリップルトランジションを再現するFramerモジュール.
    • framer-icon - Framerがテンプレート画像に基づいて動的に色をつけるアイコンを生成します.
    • framer.makeGradient - Framerで静的線形または放射状グラデーションを作成しやすいようにするモジュール。アニメーションしたい場合は、プルリクエストをお待ちしています.
    • WatchKit-Framer - Apple Watch Kit用のFramerモジュール.
    • Framer-AudioPlayer - Framer用のAudioPlayerモジュール.
    • Framer-VideoPlayer - Framer StudioおよびFramer用の動画プレイヤーモジュール.
    • Framer-Module-ShakeEvent - Framer用のShakeEventモジュール.
    • Framer-Module-UISound - Framer用のUISoundモジュール.
    • CameraLayer - Framerでカメラ画像を表示するレイヤー.
    • ios-keyboard-for-framer - Framer用のiOSキーボードモジュール.
    • textLayer-for-Framer - Framerでプロトタイプにテキストを追加するプロセスを簡略化するモジュール。
    • Kinetics - Framer Studioプロジェクト内の任意のレイヤーに対して、再読み込みなしでスプリングアニメーションをテストできます。
    • framer-flip-card-module - Framerモジュールで、2つの画像レイヤーを使ってフリップカード効果を迅速に作成できます。
    • Input-Framer - Framerモジュールで、デザインの入力を実際の入力に簡単に変換できます。
    • StickyHeaders-for-Framer - Framerのスクロールコンポーネントに固定ヘッダーを追加するモジュールです。
    • OrientationEvents - Framerでデバイスの向きイベントを処理するモジュールです。
    • ScaleFrame - Framerでスケーリングされたレイヤーの新しい寸法を使ってプロパティを計算するモジュールです。
    • framer-label - Framer向けのマルチライントリムをサポートするラベルモジュールです。
    • framer-equally-rotate-images - このモジュールに画像の配列を渡すと、それらが円周上を均等に回転します。
    • framer-colour-transition - Framerでレイヤーの背景色をトランジションするモジュールです。
    • framer-webview - Framer向けのウェブビューモジュールです。
    • framer-uistatusbar - Framer向けのiOSステータスバーモジュールです。
    • framer.module.ajax - AJAX通信用のFramerモジュールです。
    • framer.module.fill - Framer向けのフィルモジュールです。
    • SpeechSynth - Framer向けのWeb Speech Synthesisモジュールです。
    • Comment-for-Framer - Framerでプロトタイプ内のコメントを作成するためのモジュールです。
    • framer-viewNavigationController - FramerJS向けのシンプルなコントローラーで、数行のコードでビュー間のトランジションを実現できます。
    • Layers-for-Framer - Framerプロジェクト内のレイヤーを簡単に見つけるためのモジュールです。
    • Framer-Highlightr - プロトタイプ内のクリック可能なレイヤー上にホットスポットを表示するカスタムFramerモジュールです。
    • SVGLayer - FramerでSVGパスを扱うためのモジュールと、対応するSketchプラグインです。
    • VRComponent - Framer向けの仮想現実コンポーネントです。
    • 3D Touch Module - iOS 3D Touch対応用モジュール by Jordan Dobson.
    • Simple Android Ripple - タッチリップルアニメーションを任意のレイヤーに追加するためのFramerモジュール.
    • Simple Android Keyboards - 1行のコードで、あなたのFramer Studioプロジェクトに静的なAndroidキーボードを簡単に追加できます.
    • Simple Android Toast - このモジュールを使用して、Framer StudioプロジェクトにAndroidトーストを簡単に追加できます.
    • Simple Android Snackbar - プロジェクトにAndroid Material Design Snackbarsを追加するためのFramerモジュール.
    • Framer Path - カスタムSVG形状を作成し、各ポイントを個別にアニメーションできます.
    • Material Kit for FramerJS - Material Designでのプロトタイピングを高速かつ簡単に実行できるよう、品質やカスタマイズを犠牲にせずに実現します.
    • iOS Kit for FramerJS - iOSでのプロトタイピングを高速かつ簡単に実行できるよう、品質やカスタマイズを犠牲にせずに実現します.
    • framer-Firebase - Firebaseモジュールは、Framerプロトタイピングが複数のセッションおよびデバイス間でデータを簡単に読み込み、保存、同期できるようにします.
    • spotifyApiFramer - Spotify APIでクエリを行う際にJSONオブジェクトを取得できるFramerモジュール.
    • ViewController-for-Framer - 事前定義された「フェードイン」「ズームイン」「スライドイン」などのトランジションを使い、複数ステップのユーザーフローを作成できるFramerモジュールです。
    • Gridddle - FramerJS用のグリッドモジュール.
    • SliderLibrary - スライダーを作成するためのFramerライブラリ.
    • StickyHeaders-for-Framer - Framerのスクロールコンポーネント内で固定ヘッダーを有効にするモジュールです。
    • framer-view-stack - 複数のレイヤーが上に重なって表示されるビューを作成するためのFramerモジュール.
    • RemoteLayer - RemoteLayerモジュールは、tvOSアプリプロトタイピングに即座にインタラクティブなApple TVリモコンを生成できます.
    • distribute-layers - 複数のFramerレイヤーの配置を簡単に実現できるパッケージです.
    • Framer-ValueLayer - ValueLayerは、プロトタイピングにおける数値の管理とそれらの間のアニメーションを支援するレイヤーのサブクラスです.
    • perspective-view - FramerJSでプロトタイピングのパースペクティブビューを有効にするためのモジュール.
    • Pair - Framer用のドラッグ＆ドロップモジュール。
    • Cloudstitch Framer Module - モジュールは、Google スプレッドシートやMicrosoft Excelからデータを直接Framerプロジェクトに読み込むことができます。
    • framer-QueryInterface - FramerプロトタイプがURLの最後部分（クエリ部分）から変数を読み取り、変数を書き込むことができるモジュールです。
    • Framer StatusBarLayer - iOSアプリプロトタイプに正確でカスタマイズ可能なステータスバーを生成するためのモジュールです。
    • Loading Placeholder - レイヤーのスタイルに基づいて、即座にロードプレースホルダーを作成するモジュールです。
    • lottie-framer - Framerモジュールは、After Effectsからエクスポートされたアニメーション（JSONファイル）をAirBnbのLottie-Webでレンダリングします。
    • ControlPanelLayer - Framerプロトタイプ内でプロトタイプの要素を制御できる開発者パネルを作成するためのモジュ便です。
    • GradientHelper - Framerレイヤーにグラデーションを適用するプロセスを簡略化し、アニメーショングラデーションを可能にするモジュールです。
    • FocusEngine - Apple TVおよびRokuに存在するグリッドフォーカス動作をシミュレートするモジュールです。
    • MapboxLayer - プロトタイプに強力なMapboxマップを作成するためのモジュールです。
    • Framer Sheet - Google Sheetsから情報をFramerにインポートします。
    • FramerAudio — Framerでオーディオインターフェースを設計できるモジュールです。
    • Framer Slider - スライダーを設計し、カスタマイズ性を失わずに実際の動作に変えることができるモジュールです。外観と論理は分離されています。
    • iOS-11-Framer - FramerのiOS 11デザインシステムGUIです。
    • framer-Symbols - Framerでシンボルを作成するためのモジュールです。
    • framer-moreutils - Utilsに便利なヘルパー関数を追加するモジュールです。
    • framer keyboardEvents - Framer用の手軽なキーボードバインディング：キーのコードを調べる必要がなく、100以上のキーをサポートし、パフォーマンスへの影響は最小です。
    • Framer Joystick - ゲームパッドを用いたUIプロトタイプを作成するためのモジュールです。
    • Framer Feedback - Framerのフィードバックモジュールは、フィードバックメッセージを使ってプロトタイピングをより簡単に行うことができます。
    • Framer-Bottom-Navigation - FramerにAndroidのボトムナビゲーションを追加するためのモジュールです。
    • Framer Device Rotator - デスクトップブラウザやFramer Studioで表示されたときに、電話やタブレットに回転ボタンを追加するFramerモジュールです。
    • Keyboard Input for Framer - キーボード入力の管理を簡単にできるモジュール
    • Framer DesignComponents - デザインモードでの設計をコードに変換するためのモジュール。コードの1行も書かずに、完全にスケーラブルなクラスに変換！
    • Framer Web Audio API Module - Framerプロジェクトにより良いオーディオサポートを提供するFramerモジュール
    • Framer Status Bar Module - Framerアプリケーションにステータスバーを初期化するためのモジュール
    • Framer Android Picker - Androidのピッカー用モジュール
    • Yummy Framer - YummyはLoadViews、LoadNextView、フェード＆レイヤー移動などのカスタムレイヤー関数を提供します
    • Framer Font Loader - Framerプロトタイプにローカルおよびウェブフォントを簡単に、信頼性高く読み込む
    • Framer Form - Framerプロトタイプに3次元を追加する
    • FramerMapboxJS - FramerプロトタイプにMapbox地図を統合するためのモジュール

    UIライブラリ

    • iOS 11 iPhone GUI - iOS 11の公開リリースに含まれるGUI要素のテンプレート
    • Framework - Framer用の汎用コンポーネントキット

    サイト

    • Prototyping With Framer - Kenny Chenによるブログ。多くの素晴らしい例とチュートリアルが含まれています
    • Framer Code - Framerモジュール、コード例、スニペット、ヒントのコレクション

    その他

    • framer-modules - お気に入りのモジュールを1か所で発見・インストール・保存
    • Framer Snippets - Framerスニペットのライブラリでワークフローを速くする
    • Stitch - スケッチデザインからFramerプロトタイプにインタラクションを追加するための軽量フレームワーク
    • framer-bootstrap - あなたの好むエディタと環境でFramerライブラリを使用
    • Fiber - 15画面分の無料インタラクティブUIキット
    • Voyage - 完全にインタラクティブでFramer用に作られた旅行テーマの無料UIキット
    • iOS Kit - 次に始めるiOSアプリのための即時使用可能な要素。直接リンク
    • Android Kit - 次のAndroidアプリに必要なMaterial Design要素。直接リンク。
    • Web Kit - 次に始めるウェブプロジェクトに必要なすべての要素。直接リンク。
    • Wireframe Kit - 次の大規模プロジェクトをプランニングするための基本的なワイヤフレーム要素。直接リンク。
    • AllFramer - Framerのテンプレート、コンポーネント、ブロック、プラグインなど、厳選された一覧を、高速検索とフィルタリングで探検！

    ライセンス

    CC0