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

コアポイント：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ちなみに

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

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

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

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

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

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

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

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

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

ステップ3：戻る！

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

相互作用の詳細

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

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

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

次の最後のステップでは、複數(shù)のアートボードにまたがる?yún)g一のアニメーションを作成し、アートボード全體ではなく複數(shù)のオブジェクトを個別にアニメーション化します。具體的には、ボタンをクリックした後、拡張カードを左に回転させ、タイマーを右に回転させてから元の狀態(tài)に戻します。

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

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

相互作用の詳細

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

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

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

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

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

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

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

かっこいいですよね？

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

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

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

figmaプロトタイプに関するよくある質(zhì)問

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

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

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

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

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

以上がF(xiàn)igmaプロトタイプ：便利なモックアップの迅速でステップごとのガイドの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。