MenuToggle Menu

ProtoPie Genie

ProtoPie Genieは、Figmaプロトタイプ内での動的なインタラクションを可能にすることで、デザインワークフローを強化するFigmaプラグインです。

概要

ProtoPie Genie は、動的なインタラクションテストを簡素化することとともに、プロトタイプの配信を高速化し、プロトタイプ体験を向上させます。

  • プロトタイプの迅速な提供: 静的なデザインをインタラクティブなプロトタイプに迅速に変換します。
  • 動的インタラクションテスト: さまざまなシナリオとインタラクションをシームレスにテストします。
  • 印象的なプロトタイプ体験:生き生きとしたプロトタイプで、チーム、クライアント、利害関係者に感動を与えます。

はじめよう

[object Object]

以下の手順に従ってProtoPie Genieプラグインをインストールしてください。

  1. Figma Community pageにアクセスします。
  2. 「Open in... 」を選択し、今後の作業に適したファイルを選択します。
  3. 「Run」をクリックし、ProtoPie Genieを起動します。

Figmaで右クリックし、プラグインを選択し、「ProtoPie Genie」を実行し、対話の指示に従います。

ProtoPie Genieプラグインはどのように機能しますか？

ProtoPie Genieの「Interactive Input Field」機能により、ユーザーのインタラクションに反応するダイナミックな入力フィールドを作成することができます。これらのフィールドは実際のユーザー体験を模倣し、デザインのテストと改善を簡単にします。

Interactive Input Fieldsを使ってみよう

Interactive Input Field追加

  1. ProtoPie Genie プラグインを開きます。
  2. Figma デザイン内で、入力フィールドに変換したいテキスト・オブジェクトを選択します。
  3. Interactive Input Fieldメニューの「+」ボタンをクリックします。

Output Field追加

  1. バリューソースとして使用したいインタラクティブ入力フィールドを選択します。
  2. Select output fieldのセクションの下にある「 + 」ボタンをクリックします。
  3. Outputを表示するために、Figma ページ内のテキスト・オブジェクトを選択します。

インタラクションのプレビュー

ProtoPie Genieプラグインを使ってFigmaでインタラクションをプレビューするのは、簡単なプロセスです。

シングルインタラクションのプレビュー

  1. プラグイン内でプレビューしたいインタラクションを選択します。
  2. インタラクションのプロパティパネルで矢印ボタンをクリックします。

Figma Flowのプレビュー

  1. ProtoPie Genie プラグインの下部にあるオプションから、Figma flowを選択します。
  2. 「プレビュー」ボタンをクリックします。

対応Figmaオブジェクト

ProtoPie Genieプラグインは、以下のような幅広いFigmaオブジェクトを対応します。

  • Text
  • Rectangle
  • Frame
  • Group
  • Component
  • Instance
  • Boolean
  • Vector
  • Ellipse

対応Figmaインタラクション

ProtoPie Genieプラグインは、プレビュー中に 「On Click 」と 「Navigate to」のFigmaインタラクションをシームレスに変換し、デザインのインタラクティブ要素を総合的理解できるようにします。

対応しないFigmaオブジェクト／プロパティ

一部の Figma オブジェクトとプロパティは、現在サポートされていません：

  • サポートされていないオブジェクト： サポートされていないオブジェクト**：Star、Line、Polygon、Video
  • サポートされていないプロパティ： Visibility（可視性）、Lock（ロック）、Position（位置）、Size（サイズ）、Rotation（回転）、Opacity（不透明度）、Constraints（制約）、Fill（ソリッド・カラー＆イメージ）、Borders（ボーダー）、Shadow（影）
Back To Top