INDUSTRIES

自動車

航空・宇宙

金融

ゲーム

メドテック

IoT

デジタルプロダクト

USE CASES

エンタープライズ向け

個人向け

チーム向け

教育向け

KEY FEATURES

ハードウェア・システム統合

Beta

ProtoPie MCP

マルチデバイス・プロトタイピング

インタラクション・ロジック

開発者へのハンドオフ

ProtoPie AI

New

ユーザーテスト

PLUGINS

Figma

Sketch

Adobe XD

INSIGHTS & INSPIRATION

ブログ

eBook

カスタマーストーリー

イベント&ウェビナー

ProtoPie ギャラリー

PRODUCT LEARNING & SUPPORT

ProtoPieスクール

ProtoPieをダウンロード

製品ドキュメント

コミュニティ

INDUSTRIES

自動車

航空・宇宙

金融

ゲーム

メドテック

IoT

デジタルプロダクト

USE CASES

エンタープライズ向け

個人向け

チーム向け

教育向け

KEY FEATURES

ハードウェア・システム統合

Beta

ProtoPie MCP

マルチデバイス・プロトタイピング

インタラクション・ロジック

開発者へのハンドオフ

ProtoPie AI

New

ユーザーテスト

PLUGINS

Figma

Sketch

Adobe XD

INSIGHTS & INSPIRATION

ブログ

eBook

カスタマーストーリー

イベント&ウェビナー

ProtoPie ギャラリー

PRODUCT LEARNING & SUPPORT

ProtoPieスクール

ProtoPieをダウンロード

製品ドキュメント

コミュニティ

Menu

AI インタラクション作成

概要

AI インタラクション作成を使用すると、自然言語を使用してインタラクションを構築できるため、トリガーやレスポンスを手動で設定する必要がなくなります。実行したい動作を説明するだけで、Studio AI が適切なインタラクションロジックを生成します。同じ AI パネルから、コンポーネントの作成や編集、インスタンスの追加や入れ替え、変数のオーバーライドなどもすべて行うことができます。

仕組み

  1. AI パネルを開きます

  2. 自然言語でインタラクションのリクエストを入力します

  3. 精度を高めるために、@ メンションを使用して特定のレイヤーを参照します

  4. AI がワークスペースを分析し、インタラクションを計画して、ステップバイステップで実行します

  5. 結果を確認し、必要に応じて手動で微調整します

プロンプトの例

基本的なインタラクション:

  • 「タップしたときに @Button の色を変更して」

  • 「@Card がクリックされたときにシーン 2 に遷移して」

  • 「@Layer を水平方向にのみドラッグできるようにして」

  • 「@Layer をコンポーネントに変換し、インスタンスを 5 つ作成して」

  • 「これらの @Layer の状態を1つのコンポーネントに結合して」

複雑なインタラクション:

  • 「右側にあるボタンの色とテキストを変更する停止&開始インタラクションを追加して。それに応じてタイマーも開始および停止して。」

  • 「メールアドレスが無効な場合、ボタンをグレーに変更して」

  • 「トグルを作成して。1回目のタップでパネルを表示し、2回目のタップで非表示にして」

  • 「一度に1つしか選択できないように、これらのオプションをコンポーネントにして」

  • 「それぞれ異なるコンテンツを表示する @Component のインスタンスを作成して」

AI のプロセスの理解

プロンプトを入力すると、Studio AI は以下の処理を行います:

  1. ワークスペースの分析:選択されたレイヤー、既存の変数、シーンのコンテキストを確認します

  2. インタラクションの計画:実行する予定のステップの概要を表示します

  3. ステップバイステップでの実行:影響を受けるレイヤーをハイライトしながら、トリガー、レスポンス、数式を作成します

  4. 完了の確認:完了ステータスを表示し、必要に応じて元に戻すオプションを提供します

コンテキストの認識

Studio AI は、ワークスペースのコンテキストを理解します:

  • 選択されたレイヤー:選択しているレイヤーを参照します

  • 既存の変数:重複を作成する代わりに、必要に応じて変数。を再利用します

  • シーン構造:レイヤーの階層とグループ化を理解します

  • 以前のインタラクション:同じセッション内の以前のリクエストを記憶します

AI 生成結果の操作

[object Object]

生成されたインタラクションの確認:

  • AI によって作成された要素は、メンションされるとキャンバス上で色付きの枠線でハイライトされます

  • プロパティパネルにすべてのインタラクションの詳細が表示されます

  • チャット内の AI の説明セクションを展開または折りたたむことができます

編集と微調整:

  • AI が生成したすべてのインタラクションは、Studio のインターフェースを通じて完全に編集可能です

  • 変更は、プロパティパネル、インタラクションパネル、またはキャンバス上で直接行えます

  • AI は手動での編集を認識し、その後のリクエストでそれを尊重します

停止と元に戻す

停止:実行中に [停止] をクリックするとキャンセルされます。変更は自動的に元に戻されます。

元に戻す:完了後、[元に戻す] をクリックすると、AI による最新の変更が取り消されます。元に戻す機能は、キャンバスを手動で編集するまで利用可能です。

停止したときに何が起こるか:

  • タスク完了後に停止した場合:編集内容は維持され、タスクブロックがフリーズします

  • タスク実行中に停止した場合:編集内容が元に戻り、プロンプト入力が再び表示されます

制限事項

  • VLM 非搭載:Studio AI はキャンバス上のビジュアルデザインを「見る」ことはできません。レイヤー構造とプロパティデータのみを読み取ります

  • 既存のレイヤーに対してインタラクションを作成します(新しいデザインやレイアウトは生成しません)

  • 非常に複雑な条件分岐ロジックには、微調整が必要な場合があります

  • ローカルライブラリのコンポーネントでのみ動作します。クラウドライブラリのコンポーネントはまだサポートされていません

  • 別のコンポーネント内のネストされたコンポーネントやインスタンスを編集することはできません

  • 「メインコンポーネントとして使用」機能はサポートされていません

  • チャット履歴はセッションをまたいで保存されません