Menu

レスポンス

ProtoPie では、Response は トリガー によって起動されるインタラクション要素です。これは、それに結び付けられたトリガーによって開始されるアクションとして説明できます。

移動

レイヤーを指定の座標へ移動します。

Move

Coordinates for a layer’s destination

Move

Coordinates for a layer’s destination

拡大・縮小

レイヤーを拡大または縮小します。

Size

It is possible to modify the size of a layer with fixed values for the width and the height. (When containers are resized, the layers within the container remain unchanged.)

Factor

It is possible to modify the size of a layer proportionally by a certain %. (When containers are resized, the layers within the container are also resized.)

Size

It is possible to modify the size of a layer with fixed values for the width and the height. (When containers are resized, the layers within the container remain unchanged.)

Factor

It is possible to modify the size of a layer proportionally by a certain %. (When containers are resized, the layers within the container are also resized.)

回転

レイヤーを指定の角度に回転します。

Rotate To

The angle a layer rotates to

Rotate By

The amount of rotation a layer rotates by

Direction

The area towards which a layer moves

Rotate To

The angle a layer rotates to

Rotate By

The amount of rotation a layer rotates by

Direction

The area towards which a layer moves

3D 回転

レイヤーを三次元空間で指定の角度に回転します。

Rotate To

The angle a layer rotates to

Rotate By

The amount of rotation a layer rotates by

Direction

The area towards which a layer moves

Pivot

The reference point from which a layer undergoes rotation or resizing

Perspective Depth

The distance between a layer and a point of focus for viewing

Rotate To

The angle a layer rotates to

Rotate By

The amount of rotation a layer rotates by

Direction

The area towards which a layer moves

Pivot

The reference point from which a layer undergoes rotation or resizing

Perspective Depth

The distance between a layer and a point of focus for viewing

不透明度

レイヤーの透明度を変更します。

Change To

Changing the layer’s opacity

Change To

Changing the layer’s opacity

レイヤーの色を変更します。

Fill

Changing the layer’s color

Border

Changing the layer’s border color

Shadow

Changing the layer’s shadow color

Fill

Changing the layer’s color

Border

Changing the layer’s border color

Shadow

Changing the layer’s shadow color

半径

レイヤーの個々の角またはすべての角の半径を変更します。

Radius To

The value a radius should have.

Radius By

The amount that needs to be added or subtracted from the current radius.

Radius To

The value a radius should have.

Radius By

The amount that needs to be added or subtracted from the current radius.

境界線

レイヤーにカスタムの境界線を追加します。

Border Position

Borders can be placed on the inside, center or outside of a layer’s outline

Border Position

Borders can be placed on the inside, center or outside of a layer’s outline

レイヤーにカスタムの影を追加します。

Shadow

Shadows can be customized based on the chosen coordinates and blur

Shadow

Shadows can be customized based on the chosen coordinates and blur

背景ぼかし

特定のぼかし効果に基づいて、下のレイヤーをぼかします。

Default Effects
  • Extra Light

  • Light

  • Dark

Material Effects (Light and Dark themes)
  • Ultra Thin Material

  • Thin Material

  • Material

  • Thick Material

  • Chrome Material

Default Effects
  • Extra Light

  • Light

  • Dark

Material Effects (Light and Dark themes)
  • Ultra Thin Material

  • Thin Material

  • Material

  • Thick Material

  • Chrome Material

順序を変更

スタック内のレイヤーの順序を変更します。

Reorder

The changes of a layer’s order

Reorder

The changes of a layer’s order

スクロール

コンテナ内の特定の位置までスクロールします。

Scroll

The amount a layer scrolls

Scroll

The amount a layer scrolls

ジャンプ

あるシーンから別のシーンへ移動します。

Smart Jump を使うと、シーン間の遷移を自動でアニメーション化できます。Smart Jump については詳しく見る

Scene

Jump to a certain scene

Transition

Transition effects when jumping to a scene

  • Instant

  • Smart

  • Fade

  • Pop

  • Slide In

  • Slide Out

  • Flip

Reset the current scene

The selected scene will be reset when jumping to it. If this option is not enabled, the scene is left in its last state

Scene

Jump to a certain scene

Transition

Transition effects when jumping to a scene

  • Instant

  • Smart

  • Fade

  • Pop

  • Slide In

  • Slide Out

  • Flip

Reset the current scene

The selected scene will be reset when jumping to it. If this option is not enabled, the scene is left in its last state

送信

Send レスポンスはデバイスのインタラクションを有効にしますが、単独では使用できません。

