フレーマーチュートリアル：見事なインタラクティブプロトタイプを作成する方法

以下のプロトタイプの例を見てください。 これらはフレーマーで行われました。 このチュートリアルを終えると、すぐに独自の素晴らしいアニメーションプロトタイプの作成を開始できるようになります。

フレーマーは1週間前に最新バージョンを発表しましたが、プロトタイピング市場は決して同じではありません。 Framerプロトタイピングツールは、以前は習得するのが困難でしたが、最も正確で無制限のプロトタイピングソフトウェアとして役立ちました。 今、物事は変わりました。 Framerには、デザイン+コード+コラボレーション機能が搭載されています。つまり、Framer内で直接プロトタイプを作成し、サードパーティのソフトウェアやコーディングスキルなしで完全に機能するプロトタイプを開発できます。

ここでは、コーディングの予備知識がなくても、簡単なフレーマーコードを使用する方法を説明します。 Framerのデザインモードとコードモードの最高の機能を組み合わせて、アニメーション化されたインタラクティブなプロトタイプを作成する方法を学びます。 それでは、このチュートリアルに飛び込んで、プロトタイプを改善するためにいくつかの小さなコードスニペットを入手してみましょう。

フレーマーの基本

始めましょう！ framer.comにアクセスして、試用版をダウンロードしてください。 彼らはあなたに彼らの完全に機能するデモの2週間を与えています、そして私を信じてください、それはこのプロトタイピングソフトウェアについて多くを学ぶのに十分な時間です。

インストール後、それらが提供するいくつかの例を確認し、それらを少し試してみることをお勧めします。 完了したら、プロトタイピングを開始します。

（このFramerチュートリアルでは、Framer.jsで直接プロトタイプを作成することに焦点を当てます。Framerでプロトタイプを開始する他の方法も知っておく必要があります。たとえば、Sketchファイルを直接操作できます。このワークフローについては、別の記事。）

まったく新しいフレーマー–デザインモード

この記事では、最小限のコード使用で数分以内に3つのクールなプロトタイプを作成します。基本的なインタラクション、スクロールコンポーネント、ページコンポーネントです。

最新バージョンのFramerには、デザインモードという優れた新機能があります。 SketchやFigmaとほぼ同じように作業できます。 ベクターレイヤーを作成したり、画像をインポートしたり、テキストレイヤーを作成してスタイルを設定したりできます。 サードパーティのアプリを使用せずにすばやくプロトタイプを作成する場合は、これらすべてが非常に便利です。

アプリタイプのデザインを作成しましょう

このチュートリアルの最初の部分では、Framerプロトタイプの遊び場を準備します。 ベクター、画像、テキストの3種類のレイヤーを使用してアプリタイプのデザインを作成します。

ステップ1：シンプルなボタンと背景を作成します。

デザインを開始するには、最初のタブ（デザインモード）を選択し、Sketchの場合と同様にアートボードを追加します。 このチュートリアルでは、iPhone 7のプロトタイプを作成するため、このプリセットをアートボードのサイズとして選択しました。 また、青い背景の塗りつぶしを追加しました。

次に、長方形ツールを選択し、単純な丸いボタンの形で形状を作成します。

ステップ2：画像付きのカードを追加します。

レイヤーを追加する2番目の方法は、ドラッグアンドドロップ機能です。 コンピューターから任意の画像ファイルを選択し、Framerにドロップして、右側のサイドバーを使用してスタイルを設定できます。 シンプルなイラストを使ってカードとしてスタイリングしました。

ステップ3：アプリのタイトルを追加します。

フレーマーでは、テキストレイヤーを追加することもできます。 繰り返しますが、スタイリングは基本的に他のグラフィックソフトウェアと同じです。 フォント、サイズ、配置、文字間隔などを選択できます。

ステップ4：どのレイヤーがインタラクティブであるかをFramerに伝えます。

Framerプロトタイプを開始する前に、もう1つのステップがあります。 どのレイヤーがインタラクティブになるかをFramerに指示するだけです。 レイヤーパネル内のレイヤー名の横にあるドットをクリックするだけです。 さらに使用できるように、各レイヤーに適切な名前を付けることをお勧めします。 レイヤーカードとボタンに名前を付けました。

ステップ5（ボーナス）：グローバルカラーを定義します。

プロトタイプ全体に対していくつかの変数を定義することをお勧めします。 最初から使用するカラーパレット、タイポグラフィ、および基本的な寸法を設定できます。 これにより、時間を節約できます。

色を設定するときは、コードエディタで色に名前を付け、適切な「=」記号の後にHEX、RGB、またはRGBaの値を指定します。 すべての変数をコードの一番上に置くことを忘れないでください。

 # variables ------------------------------- blue = "#005D99" green = "#3DBE8B" white = "#FFFFFF"

