Figmaプロトタイプ：便利なモックアップの迅速でステップごとのガイド

figmaプロトタイピング：静的モデルを動的なインタラクティブエクスペリエンスに変換

コアポイント：

• figmaプロトタイピングは、静的モデルを動的でインタラクティブなプロトタイプに変換して、開発者がデザインのユーザープロセス、機能、感情を理解するのに役立ちます。
• FigMAプロトタイプを作成する手順には、次のものがあります。水平スクロールフレームワークの作成、アートボードの遷移の作成、以前のアートボードに戻る機能の作成、複雑なタイミングアニメーションの作成。各ステップには、特定の設定とインタラクションが含まれ、スムーズな遷移とアニメーション効果を確保します。
• Figmaプロトタイプはインタラクティブであり、フィードバックのプレビューと収集のために他の人と共有できます。この機能はコラボレーションを強化し、受け取ったフィードバックに基づいて改善を可能にします。 Figmaは、LotTiefilesなどのプラグインを介してより複雑なアニメーションもサポートしています。

プロトタイピングは、静的モデルをインタラクティブモデルと動的モデルに変換するプロセスです（よりよく知られているプロトタイプ）。静的モデルを現実に変えることは、デザインワークフローで最もエキサイティングな（最もエキサイティングではないにしても）ステップの1つです。 開発者にとって、デザインのユーザープロセス、感情、機能を理解することが重要です。 2020 Design Tools Surveyによると、世界で最高の設計ツールであるFigmaを使用するよりも良い方法はありますか？

Figmaのプロトタイピングの方法を習得すると、シンプルで使いやすく、楽しいことがわかります。最初にこの静的モデルをコピーし（「一連のインタラクション」をクリックしてから、「ドラフトにコピー」をクリックしてから）、チュートリアル全体で、より多くの機能的な忠実度を追加します。あなたのローカルコピーは次のようになります：

注：figmaやスケッチなどの最新のUI設計ツールに関する少なくともある程度の知識があると思います。

ステップ1：水平スクロールフレームを作成します

アートボード1から始めて、ビューポートを超えたカードの選択が水平方向にスクロールできるようにしましょう。これは、Figmaが「接続」と呼ぶものを作成せずにモデルを動的に作成する方法です。接続は私たちを新しいアートボードに導きますが、それはステップ1でやろうとしていることではありません。

最初にレイヤーパネル（左サイドバー）からカードを選択し、ドロップダウンメニューを使用して、グループオプションを変更してデザインパネル（今回は右側のサイドバー）からフレームを変更します。

私はこれについて深く入りませんが、グループとフレームの主な違いは、グループが子供の要素をしっかりと包み、フレームはどんなサイズでもできることです。これは、次のことを意味します

• グループの子要素はグループとともにスケーリングされますが、フレームの子要素はより頑固です（これは機能であり、バグではありません）
• フレームの子要素はそのフレームに対して整列していますが、グループの子要素はアートボード
• フレームには、水平または垂直にスクロールできるオーバーフローコンテンツを含めることができます（これは私たちが試していることです）

待ってください、これはアートボードが実際にフレームであることを意味しますか？確かに：他のUIデザインツールはアートボードと呼ばれ、Figmaはそれらをフレームと呼びます。これは、Figmaでは、フレームが他のフレームにネストできるためかもしれません。これは、Sketch、Adobe XDなどの他のツールのアートボードとはわずかに異なるためです。

プロトタイプモードに切り替えます（

9）、オーバーフロー動作設定を使用してから、ドロールダウンオプションを巻物から水平スクロールに変更できます。

今、あなたは影が新しく変換されたフレームによって奇妙に切断されていることに気付くでしょうが、これは実際にはオーバーフローコンテンツの標準的な動作であり、比較的簡単に修正できます。

影のぼかし変数は30で、フレームは任意のサイズである可能性があるため、フレームをサイズ変更して、余分な30の間隔がその端に残されるようにする必要があります。 sizeize（Shift⌘ ↑↓←→）および微調整（↑↓←←→）オブジェクトそれは簡単なはずです。

ちなみに

（フレームをクリックすると）気付くかもしれませんが、カードとその間隔は簡単に再配置できます。これはチュートリアル自体とは何の関係もありませんが、それでも素晴らしいです。

ステップ2：アートボードの遷移を作成

次のステップでは、「接続」とも呼ばれるアートボードを別のアートボードに接続する相互作用を試してみましょう。

「カード」フレームを選択します（はい、フレーム全体をクリックしているかどうかは関係ないため）。次に、まだプロトタイプモードであると仮定すると、コネクタ（つまり、ホバリング時に表示される境界のある円）をアートボード2にドラッグします。これらのアートボードが接続されました。

アートボード2にコネクタを置いた後、「接続」設定（表示する必要があります）は次のようになります。

• 相互作用の詳細
  • 「クリックしたとき」（クリックによってインタラクションがトリガーされます）
  • "navigation to" / "artboard 2"（クリックすると、ユーザーがアートボード2に移動します）