これらは Receive トリガーと一緒に使用する必要があります。Receive トリガーを持つプロトタイプが、Send レスポンスを通じて別のプロトタイプから送信されたメッセージを受信すると、これらのアクションが実行されます。受信したメッセージは、常に送信されたメッセージと一致している必要があります。

メッセージの送受信は、同じシーン内でインタラクションをモジュール化したり、一連のレスポンスを再利用したりするために使用できます。これにより、繰り返し作業を避けられます。

Channel [Component]

Inside the component, you can use the Send response to send a message and this can be received by a Receive trigger outside the component. This also works the other way around. Refer to Components for more information.

Channel [ProtoPie Connect/Studio]

Select ProtoPie Connect/Studio as a channel to allow interactions among devices (it works the same way for ProtoPie Connect).

Channel [Current Scene]

To modularize interactions or reuse a set of responses avoiding repetitive work, you can use Receive triggers and Send responses in one scene.

Message

A message is a string that is transmitted. The message in the Receive trigger on one device should match the message in the Send response, only then interactions among devices will take place.

Assign to Variable

It is possible to send a value together with a message. This value would have to be assigned to a variable upon receiving.

Channel [Component]

Inside the component, you can use the Send response to send a message and this can be received by a Receive trigger outside the component. This also works the other way around. Refer to Components for more information.

Channel [ProtoPie Connect/Studio]

Select ProtoPie Connect/Studio as a channel to allow interactions among devices (it works the same way for ProtoPie Connect).

Channel [Current Scene]

To modularize interactions or reuse a set of responses avoiding repetitive work, you can use Receive triggers and Send responses in one scene.

Message

A message is a string that is transmitted. The message in the Receive trigger on one device should match the message in the Send response, only then interactions among devices will take place.

Assign to Variable

It is possible to send a value together with a message. This value would have to be assigned to a variable upon receiving.

リンク

URL スキームを介してウェブサイトやアプリを開きます。

URL

You can enter website URLs and visit a website in the browser or the in-app browser on iOS.

  • e.g. https://protopie.io

  • e.g. https://www.google.com/search?q=protopie

URL schemes allow you to open system apps and third-party apps on iOS and Android devices. Third-party apps usually have their own defined URL schemes.

  • e.g. mailto:hello@protopie.io

  • e.g. tel:+1-212-555-1234

  • e.g. whatsapp://send?text=[[hello]]

  • e.g. fb://feed

  • e.g. slack://open?team={TEAM_ID}

Formula

You can enter formulas and use the Link response more dynamically.

  • e.g. "https://www.google.com/search?q=" + Input 1.text

  • e.g. "https://www.amazon.com/s/field-keywords=" + keyword.text

URL

You can enter website URLs and visit a website in the browser or the in-app browser on iOS.

  • e.g. https://protopie.io

  • e.g. https://www.google.com/search?q=protopie

URL schemes allow you to open system apps and third-party apps on iOS and Android devices. Third-party apps usually have their own defined URL schemes.

  • e.g. mailto:hello@protopie.io

  • e.g. tel:+1-212-555-1234

  • e.g. whatsapp://send?text=[[hello]]

  • e.g. fb://feed

  • e.g. slack://open?team={TEAM_ID}

Formula

You can enter formulas and use the Link response more dynamically.

  • e.g. "https://www.google.com/search?q=" + Input 1.text

  • e.g. "https://www.amazon.com/s/field-keywords=" + keyword.text

テキスト

テキストレイヤーの内容とプロパティを変更します。テキストのレスポンスには継続時間がありません。

Change To

The text content will be changed to that desired by the user

Size

The text is resized

Weight

The text can be made bolder or lighter

Alignment

The text’s horizontal or vertical alignment can be adjusted

Line Spacing

The text’s line spacing can be adjusted

Change To

The text content will be changed to that desired by the user

Size

The text is resized

Weight

The text can be made bolder or lighter

Alignment

The text’s horizontal or vertical alignment can be adjusted

Line Spacing

The text’s line spacing can be adjusted

メディア

画像、動画、または Lottie レイヤーの内容を変更します。プランによっては、ローカルファイルから、または Enterprise ユーザー向けのセルフホスト URLから画像をインポートできます。

以下の形式がサポートされています:

  • 画像: PNG、JPG、JPEG、BMP、GIF、SVG、WebP。

  • 動画: MP4(H.264)、WebM、および最大 100 MB の MOV ファイル。

  • Lottie: ProtoPie は、式を使用する Lottie ファイルをサポートしていません。

サポートされているメディアファイルについては詳しく見る

