Framer Xを使用して対話型プロトタイプを構築する

Sep 15, 2025

操作方法

（画像クレジット：フレーマ）

設計者として、プロジェクトに使用するプロトタイピングツールの問題が常にあります。ワイヤーフレームのようなタスクのためにそこにソフトウェアがたくさんあります（私たちの先頭へ ワイヤーフィールツール そして素晴らしい ウェブサイトのビルダー ）、複雑な相互作用をプロトタイピングして構築する。しかし、これらすべてを取り扱うことができるツールはほとんどありません。 Framerはこれらすべての機能を持ち、小さなアニメーションややり取りを作成するプロセスを大幅に高速化します。

最新の繰り返しフレーマX. マイクロインタラクションとアニメーションを開発するためにCoffeeScriptを使用する代わりに、ReactとJavaScriptを使用します。これにより、荷物時間が速くなり、パフォーマンスが向上します。さらに、Reactコンポーネントの使用は、メディアプレーヤー、リアルタイムデータ、およびプロトタイプ内のリアルタイムデータ、グラフを含めることを含む、ユーザーが追加および拡張するためのより多くのスコープを持っていることを意味します。

テストはプロトタイプビルディングプロセスの中核部分であり、フレーマXはインタラクティブプロトタイプを作成するのが素晴らしいことです。私たちをチェックしてください ユーザーテスト フレーマを補完するための最良のツールのいくつかのために投稿し、実世界のプロトタイプを構築し、あなたが最善を使っていることを確認する ウェブホスティング あなたのためのサービス。

Framer Xでアプリを作成する方法

Framer Xの力を十分に高く評価するために、実際のプロジェクトを作成するつもりです：いくつかのコンテンツとメディアを持つ単純な調理レシピアプリケーション（信頼できるものにバックアップされている資産 クラウドストレージ ）。構築する最初のものはホームページです。以下の要素で簡単に物を簡単に保ちます。

レシピを見つけるための標準検索バー
最近の最近のレシピを表示するための最近のアクティビティ
最も人気のあるレシピのようなものを示すレシピカード
ビデオと共有オプションを使用したレシピの詳細ビューを作成する

開始を取得するには、左側のNavbarの+アイコンをクリックして、新しいフレーム（アートボード）を作成する必要があります。右側のバーの標準のiPhone / Androidテンプレートのリストから任意のアートボードスタイルを選択してください。今、あなたは行く準備ができています。

01.検索バーを構築します

検索バーを構築することから始めましょう。長方形を作成して検索アイコンを追加する代わりに、通常のような検索アイコンを追加することは、実際にFramer Xでクイック再利用可能なコンポーネントを使用できます。これらはパッケージと呼ばれます。店の左側のナビゲーションバーにある数千のパッケージがあります。ストアをクリックし、Androidキットを検索してキットを検索してからインストールします。

これらのパッケージには、カード、ボタン、キーボード、スライダー、入力、ナビゲーションメニューなどの要素が含まれています。これらのパッケージをインストールすると、左側のコンポーネントメニューから要素を使用できます。

フィルタで検索したい要素を見つけます - この場合は、例キットの下にある検索バー。単にフレームにドラッグアンドドロップします。右側のバーを使用して、プレースホルダテキスト、フォントサイズ、カラーなどのプロパティを変更できます。

02.コンテンツスタックを作成します

この最近のアクティビティブロックでは、最初にテキスト「最近のアクティビティ」を追加します。これはかなり簡単です。これで、StacksというFramer Xの新機能を使用できます。これは+アイコンをクリックしてメニューからスタックSを選択することによって行うことができます。スタックを選択した後、作業枠で600 x 300の領域をドラッグアンドドロップしてスタックを作成します。このスタックは青として表示されます。

それでは、コンポーネントセクションに戻り、Androidキットの下で、Card-5要素を検索して作成したばかりのスタックにドラッグしましょう。これらのカードを2回複製し、3つのカードすべてがスタック内にあることを確認します。

それらがスタック内にある限り、これら3つのカードは間隔を心配する必要なしに簡単に再配置することができます。カード間の間隔を増やしたい場合は、スタック全体の幅を増やすことができます。それはそれほど単純です。あなたの好みに応じてタイトルと背景の名前を変更することによって、これらのカードをパーソナライズすることもできます。

