INSIGHTS & INSPIRATION
PRODUCT LEARNING & SUPPORT
INSIGHTS & INSPIRATION
PRODUCT LEARNING & SUPPORT
ProtoPie + Figma
クリックだけじゃ物足りない、と感じていませんか？FigmaデザインにそのままリアルなインタラクションやConditionを加えられます。
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 460 460" xmlns="http://www.w3.org/2000/svg"><defs ><linearGradient id="kHbXL0UAV-3170443929-linear-gradient" x1="0.7376796582699121" x2="0.26232034173008784" y1="1" y2="0"><stop offset="0" stop-color="rgb(255, 167, 138)"/><stop offset="1" stop-color="rgb(255, 116, 36)"/></linearGradient></defs><g d="M 405.821 0 C 418.07 0 428 9.93 428 22.179 L 428 297.54 L 427.999 297.664 L 427.999 425.216 C 427.999 444.434 412.42 460.013 393.203 460.013 L 34.797 460.013 C 15.579 460.013 0 444.434 0 425.216 L 0 314.785 C 0 302.536 9.93 292.605 22.179 292.605 L 38.813 292.605 C 51.062 292.605 60.992 282.676 60.992 270.427 L 60.992 265.991 C 60.992 253.742 70.922 243.812 83.171 243.812 L 100.027 243.812 C 112.276 243.812 122.206 233.882 122.206 221.633 L 122.206 217.211 C 122.206 204.962 132.136 195.032 144.385 195.032 L 161.13 195.032 C 173.379 195.032 183.309 185.102 183.309 172.853 L 183.309 168.41 C 183.309 156.161 193.239 146.231 205.488 146.231 L 222.233 146.231 C 234.482 146.231 244.412 136.301 244.412 124.052 L 244.412 119.609 C 244.412 107.361 254.342 97.431 266.591 97.431 L 283.336 97.431 C 284.041 97.431 284.738 97.463 285.425 97.528 C 296.828 96.607 305.794 87.061 305.794 75.422 L 305.794 70.98 C 305.794 58.731 315.724 48.8 327.973 48.8 L 344.718 48.8 C 356.967 48.8 366.897 38.871 366.897 26.622 L 366.897 22.179 C 366.897 9.93 376.827 0 389.076 0 Z" fill="transparent" height="460.0129560764943px" id="B2F7P8Szm" transform="translate(17 1)" width="428px"><path d="M 405.821 0 C 418.07 0 428 9.93 428 22.179 L 428 297.54 L 427.999 297.664 L 427.999 425.216 C 427.999 444.434 412.42 460.013 393.203 460.013 L 34.797 460.013 C 15.579 460.013 0 444.434 0 425.216 L 0 314.785 C 0 302.536 9.93 292.605 22.179 292.605 L 38.813 292.605 C 51.062 292.605 60.992 282.676 60.992 270.427 L 60.992 265.991 C 60.992 253.742 70.922 243.812 83.171 243.812 L 100.027 243.812 C 112.276 243.812 122.206 233.882 122.206 221.633 L 122.206 217.211 C 122.206 204.962 132.136 195.032 144.385 195.032 L 161.13 195.032 C 173.379 195.032 183.309 185.102 183.309 172.853 L 183.309 168.41 C 183.309 156.161 193.239 146.231 205.488 146.231 L 222.233 146.231 C 234.482 146.231 244.412 136.301 244.412 124.052 L 244.412 119.609 C 244.412 107.361 254.342 97.431 266.591 97.431 L 283.336 97.431 C 284.041 97.431 284.738 97.463 285.425 97.528 C 296.828 96.607 305.794 87.061 305.794 75.422 L 305.794 70.98 C 305.794 58.731 315.724 48.8 327.973 48.8 L 344.718 48.8 C 356.967 48.8 366.897 38.871 366.897 26.622 L 366.897 22.179 C 366.897 9.93 376.827 0 389.076 0 Z" fill="url(%23kHbXL0UAV-3170443929-linear-gradient)" height="460.0129560764943px" id="kHbXL0UAV" width="428px"/></g></svg>)
ProtoPie + Figma
Figma向けの高忠実度プロトタイピング—クリック可能なだけの限られたプロトタイプを超えましょう。Figmaデザインをインポートして、動的で条件付きのインタラクションを追加できます。
ProtoPie + Figma
クリックだけじゃ物足りない、と感じていませんか？FigmaデザインにそのままリアルなインタラクションやConditionを加えられます。
思わず触れたくなる、インタラクション。
シンプルなロジック設定だけで、静的なデザインが生き生きとしたプロトタイプに早変わり。簡単なインタラクションから複雑な数式まで、コードなしでそのまま作れます。
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><defs ><linearGradient id="WPFNLjg0z-3586339377-linear-gradient" x1="5.551115123125783e-17" x2="1" y1="0.599244904232048" y2="0.40075509576795204"><stop offset="0" stop-color="rgb(156, 110, 255)"/><stop offset="1" stop-color="rgb(255, 96, 96)"/></linearGradient></defs><path d="M 24 0 L 24 7.384 L 20.96 4.344 L 17.174 8.13 C 16.803 7.635 16.364 7.196 15.869 6.825 L 19.654 3.039 L 16.615 0 Z M 0 16.615 L 3.04 19.655 L 6.824 15.87 C 7.194 16.365 7.634 16.804 8.13 17.175 L 4.345 20.96 L 7.385 24 L 0 24 Z M 12 16.615 C 9.451 16.615 7.385 14.549 7.385 12 C 7.385 9.451 9.451 7.385 12 7.385 C 14.549 7.385 16.615 9.451 16.615 12 C 16.615 14.549 14.549 16.615 12 16.615 Z M 12 14.77 C 13.002 14.789 13.936 14.265 14.443 13.401 C 14.949 12.536 14.949 11.465 14.443 10.6 C 13.936 9.736 13.002 9.212 12 9.231 C 10.491 9.26 9.283 10.491 9.283 12.001 C 9.283 13.51 10.491 14.741 12 14.77 Z" fill="url(%23WPFNLjg0z-3586339377-linear-gradient)" height="23.999999885559085px" id="WPFNLjg0z" width="24.00000043487549px"/></svg>)
Multi touch
Conditional logic
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 28 25" xmlns="http://www.w3.org/2000/svg"><path d="M 4.043 0 L 24.255 0 C 26.488 0 28.298 1.876 28.298 4.19 L 28.298 20.952 C 28.298 23.266 26.488 25.142 24.255 25.142 L 4.043 25.142 C 1.81 25.142 0 23.266 0 20.952 L 0 4.191 C 0 1.877 1.81 0.001 4.043 0.001 Z M 4.043 2.095 C 2.927 2.095 2.023 3.033 2.023 4.19 L 2.023 20.952 C 2.023 22.109 2.927 23.047 4.043 23.047 L 24.257 23.047 C 25.373 23.047 26.278 22.109 26.278 20.952 L 26.278 4.19 C 26.278 3.033 25.373 2.095 24.258 2.095 Z M 8.086 18.857 L 6.065 18.857 L 6.065 6.285 L 8.086 6.285 Z" fill="rgb(255, 255, 255)" height="25.142000000000003px" id="yNGoWI6gt" width="28.298px"/></svg>)
Text input
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 33 32" xmlns="http://www.w3.org/2000/svg"><g d="M 0 0 L 32 0 L 32 32 L 0 32 Z M 4.363 3.929 C 4.363 3.653 4.587 3.429 4.863 3.429 L 6.045 3.429 C 6.321 3.429 6.545 3.653 6.545 3.929 L 6.545 18.737 C 6.545 19.013 6.321 19.237 6.045 19.237 L 4.863 19.237 C 4.587 19.237 4.363 19.013 4.363 18.737 Z M 0 6.187 C 0 5.911 0.224 5.687 0.5 5.687 L 1.682 5.687 C 1.958 5.687 2.182 5.911 2.182 6.187 L 2.182 16.479 C 2.182 16.755 1.958 16.979 1.682 16.979 L 0.5 16.979 C 0.224 16.979 0 16.755 0 16.479 Z M 32.219 14.721 C 32.495 14.721 32.719 14.945 32.719 15.221 L 32.718 25.513 C 32.718 25.789 32.494 26.013 32.218 26.013 L 31.053 26.013 C 30.777 26.013 30.553 25.789 30.553 25.513 L 30.555 15.221 C 30.555 14.945 30.779 14.721 31.055 14.721 Z M 26.185 12.962 C 26.185 12.686 26.409 12.462 26.685 12.462 L 27.861 12.462 C 28.137 12.462 28.361 12.686 28.361 12.962 L 28.361 27.771 C 28.361 28.047 28.137 28.271 27.861 28.271 L 26.685 28.271 C 26.409 28.271 26.185 28.047 26.185 27.771 Z M 8.728 4.43 C 8.728 3.878 9.176 3.43 9.728 3.43 L 23 3.43 C 23.552 3.43 24 3.878 24 4.43 L 24 27.27 C 24 27.822 23.552 28.27 23 28.27 L 9.727 28.27 C 9.175 28.27 8.727 27.822 8.727 27.27 L 8.727 4.429 Z M 10.91 26.014 L 21.819 26.014 L 21.819 5.686 L 10.909 5.686 L 10.909 26.011 Z" fill="transparent" height="32px" id="wPoCuPbAK" width="32.71899949645996px"><path d="M 0 0 L 32 0 L 32 32 L 0 32 Z" fill="transparent" height="32px" id="tF7kO7ckj" width="32px"/><path d="M 4.363 0.5 C 4.363 0.224 4.587 0 4.863 0 L 6.045 0 C 6.321 0 6.545 0.224 6.545 0.5 L 6.545 15.308 C 6.545 15.584 6.321 15.808 6.045 15.808 L 4.863 15.808 C 4.587 15.808 4.363 15.584 4.363 15.308 Z M 0 2.758 C 0 2.482 0.224 2.258 0.5 2.258 L 1.682 2.258 C 1.958 2.258 2.182 2.482 2.182 2.758 L 2.182 13.05 C 2.182 13.326 1.958 13.55 1.682 13.55 L 0.5 13.55 C 0.224 13.55 0 13.326 0 13.05 Z M 32.219 11.292 C 32.495 11.292 32.719 11.516 32.719 11.792 L 32.718 22.084 C 32.718 22.36 32.494 22.584 32.218 22.584 L 31.053 22.584 C 30.777 22.584 30.553 22.36 30.553 22.084 L 30.555 11.792 C 30.555 11.516 30.779 11.292 31.055 11.292 Z M 26.185 9.533 C 26.185 9.257 26.409 9.033 26.685 9.033 L 27.861 9.033 C 28.137 9.033 28.361 9.257 28.361 9.533 L 28.361 24.342 C 28.361 24.618 28.137 24.842 27.861 24.842 L 26.685 24.842 C 26.409 24.842 26.185 24.618 26.185 24.342 Z M 8.728 1.001 C 8.728 0.449 9.176 0.001 9.728 0.001 L 23 0.001 C 23.552 0.001 24 0.449 24 1.001 L 24 23.841 C 24 24.393 23.552 24.841 23 24.841 L 9.727 24.841 C 9.175 24.841 8.727 24.393 8.727 23.841 L 8.727 1 Z M 10.91 22.585 L 21.819 22.585 L 21.819 2.257 L 10.909 2.257 L 10.909 22.582 Z" fill="rgb(255, 255, 255)" height="24.841999992370607px" id="fjG_Go_FM" transform="translate(0 3.429)" width="32.71899949645996px"/></g></svg>)
Sensor
思わず触れたくなる、インタラクション。
シンプルなロジック設定だけで、静的なデザインが生き生きとしたプロトタイプに早変わり。簡単なインタラクションから複雑な数式まで、コードなしでそのまま作れます。
Multi touch
Conditional logic
Text input
Sensor
思わず触れたくなる、インタラクション。
シンプルなロジック設定だけで、静的なデザインが生き生きとしたプロトタイプに早変わり。簡単なインタラクションから複雑な数式まで、コードなしでそのまま作れます。
Multi touch
Conditional logic
Text input
Sensor
テストも、チームワークも。
モバイル・タブレット・デスクトップ、どこでもプロトタイプを動かして、クラウドでサクッと共有できます。
ブラウザでリアルタイムにテスト
iPhone・iPad・Androidでそのまま確認
オンラインで共有してコメントやりとり
テストも、チームワークも。
モバイル・タブレット・デスクトップ、どこでもプロトタイプを動かして、クラウドでサクッと共有できます。
ブラウザでリアルタイムにテスト
iPhone・iPad・Androidでそのまま確認
オンラインで共有してコメントやりとり
テストも、チームワークも。
モバイル・タブレット・デスクトップ、どこでもプロトタイプを動かして、クラウドでサクッと共有できます。
ブラウザでリアルタイムにテスト
iPhone・iPad・Androidでそのまま確認
オンラインで共有してコメントやりとり
直感的に使えるから、すぐ慣れる。
ProtoPieはブロックを積み上げるような感覚で使えます。どんなインタラクションも、Object・Trigger・Responseの組み合わせだけでパパッと作れます。
ロジックベースで直感的
シンプルな構造
コードは一切不要
直感的に使えるから、すぐ慣れる。
ProtoPieはブロックを積み上げるような感覚で使えます。どんなインタラクションも、Object・Trigger・Responseの組み合わせだけでパパッと作れます。
ロジックベースで直感的
シンプルな構造
コードは一切不要
直感的に使えるから、すぐ慣れる。
ProtoPieはブロックを積み上げるような感覚で使えます。どんなインタラクションも、Object・Trigger・Responseの組み合わせだけでパパッと作れます。
ロジックベースで直感的
シンプルな構造
コードは一切不要
指先に伝わる、スピードと自由度。
デザインをProtoPieに取り込んで、すぐにインタラクティブなプロトタイピングをはじめましょう。
1. FigmaデザインをProtoPieへ取り込む
必要なフレームやオブジェクトをそのままProtoPieへ送れます。
2. 本物そっくりのプロトタイプを作る
動的なインタラクションと条件ロジックで、実際のプロダクトに限りなく近い体験を再現できます。
3. いろんなデバイスで実際に触って確かめる
モバイル・デスクトップ・クラウドでプロトタイプを動かして、作り込んだインタラクションをそのまま体感できます。
指先に伝わる、スピードと自由度。
デザインをProtoPieに取り込んで、すぐにインタラクティブなプロトタイピングをはじめましょう。
1. FigmaデザインをProtoPieへ取り込む
必要なフレームやオブジェクトをそのままProtoPieへ送れます。
2. 本物そっくりのプロトタイプを作る
動的なインタラクションと条件ロジックで、実際のプロダクトに限りなく近い体験を再現できます。
3. いろんなデバイスで実際に触って確かめる
モバイル・デスクトップ・クラウドでプロトタイプを動かして、作り込んだインタラクションをそのまま体感できます。
指先に伝わる、スピードと自由度。
デザインをProtoPieに取り込んで、すぐにインタラクティブなプロトタイピングをはじめましょう。
1. FigmaデザインをProtoPieへ取り込む
必要なフレームやオブジェクトをそのままProtoPieへ送れます。
2. 本物そっくりのプロトタイプを作る
動的なインタラクションと条件ロジックで、実際のプロダクトに限りなく近い体験を再現できます。
3. いろんなデバイスで実際に触って確かめる
モバイル・デスクトップ・クラウドでプロトタイプを動かして、作り込んだインタラクションをそのまま体感できます。
世界トップクラスのチームに選ばれる、ProtoPie。
Rom Impas
,
Principal UX designer, Zillow
ProtoPieは、まさに私たちが求めていたプロトタイピングツールです。実際のプロダクトのようにインタラクティブなデザインを、シンプルに・スピーディーに・コードなしで試せる。セキュリティやチーム共有、外部テスト向けの共有機能が必要なZillowのような企業にとって、ProtoPieは期待以上の力を発揮してくれるツールだと思います！」
世界トップクラスのチームに選ばれる、ProtoPie。
Rom Impas
,
Principal UX designer, Zillow
ProtoPieは、まさに私たちが求めていたプロトタイピングツールです。実際のプロダクトのようにインタラクティブなデザインを、シンプルに・スピーディーに・コードなしで試せる。セキュリティやチーム共有、外部テスト向けの共有機能が必要なZillowのような企業にとって、ProtoPieは期待以上の力を発揮してくれるツールだと思います！」
世界トップクラスのチームに選ばれる、ProtoPie。
Rom Impas
,
Principal UX designer, Zillow
ProtoPieは、まさに私たちが求めていたプロトタイピングツールです。実際のプロダクトのようにインタラクティブなデザインを、シンプルに・スピーディーに・コードなしで試せる。セキュリティやチーム共有、外部テスト向けの共有機能が必要なZillowのような企業にとって、ProtoPieは期待以上の力を発揮してくれるツールだと思います！」
よくある質問（FAQs）
ProtoPieのインタラクションは、Figmaとどう違うんですか？
ProtoPieでは簡単にできて使えるが、Figmaではできないこと：
個々のレイヤーに割り当てられた特定のインタラクション
スマートデバイスのセンサー、例：ジャイロスコープやコンパス
要するに、ProtoPieでは、Figmaのインタラクションを超えるリアルな（マイクロ）インタラクションを作成できます。
ProtoPieで作成されたサンプルプロトタイプをいくつかご覧ください。
レイヤーごとにインタラクションって設定できますか？
はい、ProtoPieの概念モデルを使えば、個々のレイヤーに割り当てたトリガーとレスポンスを使ってインタラクションを作成できます。
このように、完全に制御された、Figma、Sketch、またはAdobe XDでは作れないリアルなマイクロインタラクションを作成できます。
スクロールできるエリアって作れますか？
はい！ProtoPieでは、スクロール可能な領域をとても簡単に作成できます。サイズ、スクロール方向（縦または横）を調整し、スクロールとページングのどちらかを選べます。
さらに、スクロール可能な領域に関連する条件付きインタラクションを作成できます。
ProtoPieのプラグインはMacとWindowsどちらでも使えますか？
はい！Figma向けのProtoPieプラグインはmacOSとWindowsで利用できます。
Adobe XDやSketchとの連携はできますか？
はい、ProtoPie では Adobe XD と Sketch との 連携 を提供しています。
よくある質問（FAQs）
ProtoPieのインタラクションは、Figmaとどう違うんですか？
ProtoPieでは簡単にできて使えるが、Figmaではできないこと：
個々のレイヤーに割り当てられた特定のインタラクション
スマートデバイスのセンサー、例：ジャイロスコープやコンパス
要するに、ProtoPieでは、Figmaのインタラクションを超えるリアルな（マイクロ）インタラクションを作成できます。
ProtoPieで作成されたサンプルプロトタイプをいくつかご覧ください。
レイヤーごとにインタラクションって設定できますか？
はい、ProtoPieの概念モデルを使えば、個々のレイヤーに割り当てたトリガーとレスポンスを使ってインタラクションを作成できます。
このように、完全に制御された、Figma、Sketch、またはAdobe XDでは作れないリアルなマイクロインタラクションを作成できます。
スクロールできるエリアって作れますか？
はい！ProtoPieでは、スクロール可能な領域をとても簡単に作成できます。サイズ、スクロール方向（縦または横）を調整し、スクロールとページングのどちらかを選べます。
さらに、スクロール可能な領域に関連する条件付きインタラクションを作成できます。
ProtoPieのプラグインはMacとWindowsどちらでも使えますか？
はい！Figma向けのProtoPieプラグインはmacOSとWindowsで利用できます。
Adobe XDやSketchとの連携はできますか？
はい、ProtoPie では Adobe XD と Sketch との 連携 を提供しています。
よくある質問（FAQs）
ProtoPieのインタラクションは、Figmaとどう違うんですか？
ProtoPieでは簡単にできて使えるが、Figmaではできないこと：
個々のレイヤーに割り当てられた特定のインタラクション
スマートデバイスのセンサー、例：ジャイロスコープやコンパス
要するに、ProtoPieでは、Figmaのインタラクションを超えるリアルな（マイクロ）インタラクションを作成できます。
ProtoPieで作成されたサンプルプロトタイプをいくつかご覧ください。
レイヤーごとにインタラクションって設定できますか？
はい、ProtoPieの概念モデルを使えば、個々のレイヤーに割り当てたトリガーとレスポンスを使ってインタラクションを作成できます。
このように、完全に制御された、Figma、Sketch、またはAdobe XDでは作れないリアルなマイクロインタラクションを作成できます。
スクロールできるエリアって作れますか？
はい！ProtoPieでは、スクロール可能な領域をとても簡単に作成できます。サイズ、スクロール方向（縦または横）を調整し、スクロールとページングのどちらかを選べます。
さらに、スクロール可能な領域に関連する条件付きインタラクションを作成できます。
ProtoPieのプラグインはMacとWindowsどちらでも使えますか？
はい！Figma向けのProtoPieプラグインはmacOSとWindowsで利用できます。
Adobe XDやSketchとの連携はできますか？
はい、ProtoPie では Adobe XD と Sketch との 連携 を提供しています。