Source

Choose an image, video, or Lottie from your device or import one from a self-hosted URL.

Start Delay

Enter the time delay to start the response.

Source

Choose an image, video, or Lottie from your device or import one from a self-hosted URL.

Start Delay

Enter the time delay to start the response.

フォーカス

入力レイヤーにフォーカスする、またはフォーカスを外します。

Focus In

The cursor focuses in on the selected Input Layer.

Focus Out

The cursor focuses out of the selected Input Layer.

Focus In

The cursor focuses in on the selected Input Layer.

Focus Out

The cursor focuses out of the selected Input Layer.

カメラ

デバイスのネイティブカメラにアクセスする、または終了します。

Camera レスポンスは camera レイヤーと組み合わせて使用する必要があります。また、プロトタイプ内で QR & Barcode Scanner 機能を使用して、QR コードやバーコードを直接スキャンすることもできます。

Action [Start]

Start the camera. You can choose between the front-facing camera and the rear-facing camera.

Action [Stop]

Stop the camera.

Camera [Current Camera]

Use the current camera.

Camera [Front Camera]

Use the current camera.

Camera [Rear Camera]

Use the rear-facing camera.

Camera [Switch]

Use the camera facing the opposite side of the last used camera.

QR & Barcode Scanner

Enable scanning QR and barcodes from within your prototype.

Open URL Immediately

Scan a QR code to open a link in a web browser. To scan barcodes, utilize the Keep Tracking option.

Keep Tracking

Monitor values stored in your QR or barcode.

Action [Start]

Start the camera. You can choose between the front-facing camera and the rear-facing camera.

Action [Stop]

Stop the camera.

Camera [Current Camera]

Use the current camera.

Camera [Front Camera]

Use the current camera.

Camera [Rear Camera]

Use the rear-facing camera.

Camera [Switch]

Use the camera facing the opposite side of the last used camera.

QR & Barcode Scanner

Enable scanning QR and barcodes from within your prototype.

Open URL Immediately

Scan a QR code to open a link in a web browser. To scan barcodes, utilize the Keep Tracking option.

Keep Tracking

Monitor values stored in your QR or barcode.

再生

ビデオ、音声、Lottie レイヤーの再生、一時停止、シークを行います。

Play

Play the audio, video, or Lottie file.

Pause

Pause the audio, video, or Lottie file.

Seek

Move to a specific point in the audio, video, or Lottie file. Enter a timestamp following the MM:SS.SS format.

It's possible to use formulas. This way, you can make a working scrubber. See example.

Play

Play the audio, video, or Lottie file.

Pause

Pause the audio, video, or Lottie file.

Seek

Move to a specific point in the audio, video, or Lottie file. Enter a timestamp following the MM:SS.SS format.

It's possible to use formulas. This way, you can make a working scrubber. See example.

音量

ビデオまたは音声ファイルの音量を制御します。

Volume To

Adjusting the volume of an audio or video layer

Volume To

Adjusting the volume of an audio or video layer

バイブレーション

スマートデバイスで振動とハプティックフィードバックを有効にします。

ハプティックフィードバックの詳細については、Google の Android デベロッパー ドキュメント と Apple の Human Interface Guidelines を参照してください。

iOS
  • Default: Basic vibration.

  • Notification - Success: Indicates that a task or action, such as depositing a check or unlocking a vehicle, has completed.

  • Notification - Warning: Indicates that a task or action, such as depositing a check or unlocking a vehicle, has produced a warning of some kind.

  • Notification - Failure: Indicates that a task or action, such as depositing a check or unlocking a vehicle, has failed.

  • Impact - Light/Medium/Heavy: Provides a physical metaphor that complements the visual experience. For example, the user might feel a thud when a view slides into place or two objects collide.

  • Selection - Selection: Indicates that the selection is actively changing. For example, the user feels light taps while scrolling a picker wheel. This feedback is intended for communicating movement through a series of discrete values, not making or confirming a selection.

Android
  • Default: Basic vibration.

  • Keyboard Press: Haptic feedback when the user has pressed a virtual or software keyboard key.

  • Keyboard Tap: Haptic feedback when the user has pressed a soft keyboard key.

  • Long Press: Haptic feedback when the user has performed a long press on an object that is resulting in an action being performed.

  • Virtual Key: Haptic feedback when the user has pressed on a virtual on-screen key.

