ProtoPie に入る前に、まずは ProtoPie について少しお話ししましょう。このツールは、ユーザーインターフェースの設計、FigJam でのアイデア出し、Figma Slides でのプレゼンテーション作成など、ほとんどのデザインニーズにとても適しています。さらに、AI 連携によって Figma の汎用性は一層高まります。
しかし、Figma には限界があります。複雑なインタラクションは、堅牢な UI3 インターフェースやロジック駆動型の機能があっても、扱いが難しいことがあります。リアルタイムの検証や多段階のロジックのような、ProtoPie ではシンプルな数式と最小限の設定で実現できる作業も、Figma では扱いにくくなることがあります。したがって、高精度インタラクションのための専用プロトタイピングツールが必要であることがわかります。
このチュートリアルで学べること:
このチュートリアルの最後には、以下のような自分だけの「Money Transfer App」をゼロから作成できるようになります:
最終プロトタイプのプレビュー
Figma のプロトタイピングの限界
では、Figma が現在まだ苦手としている領域を見ていきましょう。少なくとも今のところは。
リアルタイムの検証とフィードバックの制限
大規模な変数管理
ネイティブ入力/キーボードのインタラクション
一般的な単純な出力に対する複雑なカスタマイズ
たとえば、入力された金額をユーザーの口座残高と照合して検証する送金アプリを作る場面を想像してください。ユーザーは、0 より大きく、かつ総残高以下の金額を送信しなければなりません。Figma では、これを実現するために多数の変数が必要になります:
3 つの数値変数（残高と金額用）
2 つの文字列変数（メッセージ用）
1 つの色変数（エラーメッセージ用）
2 つのブール値（メッセージの表示/非表示用）
さらに、メッセージの長さやボタンの不透明度など、UI 要素を制御するための追加変数
1 つのキーボードインタラクションに対するローカル変数テーブル
ただし、Figma は複数桁の入力欄やキーボードのインタラクションをネイティブにはサポートしていないことに注意してください。数値や文字列は使えますが、1 桁を超える入力はできません。そのため、複雑なインタラクションを備えた、次のような非常にカスタマイズされたキーボードをゼロから作成する必要があります:
Figma におけるカスタマイズされたキーボードインタラクション
今度は、各キーに対してこんな複雑な検証が設定されていると考えてみてください。実際のキーボードで動かす必要があるなら、その難しさはさらに倍になります。
いくつかの回避策と大幅なカスタマイズを行っても、下の出力を見ればわかるように、エラーメッセージを表示させるために、私たちはなおも 8 のカスタム残高で計算を調整する必要がありました。1 桁で入力できる最大値は 9*.* だからです。
Figma の複数桁入力の制限
Figma では大規模な設定（多くの変数やカスタム入力）が必要になる内容も、ProtoPie なら 1 つの 数式 と 2 つの 変数だけで対応できます。これにより、作業はずっと速く、直感的になります。
Figma ファイルを体験する こちら。
高度なプロトタイピングのための ProtoPie
ProtoPie は、動的でマルチモーダルなインタラクションのための、No.1 の高度なプロトタイピングツールです。このツールは優秀で、デザイナーに実際のインタラクション設計を可能にします。画像、動画、音楽、Lottie アニメーションを JSON ファイル経由で簡単に追加でき、Figma、Adobe XD、Sketch などのツールから UI アセットもシームレスにインポートできます。Framer や Proto.io のような他の高精度プロトタイピングツールとは異なり、ほとんどコーディングスキルを必要としない点が際立っています。
ProtoPie Studio の UI を紹介:
ProtoPie Studio のインターフェース
Scenes: 各シーンはフレーム、アートボード、または画面のようなものです。一度にプレビューできるのは 1 シーンだけなので、複雑なインタラクションを作るときに 1 画面に集中できます。
Layers Panel: Figma のような他のレイヤーパネルと同様に左端にあり、アクティブなシーン内のすべてのレイヤーを階層に基づいて一覧で確認できます。
Variables Panel: Figma で高度なプロトタイピングを触ったことがなければ、Variables panel は新しく感じるかもしれませんが、ほぼ同じです。ローカル変数または一般変数を追加できます。各変数は文字列、数値、色のいずれかにできます。
Scene Preview/Canvas: 中央には、アクティブなシーンの Scene preview が表示されます。フレームサイズ、ピクセル密度、デバイスの向き、System Status Bars のような特定の UI 要素もカスタマイズできます。
Interactions Panel: 右側には Interactions panel, があり、オブジェクトに紐づいたトリガー（tap、click、swipe）を作成し、position、scale、color、playback の変更などのアクションを実行できます。ここではインタラクションのタイムラインもプレビューおよび調整できます。
Properties Panel: 右端にあります。幅、高さ、位置、色、テキストスタイル、アニメーション仕様などのインタラクションプロパティをカスタマイズできます。
Preview Window: プレビューウィンドウを使ってインタラクションの動作を確認し、プロトタイプを共有する前にエラーを見つけられます。
Device: モバイルやタブレットで ProtoPie Player アプリを使って、プロトタイプをライブでテストします。
Cloud: プロトタイプを ProtoPie Cloud にアップロードし、Pie リンクをチームや関係者と共有します。
Handoff: Handoff ボタンを使って インタラクション記録を作成し、ユーザーフロー、要素の挙動、プロトタイプ内の全体的なインタラクション統合を示します。
ProtoPie には、Component Libraries、Variables, Conditions、Developer Handoff のような高度な機能もあります。その全体的な可能性をさらに深く知るには、ProtoPie School Courses をぜひ見てみてください。
ProtoPie を始めよう
ProtoPie は、複雑なインタラクションと検証で Figma の限界を超えます。今度は ProtoPie で Money Transfer App を再現してみましょう。
ステップ 1: ファイル設定。Figma からフレームをインポート
最初のステップは、Figma ファイルを ProtoPie にインポートすることです。Figma で ProtoPie プラグインを実行してください。
ProtoPie プラグインを使って Figma のデザインファイルを ProtoPie にインポートする
必要な Figma フレームを選択して Export button を押します。あとは ProtoPie の魔法に任せましょう。すべてのデザイン要素の読み込みが完了すると、ProtoPie にリダイレクトされます。
フレームを選択して書き出す
フレームは ProtoPie では Scene として表示されます。必要に応じてレイヤーを並べ替え、カスタムの Status Bar と Device を設定します（私は iPhone 15 Pro の画面アスペクト比を使っています）。
以下が最終設定です。これで、Figma の高度なプロトタイピングを超える準備が整いました。次へ進み、プロのように実際のインタラクションデザインを作成しましょう。
ProtoPie での最終設定
ステップ 2: ネイティブ入力とキーボードのインタラクションを設定
では、実際の 入力とキーボードインタラクション を追加しましょう。新しい入力レイヤーを作成します。これで、ネイティブキーボードを使って入力を直接レイヤーに追加できます。
入力ツールを追加
プレースホルダーテキストや、空の状態・入力済みの状態それぞれのフォントスタイルなどのサイズとプロパティを定義します。次に、入力をタップしたときに表示されるキーボードを設定します。この場合は、数字キーボードを表示します。
入力ツールのプロパティパネル
ProtoPie で入力欄のスタイルが正しく整ったら、Figma からインポートした元のプレースホルダーテキスト/入力欄を削除します。レイヤーパネルで最終位置を並べ替え、Live Preview を使ってリアルタイム入力をテストします。カスタムキーボードを作らなくても自由にカスタマイズできます。入力には適切なラベルを付けて、たとえば「MoneyTransfer」とします。
関連する親レイヤーの下に入力レイヤーを追加
では、数式を動かすために、変数パネルで **2 つの変数 **を作成する必要があります:
Balance: 数値型にして固定値（たとえば 20,000）を設定し、入力した金額を差し引けるようにします。
Amount: こちらも数値型ですが、固定値ではなく、「MoneyTransfer」 フィールドからのリアルタイム入力を取得します。「Use formula」 のチェックボックスをオンにしてから、この数式を追加して有効にします。
「Balance」変数を作成
「Amount」変数を作成
Variables panel の各変数の横にあるバグアイコンをクリックして Debug mode を有効にすると、リアルタイム更新が緑のバッジで表示されます。必要に応じて位置を調整し、その後 Preview window を使って、「amount」変数が入力時に値を正しく取得していることを確認します。
ステップ 3: Conditions、変数、数式を使ってエラーメッセージを作成
次のステップはメッセージを表示することです。以下の 3 つのシナリオに応じて、3 種類のメッセージを表示できます:
デフォルト状態。 Balance 変数 = 20,000 のとき
残高不足のエラーメッセージ。 amount 変数 > balance 変数 のとき
最終残高のヘルプメッセージ。 0 > amount 変数 < balance 変数 のとき
最初の検証では、まず Start Trigger を追加します。これにより、この特定のシーンの読み込み時にインタラクションを発動できます。トリガーに条件を追加し、残高が 20,000 のときにこのインタラクションが動作するようにします。
トリガーを追加>Start
Start トリガーに条件を追加
Start トリガーの条件プロパティを定義
では、「Balance:」のテキストオブジェクトの名前を「Dynamic message」に変更しましょう。まず「Balance:」のテキストオブジェクトを選択し、編集可能にします。
💡注: Figma からフレームをインポートすると、ProtoPie はデフォルトでテキストをすべて画像に変換します。
テキストオブジェクトを編集可能にする
「Dynamic message」に名前を変更します。以後、このテキストオブジェクトは条件に応じた動的なエラーメッセージで毎回変更していきます。
「Balance Text:」を「Dynamic Message:」に変更
Start Trigger に戻り、Text response を追加します。「Dynamic message」オブジェクトを選択してください。
シーンをデフォルト状態で開くため、動的メッセージオブジェクトを残高変数の値に置き換えます。
formula オプションの下に balance 変数の正確な名前を入力
Preview window でプロトタイプを実行し、すべてが正しく設定されていれば、「Dynamic message」のテキスト値は「20000」に変わります。
次に、3 つのシナリオに基づいたカスタムメッセージ表示の 2 回目の検証に進みます。新しい 「Detect」 Trigger を追加することから始めましょう。
「amount」変数を選択します。これにより、プロトタイプが特定の条件を満たすたびに、「amount」変数の値を確認できるようになります。次に、それぞれのシナリオに対して 3 つの異なる条件を追加します。
「Detect」トリガーでは、レイヤープロパティや変数が変更されるとレスポンスが起動します。
シナリオ 1: balance = 20000 または amount = 0 のとき
最初の条件は、Start trigger の条件と text response と同じです。これにより、ユーザーが「Money Transfer」入力タブに誤った値を入力した場合でも、残高が初期値、つまり 20000 にリセットされることが保証されます。
balance が 20000 のときの Detect トリガーをカスタマイズ
シナリオ 2: amount 変数 > balance 変数 のとき
このシナリオでは、アプリはエラーメッセージを表示する必要があります。amount > balance となる別の条件を設定します。
条件を設定: Amount > Balance
「Dynamic message」オブジェクトを使ったテキストレスポンスを選択し、"" の中にエラーメッセージを入力して文字列の数式を追加します。
Amount > Balance のときにエラーレスポンスを追加
20,000 より大きい金額を入力してプロトタイプをテストします。0 に戻して、最初の検証が正しく実行されているか、そして Dynamic message のテキストオブジェクトが 20000 に戻るか確認してください。
2 つの検証を使ったライブプレビュー
シナリオ 3: amount が 0 より大きく 20000 未満のとき
前のシナリオの条件設定を複製し、amount < balance と amount > 0 の 2 つの条件を追加します。
プラスアイコンを使って複数条件を追加
この場合のメッセージは、送金後の残高になります。もう 1 つ Text response を追加し、次のように数式を設定します:
プロトタイプを実行してみましょう。Figma の 1 桁入力制限や最大 9 という制限を回避しつつ、Dynamic message テキストオブジェクトで、1 つのシンプルな数式と 2 つの変数だけで 3 種類のカスタムメッセージが表示されるのがわかります。
Figma vs ProtoPie
高度なインタラクション & アニメーションの作成
ここまでで基礎となるロジックは組み立てられました。ここからは、高度な文字列数式、データによる動的なカスタマイズ、そしてふにゃっとしたアニメーションのユニコーンでインタラクションを強化していきましょう。
まずは、高度な文字列数式と条件を使って、ヘルプメッセージとエラーメッセージをカスタマイズします。その後、カスタマイズに対する ProtoPie の柔軟性を明らかにします。最後に、同じロジックを使って、Lottie の本番対応 JSON ファイルでカスタムのアニメーションユニコーンを組み込みます。
ステップ 1: 数式、条件、書式設定を使って高度なインタラクションを作成
では、Dynamic message のテキストオブジェクトに 3 種類のメッセージを表示するよう書式設定しましょう。Detect Trigger 内の 3 つの異なる条件イベントのいずれかに出会ったとき、固有のメッセージを表示するためにカスタム数式を使います。
シナリオ 1: デフォルト状態、または amount = 0 のとき
最初のメッセージに書式を少し加えましょう。
カンマ（,）と小数点（.）を追加します。この書式設定を行うには、次の数式で残高変数を囲む必要があります:
これをコピーして Start Trigger と Detect Trigger の最初の条件イベントに貼り付けます。次のようになるはずです。
金額の前に「Balance」と「$」を表示するプレーンテキスト文字列を追加します
Start と Detect Triggers の両方の数式を更新し、プロトタイプを実行してください。正しくできていれば、プロトタイプが動作するたびに Dynamic message には「Balance: $20,000.00」と表示されます。
デフォルト状態、または amount が 0 のときのライブプレビュー
シナリオ 2: 残高不足のエラーメッセージ。
汎用のエラーメッセージを消し、Detect Trigger の 2 番目の条件レスポンスに書式化した balance 変数を設定します。
ユーザーの現在の残高を表示し、その後にエラーメッセージを続けるプレーンテキスト文字列を追加します。
ProtoPie が色を付けてくれるので、数式のどの部分が文字列、数値、演算子なのかがわかります。
エラーメッセージをもう一度更新して、プロトタイプを実行します。
シナリオ 3: 最終残高のヘルプメッセージ。
基本的な書式設定で、主な減算操作を囲みます。これを Detect Trigger の 3 番目の条件イベントにコピーして貼り付けます。
まず 1 つ目の文字列を追加して、下に表示される操作が取引完了後の残高であることを示します。カスタムメッセージを引用符で囲み、加算（+）演算子を設定します。
数式を更新してプロトタイプを実行してください。これで、金額を入力するたびに、Detect Trigger が取引完了後に口座に残る金額を示すメッセージを表示します。
最終プレビュー: 残高の表示
ステップ 2: フィードバックとエラーメッセージをカスタマイズ
次に、エラーメッセージをカスタマイズし、ボタンの有効/無効のインタラクションを作成します。
エラーメッセージのテキストカラーをカスタマイズ
Detect Trigger の 2nd condition に Color event を追加します。Dynamic message テキストオブジェクトを選択し、塗りの色を #FF0000 に設定します。プロトタイプをライブ実行すると、エラー条件に達したときに色は赤に変わりますが、ピンクには戻りません。
💡注: Detect 条件をトリガーパネルでどのように並べたかによって、順序は異なる場合があります
元の色に戻すには、1st and 3rd conditions に別の Color event を設定します。今度の塗りの色は #F46ADE になります。
💡注: Detect 条件をトリガーパネルでどのように並べたかによって、順序は異なる場合があります
ライブプロトタイプを実行し、2 番目の「error」条件に達すると Dynamic message が赤に変わる様子を確認してください。1 番目と 3 番目の条件に達すると、またピンクに戻ります。
ライブプレビュー: カスタムエラーメッセージ
「Submit」ボタンのカスタマイズ
有効/無効のボタンインタラクションは、同じロジックで不透明度を変えるだけなので簡単です。ただし、そこに行く前にいくつか調整する必要があります。
MoneyTransfer input を選択し、Focus Trigger を追加します。Focus In を設定し、Move response. を追加します。
move response 用の Button object を選択し、Move To を Y:490 に設定します。これで、入力欄に focus in するとボタンは上に移動しますが、focus out しても元の位置には戻りません。
ボタンを元の位置に戻すには、もう 1 つ Focus Trigger を追加し、今度は Focus Out を選択します。Button object に別の Move event を設定し、Move To を Y:783 にします。
ここでも金額の書式をカスタマイズできます。上記の Focus out に設定した Focus Trigger に Text event を追加します。対象を MoneyTransfer input オブジェクトにし、内容を Formula に設定します。カンマ（,）と小数点（.）を付けるために、この書式用数式を追加します。
最後に、有効/無効のインタラクションを追加します。Detect Trigger に 3 つの Opacity events を追加するだけです。1st と 3rd condition は Button object を 100% opacity に設定し、2nd condition（エラー状態）は 40% に設定します。
Preview window で実行して、完成したプロトタイプを楽しみましょう……まあ、ほぼ完成です。ロジックは完成しています。ちょっと待ってください。LottieFiles の魔法で、まだふにゃっとしたユニコーンを追加する必要があります 🦄🌈
最終プレビュー: 高度なカスタマイズ
ステップ 3: LottieFiles でふにゃっとしたアニメーションのユニコーンを追加
アニメーションには、無料でダウンロードできる以下の 3 つのユニコーン Lottie Files を使用します:
では、始めましょう。
3 つのユニコーンを JSON ファイルとしてダウンロードし、ProtoPie ファイル内にドラッグ＆ドロップします。
サイズを 42x42px に変更し、Layers panel 内の unicorn group に配置します。Figma から取り込んだ一時的な GIF は削除してください。これからは実際の JSON で作業します。
ユニコーン 2 と 3 の不透明度を 0% に設定します。Start Trigger に戻り、play action 付きの Playback event を追加して、最初の Lottie が動く様子を確認します。アニメーションをループさせるために looping オプションをオンにします。
Detect Trigger をコピーして貼り付けます。新しい方の名前を Unicorn animations に、古い方の名前を Print message***.*** に変更します。
Unicorn animations Detect Trigger のすべてのレスポンスを削除し、amount 変数と 3 conditions に向かうトリガーだけ残します。``````
各 condition に 3 つの Opacity events を追加します。それぞれ 1 つのユニコーンに向けます。1st condition では unicorn 1 を 100% にし、他は 0% にします。2nd condition では unicorn 3 を 100% にし、他は 0% にします。3rd condition では unicorn 2 を 100% にし、他は 0% にします。
最後に、3 つの Playback events を追加します。それぞれは unicorn animation Detect Trigger 内の異なる条件に配置されます。すべてループさせます。
最後に、Variables panel に行って、「balance」と「amount」変数の debug mode を turn off します。もう必要ありません。これで完成です！🔥
最終プロトタイプ
では最後にもう一度 Preview して、リアルタイム検証、動的なエラーメッセージ、高度な文字列数式、データによるカスタマイズ、そしてふにゃっとしたアニメーションのユニコーンまで備えた、完全に機能するプロトタイプを楽しみましょう。
ライブプレビュー: あなたの完成した Pie
最終的なクリック可能なインタラクティブプロトタイプを こちら
まとめ！
おめでとうございます！🦄 基本と高度なプロトタイピング機能を備えた、最初の Pie を作成できました。これであなたのプロトタイピングスキルは ProtoPie によってレベルアップし、高度な文字列数式、動的フィードバック、そして JSON 駆動の LottieFiles アニメーションの魔法をマスターしました。Figma の基本的なインタラクションを超えることで、創造性と実際の機能性の橋渡しとなる、高精度でレスポンシブなプロトタイプを作成できるようになりました。
さらに動きを加えたい場合は、もっと ヒントとコツ を探したり、同じ志を持つ先駆者たちとつながり、学び、成長できる ProtoPie Community に参加したりできます。あなたが高精度プロトタイピングに情熱を持っているなら、きっとぴったりです。
