INSIGHTS & INSPIRATION
PRODUCT LEARNING & SUPPORT
INSIGHTS & INSPIRATION
PRODUCT LEARNING & SUPPORT
ProtoPie + Sketch
Figma向けの高忠実度プロトタイピング—クリック可能なだけの限られたプロトタイプを超えましょう。Figmaデザインをインポートして、動的で条件付きのインタラクションを追加できます。
![](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>)
思わず触れたくなる、インタラクション。
シンプルなロジック設定だけで、静的なデザインが生き生きとしたプロトタイプに早変わり。簡単なインタラクションから複雑な数式まで、コードなしでそのまま作れます。
![](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の組み合わせだけでパパッと作れます。
ロジックベースで直感的
シンプルな構造
コードは一切不要
シームレスなデザインワークフロー
Sketch用ProtoPieプラグインでアセット準備の時間を短縮。SketchのデザインをProtoPieへ即座にインポートできます。
1. SketchのデザインをProtoPieへインポート
マルチアートボードや必要なオブジェクトをProtoPieにエクスポートします。
2. パワフルでリアルなプロトタイプを作成
動的なインタラクションと条件付きロジックを活用し、実際の製品のようにシミュレーションします。
3. マルチデバイスでのプロトタイプ検証
テストを通じて、プロトタイプの見栄えや操作感（ルック＆フィール）を深く検証します。
シームレスなデザインワークフロー
Sketch用ProtoPieプラグインでアセット準備の時間を短縮。SketchのデザインをProtoPieへ即座にインポートできます。
1. SketchのデザインをProtoPieへインポート
マルチアートボードや必要なオブジェクトをProtoPieにエクスポートします。
2. パワフルでリアルなプロトタイプを作成
動的なインタラクションと条件付きロジックを活用し、実際の製品のようにシミュレーションします。
3. マルチデバイスでのプロトタイプ検証
テストを通じて、プロトタイプの見栄えや操作感（ルック＆フィール）を深く検証します。
シームレスなデザインワークフロー
Sketch用ProtoPieプラグインでアセット準備の時間を短縮。SketchのデザインをProtoPieへ即座にインポートできます。
1. SketchのデザインをProtoPieへインポート
マルチアートボードや必要なオブジェクトをProtoPieにエクスポートします。
2. パワフルでリアルなプロトタイプを作成
動的なインタラクションと条件付きロジックを活用し、実際の製品のようにシミュレーションします。
3. マルチデバイスでのプロトタイプ検証
テストを通じて、プロトタイプの見栄えや操作感（ルック＆フィール）を深く検証します。
世界トップクラスのチームが選ぶProtoPie
Eduardo Sonnino
,
Senior Designer, Microsoft
「これまで無数のプロトタイピングツールを試してきましたが、ProtoPieは間違いなく最も柔軟かつ強力で、あらゆるチームのワークフローに完璧にフィットするツールです。使用しているツールやプラットフォームに関係なく、デザインアセットを数秒でインポートし、素晴らしいノーコードのプロトタイプを数分で作成できます。」
世界トップクラスのチームが選ぶProtoPie
Eduardo Sonnino
,
Senior Designer, Microsoft
「これまで無数のプロトタイピングツールを試してきましたが、ProtoPieは間違いなく最も柔軟かつ強力で、あらゆるチームのワークフローに完璧にフィットするツールです。使用しているツールやプラットフォームに関係なく、デザインアセットを数秒でインポートし、素晴らしいノーコードのプロトタイプを数分で作成できます。」
世界トップクラスのチームが選ぶProtoPie
Eduardo Sonnino
,
Senior Designer, Microsoft
「これまで無数のプロトタイピングツールを試してきましたが、ProtoPieは間違いなく最も柔軟かつ強力で、あらゆるチームのワークフローに完璧にフィットするツールです。使用しているツールやプラットフォームに関係なく、デザインアセットを数秒でインポートし、素晴らしいノーコードのプロトタイプを数分で作成できます。」
よくある質問（FAQs）
ProtoPie のインタラクションは Sketch のものとどう違いますか？
ProtoPieでは簡単にでき、使えるが、Sketchではできないこと：
個々のレイヤーに割り当てられた個別のインタラクション
スマートデバイスのセンサー、たとえばジャイロスコープやコンパス
要するに、ProtoPieでは、Figmaのインタラクションを超えるリアルな（マイクロ）インタラクションを作成できます。
ProtoPieで作成されたサンプルプロトタイプをいくつかご覧ください。
ProtoPieで個々のレイヤーに対してインタラクションを作成できますか？
はい、ProtoPieの概念モデルを使えば、個々のレイヤーに割り当てたトリガーとレスポンスを使ってインタラクションを作成できます。
このように、完全に制御された、Figma、Sketch、またはAdobe XDでは作れないリアルなマイクロインタラクションを作成できます。
ProtoPieでスクロール可能な領域を作れますか？
はい！ProtoPieでは、スクロール可能な領域をとても簡単に作成できます。サイズ、スクロール方向（縦または横）を調整し、スクロールとページングのどちらかを選べます。
さらに、スクロール可能な領域に関連する条件付きインタラクションを作成できます。
ProtoPieのSketch用プラグインはmacOSとWindowsで利用できますか？
現在、Sketch 用の ProtoPie プラグイン は macOS でのみ利用できます。
ProtoPie は Figma や Adobe XD との連携を提供していますか？
はい、ProtoPie は Sketch と Adobe XD との 連携 を提供しています。
よくある質問（FAQs）
ProtoPie のインタラクションは Sketch のものとどう違いますか？
ProtoPieでは簡単にでき、使えるが、Sketchではできないこと：
個々のレイヤーに割り当てられた個別のインタラクション
スマートデバイスのセンサー、たとえばジャイロスコープやコンパス
要するに、ProtoPieでは、Figmaのインタラクションを超えるリアルな（マイクロ）インタラクションを作成できます。
ProtoPieで作成されたサンプルプロトタイプをいくつかご覧ください。
ProtoPieで個々のレイヤーに対してインタラクションを作成できますか？
はい、ProtoPieの概念モデルを使えば、個々のレイヤーに割り当てたトリガーとレスポンスを使ってインタラクションを作成できます。
このように、完全に制御された、Figma、Sketch、またはAdobe XDでは作れないリアルなマイクロインタラクションを作成できます。
ProtoPieでスクロール可能な領域を作れますか？
はい！ProtoPieでは、スクロール可能な領域をとても簡単に作成できます。サイズ、スクロール方向（縦または横）を調整し、スクロールとページングのどちらかを選べます。
さらに、スクロール可能な領域に関連する条件付きインタラクションを作成できます。
ProtoPieのSketch用プラグインはmacOSとWindowsで利用できますか？
現在、Sketch 用の ProtoPie プラグイン は macOS でのみ利用できます。
ProtoPie は Figma や Adobe XD との連携を提供していますか？
はい、ProtoPie は Sketch と Adobe XD との 連携 を提供しています。
よくある質問（FAQs）
ProtoPie のインタラクションは Sketch のものとどう違いますか？
ProtoPieでは簡単にでき、使えるが、Sketchではできないこと：
個々のレイヤーに割り当てられた個別のインタラクション
スマートデバイスのセンサー、たとえばジャイロスコープやコンパス
要するに、ProtoPieでは、Figmaのインタラクションを超えるリアルな（マイクロ）インタラクションを作成できます。
ProtoPieで作成されたサンプルプロトタイプをいくつかご覧ください。
ProtoPieで個々のレイヤーに対してインタラクションを作成できますか？
はい、ProtoPieの概念モデルを使えば、個々のレイヤーに割り当てたトリガーとレスポンスを使ってインタラクションを作成できます。
このように、完全に制御された、Figma、Sketch、またはAdobe XDでは作れないリアルなマイクロインタラクションを作成できます。
ProtoPieでスクロール可能な領域を作れますか？
はい！ProtoPieでは、スクロール可能な領域をとても簡単に作成できます。サイズ、スクロール方向（縦または横）を調整し、スクロールとページングのどちらかを選べます。
さらに、スクロール可能な領域に関連する条件付きインタラクションを作成できます。
ProtoPieのSketch用プラグインはmacOSとWindowsで利用できますか？
現在、Sketch 用の ProtoPie プラグイン は macOS でのみ利用できます。
ProtoPie は Figma や Adobe XD との連携を提供していますか？
はい、ProtoPie は Sketch と Adobe XD との 連携 を提供しています。