iOS
  • Default: Basic vibration.

  • Notification - Success: Indicates that a task or action, such as depositing a check or unlocking a vehicle, has completed.

  • Notification - Warning: Indicates that a task or action, such as depositing a check or unlocking a vehicle, has produced a warning of some kind.

  • Notification - Failure: Indicates that a task or action, such as depositing a check or unlocking a vehicle, has failed.

  • Impact - Light/Medium/Heavy: Provides a physical metaphor that complements the visual experience. For example, the user might feel a thud when a view slides into place or two objects collide.

  • Selection - Selection: Indicates that the selection is actively changing. For example, the user feels light taps while scrolling a picker wheel. This feedback is intended for communicating movement through a series of discrete values, not making or confirming a selection.

Android
  • Default: Basic vibration.

  • Keyboard Press: Haptic feedback when the user has pressed a virtual or software keyboard key.

  • Keyboard Tap: Haptic feedback when the user has pressed a soft keyboard key.

  • Long Press: Haptic feedback when the user has performed a long press on an object that is resulting in an action being performed.

  • Virtual Key: Haptic feedback when the user has pressed on a virtual on-screen key.

読み上げ

テキストを入力するか、数式を使って、テキストを読み上げる機能を有効にします。

詳しく見るで音声プロトタイピングについて学べます。

Text

You can enter the text to be read out loud.

Formula

To make your voice interaction more dynamic, you can use formulas as long as the used formula results in a text. Also, you can use the predefined variable $voiceTranscript that stores the last voice command.

Language

You can choose from 40 languages and language variants.

Voiced by

You can choose between a female and male voice per language.

Speed

You can adjust the speed by choosing a value between 0.5 and 2.

Pitch

You can adjust the pitch by choosing a value between 0.5 and 2.

Text

You can enter the text to be read out loud.

Formula

To make your voice interaction more dynamic, you can use formulas as long as the used formula results in a text. Also, you can use the predefined variable $voiceTranscript that stores the last voice command.

Language

You can choose from 40 languages and language variants.

Voiced by

You can choose between a female and male voice per language.

Speed

You can adjust the speed by choosing a value between 0.5 and 2.

Pitch

You can adjust the pitch by choosing a value between 0.5 and 2.

聞き取り

音声コマンドの聞き取りを有効にします。

デフォルトでは、プロトタイプは音声コマンドを一切拾いません。そのため、まず聞き取りを有効にする必要があります。プロトタイプは最大 5 分間、継続して音声コマンドを聞き取ることができます。

詳しく見るで音声プロトタイピングについて学べます。

Continuous

When listening to voice commands is enabled, it would stop automatically as soon as no speech is being picked up anymore. In order to avoid this, you can check Continuous to make sure listening remains enabled even when no voice commands are picked up.

When Continuous has been checked, you would need a separate Listen response to stop listening. This means that when Continuous is unchecked, you do not need a separate Listen response to stop listening.

Continuous

When listening to voice commands is enabled, it would stop automatically as soon as no speech is being picked up anymore. In order to avoid this, you can check Continuous to make sure listening remains enabled even when no voice commands are picked up.

When Continuous has been checked, you would need a separate Listen response to stop listening. This means that when Continuous is unchecked, you do not need a separate Listen response to stop listening.

リセット

現在のシーン、レイヤー、または変数をリセットします。シーン全体をリセットしたり、レイヤーや変数を初期状態に戻したりできます。

停止

レイヤーのアニメーションを停止します。たとえば、Stop を使って読み込みバーや進行バーを停止できます。

割り当て

変数に保存されている値を上書きします。

条件

レスポンスをトリガーするために満たす必要のあるパラメータを設定します。

> Greater than

A Response is triggered when a property of the target layer exceeds that set for this property

≥ Greater than or equal to

A Response is triggered when a property of the target layer reaches or exceeds that set for this property

< Less than

A Response is triggered when a property of the target layer goes below that set for this property

≤ Less than or equal to

A Response is triggered when a property of the target layer reaches or goes below that set for this property

= Equal to

A Response is triggered when a property of the target layer is exactly the same as that set for this property.

≠ Not equal to

A Response is triggered when a property of the target layer is not exactly the same as that set for this property

> Greater than

A Response is triggered when a property of the target layer exceeds that set for this property

≥ Greater than or equal to

A Response is triggered when a property of the target layer reaches or exceeds that set for this property

< Less than

A Response is triggered when a property of the target layer goes below that set for this property

≤ Less than or equal to

A Response is triggered when a property of the target layer reaches or goes below that set for this property

= Equal to

A Response is triggered when a property of the target layer is exactly the same as that set for this property.

≠ Not equal to

A Response is triggered when a property of the target layer is not exactly the same as that set for this property