ステップ6（ボーナス）：相対位置を追加します。

新しいフレーマーを使用すると、プロトタイプの応答性を非常に簡単に維持できます。 以下に示すように、デザインモードから相対位置を設定できます。

これは、コード内でレイヤー位置を直接整列および計算するのに役立つプロパティの短いリストです。 レイヤーの位置を計算するために必要な計算を行うことができます。 これは、後でインタラクションを追加するときに、プロトタイプの応答性を維持したい場合に必要になります。

 # This is how you can align layer position: x: Align.center(0) # align layer horizontaly x: Align.center(200) # align layer horizontaly with 200 offset x: Align.right(0) x: Align.left(0) y: Align.center(0) # align layer verticaly y: Align.top(0) y: Align.bottom(0) # You can use also some variables width: Screen.width # current device width height: Screen.height # current device height # As a reference you can also user layer names x: layerA.x # layerA horizontal position y: layerA.y # layerA vertical position width: layerA.width # layerA width height: layerA.height # layerA height # You can combine all of this into the simple math to calculate position or dimensions width: Screen.width / 2 - layerA.width

これで準備が整いました—プロジェクトを始めましょう

さまざまなタイプのフレーマーレイヤーを作成しました。 これで、インタラクションプレイグラウンドの準備が整いました。

ついに！ 退屈な部分は終わりました。 さて、インタラクションデザインの時間です。

プロトタイプ全体をここからダウンロードしてください。

1.ボタンフィードバックインタラクションの作成

インタラクションを設計するには、それを実現するためのトリガーが必要です。 画面のタップ、アニメーションの終了、画像の読み込みの終了、携帯電話の加速度計など、ほとんど何でもかまいません。

ステップ1：インタラクション用のイベントを作成します。

シンプルにしておきます。 次のコマンドを使用して、ボタンをタップしたときにボタンのフィードバックを作成しましょう。

 layerA.onTap (event, layer) ->

Framerは、このコード行を作成しました。 これは、ボタンレイヤーをタップすると、何かが発生することを意味します。

ステップ2：イベントにアニメーションを追加します。

このトリガーの後でアニメーションを開始しましょう。 これを行うには、レイヤーパネルのボタンレイヤーの横にあるドットをクリックし、[アニメーションの追加]を選択します。 アニメーションを追加すると、Framerはアニメーション編集モードにジャンプします。 レイヤーの任意のパラメーターを拡大縮小、移動、回転、または変更できます。

フレーマーはさらに数行のコードを追加しました。 （心配しないでください。アニメーションパネルを使用してアニメーションを編集できます。）

 button.onTap (event, layer) -> button.animate borderRadius: 27 borderWidth: 10 borderColor: "rgba(115,250,121,1)" options: time: 0.30 curve: Bezier.ease

おめでとう！ 最初のインタラクションを作成しました。 現在は1回しか機能しませんが、修正します。 このアニメーションを1回だけトリガーできる理由は、アニメーションの終了後に何も起こらないように設定されているためです。 最初のアニメーションが終了した後、すべてのパラメータを以前の状態にリセットする必要があります。

ステップ3：アニメーションをリセットします。

以前とほぼ同じように、別のイベントを追加します。 違いは、アニメーションが終了したときにイベントを探していることです。

今回、Framerによって追加されたコードは次のようになります。

 button.onAnimationEnd (event, layer) ->

したがって、ボタンレイヤーのアニメーションが終了したら、ボタンレイヤーのパラメーターをリセットする次のアニメーションを追加できます。

 button.onAnimationEnd (event, layer) -> button.animate borderWidth: 100 borderColor: "rgba(255,255,255,1)" borderRadius: 100 options: time: 0.3 curve: Bezier.ease

それでおしまい！ ボタンをタップした後、作業中のフィードバックがあります。

2.カードレイヤーの相互作用のためのさまざまな状態の作成

これで、アニメーションをデザインしてトリガーする方法がわかりました。 多くの場合、レイヤーのさまざまな状態を設計する必要があります。 位置、サイズ、不透明度などの一部のパラメータのみを変更することで、同じレイヤーの複数の状態を設計できます。

ステップ1：カードレイヤーの状態を追加および作成します。

カードに状態を追加する方法は、アニメーションを追加する方法とほとんど同じです。 カードレイヤーの横にあるドットをクリックしてから、[状態の追加]をクリックする必要があります。 これで、状態編集モードにジャンプしました。 好きなようにデザインしてください：

コードのインデントに注意してください。 最初の行から開始する必要があります。

カードレイヤー用に2つの異なる状態を設計しました。

 card.states.a = width: 248 height: 287 x: 63 y: 190 borderWidth: 10 borderColor: "rgba(115,250,121,1)" card.states.b = x: 139 y: 529 width: 98 height: 98 borderRadius: 49 borderWidth: 1 borderColor: "rgba(255,255,255,1)"