スタックを作成したので、スクロールできなくなりましょう。フレーム/アートボードから外します。左側のNAVから+アイコンをクリックして[スクロール]オプションをクリックします。スタック付きのエリアを作成したときは、スタックと同じサイズのフレーム/アートボードにスクロール可能な領域を作成します。

これで、横の矢印を水平にスクロールさせるために右側のバーのスクロールのプロパティを変更します。スクロールコンテナが作成された後は、以前に作成したスタックによって提供されているITのコンテンツが必要です。そのため、スクロールコンテナの矢印プロンプトを使用してスクロールコンテナをスタックに接続するだけです。マウスポインタをスタックにドラッグすることで機能します。

03.垂直スタックを作成します

Interactive Framer X - 01 — Framer Xを使用すると、水平および垂直スクロール可能スタックを紹介できます（イメージクレジット：Vamsi Batchu）

レシピカードの場合は、手順2のような方法に従う必要がありますが、カードの水平スクロールを作成するのではなく、サムネイルを持つ最も人気のあるレシピのリストである似た垂直方向のものを作成します。この演習では、レシピの各カードには4つの要素があります - 画像のサムネイル、評価、レシピの名前とそれを準備するのに必要な時間。

各カードの詳細について心配しないでください。彼らはあなたのデザインの味に基づいてパーソナライズすることができます。コンポーネントからカードの使用方法と同じ方法で、それらを複製し、それらのすべてを垂直スクロール付きのスタックに追加します。

04.新しいページを作成します

それでは、特定のレシピの詳細にアクセスするために新しいページを作成しましょう。たとえば、ここで2番目のカードのケースを取りましょう。フランスのパスタ。この新しいページを作成するには、新しいフレーム/アートボードを作成し、フランスのパスタレシピに関する詳細を表示するために必要な要素を紹介します。この新しいページは、ビデオ、タイトル、評価、それを作るのに必要な時間、リストに保存やソーシャルメディアに共有するためのいくつかのアクションボタンに分類できます。

ビデオを追加するには、ストアに移動してYouTubeパッケージをインストールします。これにより、プロトタイプにビデオを楽に追加できます。これで、Componentsパネルに移動し、YouTube要素をYouTubeコンポーネントの下からフレームにドラッグアンドドロップします。

サムネイルの幅を調整してフレームの幅にフィットします。 [適切なプロパティ]ペインで、プロトタイプで再生するビデオのURLを挿入できます。ご希望の場合は、プロパティパネルのチェックボックスを介してビデオを自動化する方法もあります。

このビデオの下では、タイトル、評価とさまざまなアイコンを追加できます。この例でアイコンを追加するには、アイコンジェネレータストアからコンポーネントを使用しました。これは簡単なプロセスです。基本アイコンをフレームにドラッグアンドドロップしてから、右側のパネルのアイコンと呼ばれるプロパティを 'Heart'と 'Share'に変更します。これにより、ベースアイコンがそれぞれ保存および共有アイコンに変更されます。右側のパネルを使用して、それらの色も簡単に変更できます。

物事を訪問者に簡単にするために、成分と呼ばれるセクションを追加することができます。この場合は、この場合はフランスのパスタがあります。

05.相互作用を紹介します

Interactive Framer X - 02 — ボタンと要素への相互作用をより多くの魅力的にするために追加する（イメージクレジット：Vamsi Batchu）

ボタンのための対話を追加することによって私たちのデザインをより多くの魅力的にしましょう。理想的には、共有アイコンをクリックすると、さまざまなソーシャルメディアチャンネルを介してレシピを共有するための画面が表示されます。新しいフレームを使ってそれを構築しましょう。

このフレームの幅と高さが、作成した他の2つのフレームほど同じ幅と高さであることを確認してください。この新しい共有画面がスライドアップし、共有アイコンがクリックされたときに現在の画面を置き換えます。

画面を区別するのに役立つように、それにいくつかの色を追加して、Facebook、Instagram、Whatsapp、Eメールなどのソーシャルメディアのアイコンを記入しましょう。このシェア画面にはXアイコンが追加されている必要があります。クリックしたときに元の状態に戻ります。