• アニメーション
  • "Push" / "←"（ "Paper 2"はを右側から画面に押します）
  「スローアウト」 /「300ms」（300ms以内、アニメーションは迅速に開始され、徐々に遅くなります）
  「スマートアニメーションマッチレイヤー」チェックボックスを選択します（変更されていない場合は、バックボタンやナビゲーションなどの一般的な要素はアニメーション化されません）

私たちがこれまでにしたことを見たいですか？右上隅の[デモ]ボタンをクリックします（つまり、

再生アイコン）。 WebブラウザでFigmaを使用すると、新しいタブが開きます。

ヒント：rを押して、プロトタイプをリロードします。

ステップ3：戻る！

先に進んで、より複雑な接続を掘り下げる前に、アートボード1（またはどこから来たのか）に戻ることができることを確認しましょう。別の接続を作成します。今回は戻るボタンから始まり、次のように設定します。

相互作用の詳細

• 「クリックしたとき」
  • "back"

オプションが修正されているため、今回はアニメーション設定は利用できません。具体的には、遷移は逆アニメーション化されます。たとえば、「プッシュ←」を使用してアートボードに移行すると、「プッシュ→」を使用して戻ります。

ステップ4：（比較的）複雑なタイミングアニメーションを作成します

次の最後のステップでは、複数のアートボードにまたがる単一のアニメーションを作成し、アートボード全体ではなく複数のオブジェクトを個別にアニメーション化します。具体的には、ボタンをクリックした後、拡張カードを左に回転させ、タイマーを右に回転させてから元の状態に戻します。

本質的に、これはスイングアニメーションです。

Artboard 2で「ボタン」オブジェクトを選択し、Artboard 3に接続されたコネクタを作成します。次の設定を使用してください：

相互作用の詳細

「クリックしたとき」
• "navigation to" / "Paper 3"
  アニメーション
「スマートアニメーション」
• 「スローアウト」 /「300ms」

注：「スマートアニメーション」をアニメーションタイプとして選択したため、両方のアートボードに同時に存在するが視覚的に異なるレイヤーはスムーズに遷移しますが、関連するレイヤー構造とレイヤーが一貫性のある場合のみです。 。それらが一貫していない場合、Figmaはこれらのレイヤーが同じレイヤーであり、正しくアニメーション化されないことを理解していません。

デザインパネルでは、ボタンの背景を＃ff0000に設定し、カードを左に回転させていることがわかります。

しかし、300msの「左アニメーション」を実行した後、右に回転するにはどうすればよいですか？まあ、それはタイミングのあるアニメーションが必要な場所です。上記の手順を繰り返します。今回はArtboard 3をArtboard 4に接続します。「遅延」 /「300ms」が唯一の違いです。インタラクションを完了するには、Artboard 4を繰り返しArtboard 5に接続します。

これは、アニメーションを継続的に実行する方法です。この例では、最初のクリックインタラクションが「左のロトルアニメーション」をアクティブにし、その後のアニメーションはタイマーを自動的に追跡します。

figmaプロトタイピングは楽しいですよね？

このチュートリアルを完了しました。 Figmaファイルは実際には違いはありません（プロトタイプモードを使用する場合の一部の目に見えるコネクタを除く）。ただし、デモモードでは非常に異なる機能があります。チュートリアルに従っていない場合は、最終結果をテストできる「動的」バージョンをご覧ください。

かっこいいですよね？

より複雑なアニメーションスタイルとインタラクションの種類を確実に想像することはできますが、ここで見るものはあなたが知っておくべきことの約99％をカバーするはずです。相互作用に関しては、シンプルさは常に優れています！

より複雑なアニメーションには、ロトティファイルと呼ばれるきれいなFigmaプラグインがあります。

Figmaの詳細については、Figmaの使用についても読むこともできます。

figmaプロトタイプに関するよくある質問

figmaプロトタイプとは何ですか？ Figmaプロトタイプは、共同設計ツールであるFigmaを使用して作成されたデザインのインタラクティブな表現です。これにより、デザイナーはデザインの有効性を実証およびテストし、よりダイナミックでユーザー中心のエクスペリエンスを提供できます。

figmaでプロトタイプを作成する方法は？ Figmaでプロトタイプを作成するには、画面またはフレームを設計し、プロトタイプモードを使用してこれらのフレームをリンクして、インタラクション、遷移、アニメーションを定義してユーザーエクスペリエンスをシミュレートします。

共有する前にfigmaプロトタイプをプレビューできますか？はい、Figmaを使用すると、Figmaエディターでプロトタイプを直接プレビューできます。プロトタイプモードを入力して、「デモ」ボタンをクリックして、デザインの相互作用を体験してください。

私のfigmaプロトタイプを他の人と共有する方法は？共有可能なリンクを生成することにより、Figmaプロトタイプを共有できます。共有メニューに移動し、共有設定を調整し、リンクをコピーします。このリンクを持っている人なら誰でも、プロトタイプを表示してやり取りできます。

私のfigmaプロトタイプについてフィードバックを収集する方法はありますか？はい、Figmaはデザインとプロトタイプに関するコメントをサポートしています。プロトタイプのリンクを共有すると、視聴者はデザインの特定の要素または領域に関するコメントを直接残し、コラボレーションとフィードバックコレクションを促進できます。

以上がFigmaプロトタイプ：便利なモックアップの迅速でステップごとのガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。