ステップ2：イベントを追加します。

それを機能させるためのステップはあと1つだけです。 これらの状態を変更するためのイベントを作成する必要があります。

 button.onTap -> card.stateCycle()

これにより、アクションを実行するたびに、レイヤーのすべての状態が1つずつ変更されます。 したがって、この場合、ボタンレイヤーをタップするたびに、カードの状態に変わります。 より多くの状態を作成して正しくトリガーしたい場合は、以下のスニペットの方がはるかに効果的です。

 button.onTap -> card.stateSwitch("b")

このスニペットは、レイヤーの特定の状態をトリガーする場合に役立ちます。

プロトタイプに最後に行った調整は、アニメーションの速度と状態間のカーブの変更です。

 card.animationOptions = curve: Spring time: 0.8 

イベントでできることは他にもたくさんありますが、この時点で、ほとんどすべての基本的なインタラクションを作成できるようになります。 これは、私が今まで見た中で最もよく書かれたドキュメントの1つです。

フレーマーでの作業のスピードアップ：コンポーネント

作業をスピードアップするためのコンポーネントを追加する時が来ました。 この時点からこのチュートリアルを最大限に活用するには、このプロトタイプをダウンロードしてください。

1.最初のコンポーネント：スクロール

プロトタイプを少し変更しました。 これでリストが内部にありますが、その高さは画面解像度を上回っています。 プロトタイプでリスト全体を表示できるようにするには、スクロールを作成する必要があります。

ステップ1：レイヤーを作成してコンポーネントを設定します。

画面よりも高い高さのレイヤーを作成することから始めましょう。 このレイヤーをインタラクティブとしてマークし、 listという名前を付けます。 次に、コードモードにジャンプします。 今回は便利な左サイドバーは使用しません。 画面全体をスクロール可能に設定しましょう。

 scroll = new ScrollComponent width: Screen.width height: Screen.height

このコードは、現在のデバイスの幅と高さで非表示の領域を作成します。

ステップ2：スクロールするレイヤーをFramerに指示します。

まだ何も起こっていません。 どのレイヤーをスクロール可能にするかをFramerに指示する必要があります。 これを行うには、リストレイヤーをスクロールコンポーネントに追加します。

 list.parent = scroll.content

ステップ3：垂直スクロールをロックする。

現在、スクロールは許可されていますが、すべての方向で発生しています。 垂直軸上でスクロールをロックする必要があります。

 scroll.scrollHorizontal = false 

おお！ たった5行の簡単なコードでアプリ内にスクロールを作成しました。

2.ページコンポーネント：画面から画面へのスワイプ

画面を切り替えるための非常に人気のあるインタラクションはスワイプです。 ここでの考え方は、スクロールコンポーネントと非常によく似ています。 ここから実用的なプロトタイプをダウンロードできます。

ステップ1：コンポーネントをセットアップします。

まず、魔法が発生するコードエディタで「ボックス」を作成する必要があります。

 page = new PageComponent width: 315 height: Screen.height x: Align.center scrollVertical: false clip: false # the content outside the box won't be clipped

この時点で、ここにあるすべてのコードに精通している必要があります。 これは、コンポーネントとその領域の単純なセットアップです。 次に、スワイプするレイヤーをいくつか作成する必要があります。

ステップ2：レイヤーを作成する

最初のプロトタイプデザインを使用して、少し変更します。 1枚のカード画像の代わりに、今回は2枚の画像をインポートしました。

まず、アートボードを2倍広くする必要があります。 アートボードのプロパティパネルで、幅を見つけて2を掛けます（または単に*2を追加します）。 カードを並べて配置し、青い点でアクティブにして、適切な名前を付けます： card1とcard2 。

ステップ3：ページコンポーネントにレイヤーを追加します。

コードエディタのコードの最後に、次を追加する必要があります。

 card1.parent = page.content card2.parent = page.content

これは、これらのレイヤーをコンポーネントに追加していることを意味します。

これで、ページコンポーネントの準備が整いました。

最後の言葉

それがすべてです、皆さん！ このフレーマーチュートリアルが、市場で最も強力なプロトタイピングツールを使って旅を始めるのに役立つことを願っています。 また、FacebookのFramerグループへの参加を検討する必要があります。 周りには巨大なコミュニティがあり、始めたばかりのときに役立ちます。

Framerの内部をさらに深く知りたい場合は、Framerのドキュメントを読んでみてください。

•••

Toptal Designブログでさらに読む：

• eコマースUX–ベストプラクティスの概要（インフォグラフィック付き）
• 製品設計における人間中心の設計の重要性
• 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例
• モバイルインターフェースのヒューリスティック原則
• 予測的デザイン：魔法のユーザーエクスペリエンスを作成する方法