すべてのアイコンがスタックの内側に配置されていることを確認してください。 Xアイコンが含まれるとすぐに、次のステップは、共有アイコンをクリックしたときにポップアップするようにこのフレームをリンクすることです。

これを行うには、共有アイコンを含むフレームを選択します。右側のパネルでは、リンクと呼ばれるプロパティがあります。それをクリックすると、アプリケーションインターフェイスは作成した新しい共有フレームにドラッグできる矢印を入力します。これにより、バックグラウンドにリンクが作成されます。

Shareアイコンを選択すると、リンクの下の右側のパネルの新しいプロパティを監視します。これは、ターゲット、遷移と方向です。これらのプロパティのそれぞれで、遷移の種類や画面がポップアップする方向など、要素を変更できます。

プロトタイプが機能しているかどうかをテストできます。インターフェイスの右上隅にあるPlayアイコンをクリックしてください。同様に、ユーザーがXアイコンをクリックすると、前の画面に戻るように、Share画面をビデオ画面にリンクする必要があります。

これは、同様のリンクプロパティを使用してビデオ画面としてターゲットを追加することができます。ビットのビットを追加するのにGOを持ちたい場合は、上位の代わりにDirectionを残してからPLAYコマンドを使用して、やり取りが機能しているかどうかをテストします。

06.保存ボタンを追加します

それでは、保存アイコンにオーバーレイインタラクションを追加しましょう。ここでは、私たちの目標は、訪問者がハート型のアイコンをクリックすると、レシピをカスタムメイドのリストに保存するかどうかを尋ねるポップアップウィンドウが表示されます。

保存リストと呼ばれる新しいフレームを作成することから始めましょう。前のものと同じように、このフレームが同じ幅を持つことを確認してくださいが、クリックされたときにオーバーレイとして表示されるため、高さを減らす必要があります。保存されたリストフレームのスタイリングの場合は、ヘッダーを追加し、テキスト入力を入力してリストの名前を入力し、保存するためのCTAです。

リンクするには、ビデオフレームのハート形のアイコンを選択し、保存リストフレームへのリンクを追加します。さて、移行プロパティがプッシュである代わりに、それをオーバーレイにします。それを80％に調整してから、PLAYボタンを使ってテストします。オーバーレイに満足するまで変更します。保存されたリストのアイコンのXアイコンをビデオページにリンクします。

これはFramer Xを使用して使用可能な対話型プロトタイプを簡単に作成する方法です。また、使用できる高度なツール、およびフレームの要素にReact Coding Snippetsを追加するだけでなく、追加のツールもあります。また、Framer Xの最良の部分は、誰でもそれを少数のプロトタイプで試すことによってそれを習得できることです。

この記事はもともと、Webデザイナーや開発者向けの世界で最も売れている雑誌であるNetの第325号に掲載されました。 問題325を購入する または 申し込む ネットに。

An image promoting GenerateJS on Thursday 2 April 2020 at Rich Mix, Shoreditch, London featuring Remy Sharp, Phil Hawksworth, Jeremy Keith and Nadieh Bremer. — GeneratyJSでより良いJavaScriptを構築する方法を学びましょう（イメージクレジット：未来/レミーシャープ/ Phil Hawksworth / Jeremy Keith / Nadieh Bremer / Toa Heftiba、Unsplash）

2020年4月に参加しましょうJavaScriptがより良いJavaScriptを構築するのに役立つ会議。今すぐ予約 GenerateConf.com

続きを読む：

目の際に、UXデザイナーとして雇われる方法
あなたが知る必要がある20のUXのヒント
22最高のUIデザインツール

Framer Xを使用して対話型プロトタイプを構築する

Framer Xでアプリを作成する方法

01.検索バーを構築します

02.コンテンツスタックを作成します

03.垂直スタックを作成します

04.新しいページを作成します

05.相互作用を紹介します

06.保存ボタンを追加します

操作方法 - 最も人気のある記事

動物を描く方法：15トップヒント

vue.jsを使ってアプリを作成する方法

Photoshopでスマートレイヤを使う方法

スピードスカルプトズブラシのクリーチャーを彫刻する

モノタイプ印刷を始めましょう

クリーチャー解剖学

Scratchからeコマースサイトを構築する

角度のフルページのウェブサイトを構築する方法

カテゴリ