Intro

プロトパイはスマートデバイス向けのプロトタイピングツールです。コーディングを一行もしなくても精巧なプロトタイプを手軽に素早く作る事ができます。さらに、デバイス上で実際にプロトタイプのテストすることが可能であるため、実際の使用環境が下でシミュレーションする事もできます。

Explore design solutions

エンジニアの助けがなくても様々なインタラクションを実現することができます。

Communicate designs

精巧なインタラクションを簡単に説明することができます。

Research user feedback

開発前の段階でもユーザーのフィードバックを容易に受けることができます。

Concept Model

interaction concept model

プロトパイの概念モデルは、自然界で物体が動く原理に基づいています。インタラクションの対象となるオブジェクトが存在し、そのオブジェクトに対してのインタラクションは、トリガーによって制御され、そのレスポンスが結果として返ってきます。

上の例でスクリーンに見えるオブジェクトをタップする動作はトリガーで該当し,タップしたオブジェクトが動く反応はレスポンスです。

interaction piece table

自然界で元素が数多くの組み合わせによって様々な物質を構成するように,プロトパイでは様々なトリガーとレスポンスを組み合わせることで多様なインタラクションを作り出すことができます。上の表で左側はトリガーを,右側はレスポンスを意味します。中央はトリガーとレスポンスが有機的に結合されたコンポーネントを意味します。

Why ProtoPie?

プロトパイを利用することで得られるメリットは大きく四つげられます。

1. Low learning cost

プロトパイは直観的に理解できる概念モデルを持っているとともに、他のグラフィックツールと類のUIで構成されており、他のデザインツールに慣れている方なら容易に使用できます。

2. Code Free

プロトパイはコーディングをしなくても精巧なプロトタイプが手軽に制作することができます。複雑なコードや関数の代わりにインタラクションピース(トリガー,レスポンス)を組み合わせることで 多様なインタラクションが表現できます。

3. Multi-finger gestures & sensors

プロトパイはマルチタッチに対応していますので、二本指や三本指などを使用したインタラクションを活用するプロトタイプを制作することができます。また,スマートフォンに搭載されている様々なセンサーを利用することができます。また、他のプロトタイプとは違い、デバイス間通信が必要なサービスデバイス向けのプロトタイピングも可能です。

4. Test on real phones

プロトパイはスマートフォンからもプロトタイプを確認することができます。同時に複数のデバイスでプロトタイプのテストができるため、チーム内のデザイン会議やユーザーサーベイをするときなど、様々な場面で活用できます。

Layer

プロトパイでは、他のデザインツールのやり方と同じようにレイヤーのプロパティを調整することができます。レイヤーをはメニューバーから簡単に追加できます。また、レイヤーのサイズや位置を変更する方法も他のデザインツールと同じであるため、すぐに理解することが出来ます。

Layer Property

位置
キャンバス上でレイヤーの座標を設定します。
サイズ
レイヤーの大きさを設定します。
回転
レイヤーの角度を設定します。
基準点
レイヤーの位置、大きさ、角度を変更する際の基準点(原点)を設定します。
角丸の半径
四角レイヤーの角の曲率を設定します。
不透明度
レイヤーの透明度を設定します。レイヤーの透明度を0に設定するとトリガーに反応しません。
カラー
レイヤーの色と色の透明度を設定します。色の透明度を0に設定してもトリガーに反応します。
ヒートエリア
レイヤーのタッチ領域が任意に調整できます。
隠れたレイヤーのタッチを許可する
レイヤーがトリガーに反応しないように設定します。
マスクとして使う
ベクトルレイヤーだけが持つプロパティであり、他のレイヤーをレイヤーマスクするように設定します。

Video Layer

プロトパイは動画レイヤをサポートします。h264でエンコーディングされたMP4形式の動画ファイルが使用できます。

自動で再生
プロトタイプが実行されたら、自動的に動画を再生します。
繰り返す
動画を繰り返し再生します。

Text Layer

テキストがをプロトパイ上で直接入力できます。

フォント
フォントファミリーが選択できます。System Default を選択するとプロトタイプを実行するプラットフォームの基本フォントで表示されます。
ウエイト
フォントの太さを調整できます。
サイズ
テキストのサイズを調整できます。
整列
フォントの左右,上下の整列を調整できます。
行間
テキストの行間を調整できます。

Missing Font

If a font used in ProtoPie Studio is missing on the running device, a “missing font” alert will pop up. Alternative fonts can be selected to replace the missing font.

Missing font panel

Input Layer

キーボードでタイピング可能なインプットレイヤです。

Text Options: Text
インプットレイヤに予めタイピングされているテキストが必要な時に使用します。
PlaceHolder
インプットレイヤにプレースホルダを設定することができます。プレースホルダの色はタイピングされるテキストの色と異なるように設定できます。
Keypad Options: Type
モバイルキーボードのタイプが選べます。“テキスト”, “URL”, “電子メール”, “数字”, “テキストパスワード”, “数字パスワード”を支援します。
Keypad Options: Return
モバイルキーボードのリターンキータイプが選べます。“Go”, “Next”, “Send”, “Search”, “Done”を支援します。自動フォーカスアウトをオンにするとリターンキーを押したときインプットレイヤでフォーカスアウトします。
Keypad Options: Look
iOSに限りキーボードのテーマをダーク/ライトの中で選べます。

コンテナー

コンテナーは多数のレイヤーをグループ化して一緒にコントロールしたり、スクロールやページングインタラクションを作る用途として用いられます。

Relative Coordinates

一般的にレイヤーのx,y座標はデバイスの左上を原点にした座標システムになりますが、コンテナー内のレイヤーはコンテナーの左上を原点にした座標システムになります。

Relative Coordinates

サブレイヤーをクリッピングする

プロパティパネルのクリップサブレイヤーをオンにすると、コンテナー領域だけが見えるようにできます。

Clip Sublayers

Scroll / Paging

プロパティパネルでコンテナーのスクロールまたはページングプロパティが設定できます。レイヤーパネルでコンテナー内にレイヤーを入れるだけでスクロールまたはページングが可能になります。

Scroll

縦、または横の長いレイヤーをスクロールします。

scroll interaction

プロパティ

方向
レイヤーをスクロールまたはページングする方向を設定します。
オーバースクロール
オーバースクロールした時のバウンス効果をオンオフできます。

Paging

指でスクリーンを水平または垂直にドラッグする際に、ページングコンテナ ー内のレイヤーがページングコンテイナーの幅または高さの分だけ動きます。

paging interaction

プロパティ

方向
レイヤーをスクロールまたはページングする方向を設定します。
オーバースクロール
オーバースクロールした時のバウンス効果をオンオフできます。

Touch Trigger

スマートデバイスで普遍的に使用されるタッチ基盤のトリガーです。タップ、長押し、ドラッグなど最も基本となるトリガーと2つの指を使用するピンチ、ローテーションのようなマルチタッチジェスチャー基盤のトリガーを支援します。

Tap

レイヤーを一回タップした時にレスポンスを実行します。

tap trigger
Tap
Move

Trigger Property

指の本数
最大,指5本まで同時にタッチができます。

Double Tap

レイヤーを素早く2回タップした時にレスポンスを実行します。

doubletap trigger
Double Tap
Move

Trigger Property

指の本数
最大,指5本まで同時にタッチができます。

Touch Down

レイヤーに指が当った瞬間にレスポンスを実行します。

touchdown trigger
Touch Down
Move

Trigger Property

指の本数
最大,指5本まで同時にタッチができます。

Touch Up

レイヤーから指が離れる瞬間にレスポンスを実行します。

touchup trigger
Touch Up
Move

Trigger Property

指の本数
最大,指5本まで同時にタッチができます。

Long Press

レイヤーに一定時間長押しすると、レスポンスを実行します。

longpress trigger
Long Press
Move

Trigger Property

指の本数
最大,指5本まで同時にタッチができます。
押している時間 (秒)
指先でタッチスクリーンの同じ位置を押す時間。

Fling

レイヤーをスワイプ時、対象になるレイヤーは動きません。

fling trigger
Fling
Scale

Trigger Property

方向
指先が動く方向を設定します。

Pull

プルは成功と失敗の概念があるトリガーです。レイヤーを一定距離以上または一定速度以上にドラッグしたとき成功だと認められます。成功した場合、現在レイヤーの座標からユーザーが入力した距離だけ移動し、失敗する場合は元の位置に戻ります。

pull trigger
Pull
Scale

Trigger Property

方向
指先が動く方向を設定します。
距離
プルが成功したときレイヤが移動する距離を設定します.
オーバープルを許可
レイヤーの移動距離を超過してドラッグする場合の動きを設定します。
Easing
レイヤーが動く加速度を設定します。

Drag

レイヤーをドラッグして動かしたり、指の移動距離に応じてサイズと角度を調整することができます。

drag trigger
Drag
Move

Trigger Property

指の本数
最大,指5本まで同時にタッチができます。

ドラッグトリガーと組み合わせるレスポンスのプロパティ

方向
指先が動く方向を設定します。
制限
レイヤーが動く範囲の上限を設定します。
比率
レイヤーがドラッグされる距離と指が動く距離の比率を設定します。数値が100の時1:1の比で動いて、数値が大きくなるほど指の動きよりレイヤーの動きが大きくなります。

Pinch

二本の指がタッチスクリーンに触れた状態に指の間隔を広げたり狭めたりする動作でレイヤーのサイズが調整することができます。

pinch trigger
Pinch
Scale

The response properties linked to pinch triggers

方向
指が動く方向を設定します。
回転軸
レイヤーのサイズや角度が変化する基準点を設定します。
制限
レイヤーが動く範囲の上限を設定します。

Rotate

二本の指でレイヤーをつかんで回転することができます。

rotate trigger
Rotate
Rotate

回転トリガーと組み合わせるレスポンスのプロパティ

回転軸
レイヤーのサイズや角度が変化する際の基準点を設定します。

Conditional Trigger

ユーザーが設定した条件を満たした時にだけレスポンスが実行されるようにします。

Chain

動くレイヤーがある時に、そのレイヤーの変化によって関連付けられた他のレイヤーを影響を与えます。

chain trigger
Drag
Move
Chain
Scale

Trigger Property

Property
他のレイヤーのプロパティを変更する時に基準となるプロパティを選択します。

Response Properties after Chain

Trigger’s Layer Mapping Range 1
チェインのターゲットレイヤーの動作範囲を入力します。
Response’s Layer Mapping Range 2
チェインのターゲットレイヤーの動作に合わせて動くレイヤーの範囲値を入力します。

Range

レイヤーのプロパティが変わる際、ユーザーが設定した条件を満たした場合にレスポンスを実行します。ユーザーはレイヤーの座標やサイズのようなプロパティを直接設定した値を基準にして、基準より大きい小さいまたは含む含まないなどの状況に対する条件を設定することができます。

range trigger
Drag
Move
Range
Scale

Trigger Property

Greater than or equal to 1
ターゲットレイヤーのプロパティが特定の値以上の時に実行されます。
Less than or equal to 2
ターゲットレイヤーのプロパティが特定の値以下の時実行されます。
Between 3
ターゲットレイヤーのプロパティが特定範囲内の値になったときに実行されます。
Not between 4
ターゲットレイヤーのプロパティが特定範囲内の値にならなかったときに実行されます。

Start

プロトタイプが実行されたり、シーンが転換された際に、自動でレスポンスが実行されます、

onload trigger
Start
Move

Detect

レイヤプロパティまたは変数が変わるときレスポンスを実行します。

range trigger
Drag
Move
Detect
Scale

Mouse Trigger

デスクトップで使用されるマウス向けのトリガーです。
Mouse Over

マウスのイベントです。マウスがオブジェクトと重なった際にレスポンスを実行します。

mouse over trigger
Mouse Over
Scale

Mouse Out

マウスのイベントです。マウスがオブジェクトから離れた際にレスポンスを実行します。

mouse out trigger
Mouse Out
Scale

Key Trigger

Press

外部キーボードとアンドロイドのキーが押されるとレスポンスを実行します。

Trigger Property

Keyboard
0~1, A~Z, Space, Tabなどのキーが選択できます。
Android
アンドロイドのバックキーとボリュームアップ、ダウンキーが選択できます。

Input Trigger

キーボード(スマートデバイスのネイティブキーボードを含め)を通して直接入力できるインプットレイヤで使用可能なトリガーです。入力後にキーボードからリターンキーをタップしたり、インプットレイヤにフォーカスイン又はアウトされる時点に動作するインタラクションが作れます。

Focus

インプットレイヤにカーソルがフォーカスイン/アウトされた時、レスポンスを実行します。インプットの状態値によって異なるデザインを作るときに使用します。

Trigger Property

Focus In
カーソルがフォーカスインされると、レスポンスを実行します。
Focus Out
カーソルがフォーカスアウトされると、レスポンスを実行します。

Return

外部のキーボード又はモバイルキーボードでリターンキーを押すとレスポンスを実行します。

Sensor Trigger

デバイスのセンサーが使用できます。デバイス周辺の音の大きさ、デバイスの傾きなどを活用してレスポンスをコントロールするインタラクションを作ることができます。

センサートリガーにつながるレスポンスのプロパティ

柔らかさ
センサーの値にマッピングしたレイヤーの動きをなめらかにする補正ができます。1補正をしていない基本設定になっており、223とはなめらかに補正された動きを表現します。[2より3に強めの補正がかかります。
Mapping Range - Device's Sensor 4
インタラクションを実行させるセンサーの値の範囲を入力します。
Mapping Range - Response's Layer 5
センサーの値に合わせて動くレイヤーの範囲の値を入力します。

Tilt

デバイスを傾ける角度によってレスポンスを実行することができます。

tilt trigger
Tilt
Move
tilt image

Trigger Property

軸心
デバイスが回転する回転軸を選択します。

Compass

デバイスの羅針盤機能を利用してデバイスが向く方位によってレスポンスを実行することができます。

compass trigger
Compass
Rotate
compass niddle

Sound

デバイス周辺の音の大きさによってレスポンスを実行することができます。

sound trigger
Sound
Scale

3D Touch

3DTouchに対応したiPhoneのみ、タッチスクリーンを押す強度によってレスポンスを実行できます。押す強度の値は最低0から最大6.7まで認識できます。

3dtouch trigger
3D Touch
Scale

Proximity

デバイスの近接センサーを使用することができます。近接センサーから離れたり、近づいた時にレスポンスを実行します。

Proximity trigger
Proximity
Opacity

Trigger Property

離れるとき
デバイスが近づいた時にレスポンスを実行します。
近くとき
デバイスが離れた時にレスポンスを実行します。

Receive

デバイス間インタラクションを可能にします。デバイス単体では使用できず、Send(送信)レスポンスと一緒に使われるトリガーです。センドSendレスポンスから転送する文字列とReceive(受信)トリガーで設定した文字列が一致するときにレスポンスを実行します。

Trigger Property

チャンネル
通信するチャンネルを選択します。デバイス間インタラクションを可能にするためにはプロトパイスタジオを設定します。Android Broadcastingは一つのアンドロイドデバイス内にあるアプリ同士で通信するための用途に用いられます。
アイディー
転送する文字列を設定します。Send(送信)レスポンスで設定した文字列とReceive(受信)トリガーで設定した文字列が一致するとき,デバイス間のインタラクションが実行できます。

Response

レスポンスはトリガーにより発生した結果となるインタラクションピースです。トリガーと組み合わせる方式によって異なるプロパティを持ちます。

Move

レイヤーの位置を移動させます。

ムーブ
レイヤーが移動する座標を設定します。
move response

Scale

レイヤーのサイズを調整します。

サイズ
レイヤーのサイズを幅widthと高さheightで調整します。コンテナーのサイズを調整する時にはコンテナー内のレイヤーのサイズには変化がありません。
ファクター
レイヤーのサイズをパーセント%で調整します。コンテナーのサイズを調整する時,コンテナー中のレイヤーも一緒にサイズ調整されます。
scale response

Rotate

レイヤーを設定した角度で回転させます。

指定角度に回転
レイヤーが回転する角度の絶対値を設定します。
指定角度まで回転
レイヤーの角度を設定した値の分ずつ増加または減少させます。
方向
レイヤーが回転する方向を設定します。
rotate response

3D Rotate

レイヤーを3次元回転させます。

指定角度に回転
レイヤーが回転する角度の絶対値を設定します。
指定角度まで回転
レイヤーの角度を設定した値の分ずつ増加または減少させます。
方向
レイヤーが回転する方向を設定します。
回転軸
レイヤーが回転する方向を設定します。
遠近感
レイヤーが3次元回転するとき歪曲の程度が設定できます。数値が小さくなるほど歪曲が大きくなります。
3d rotate response

Opacity

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

変動値
変更される透明度の値を設定します。
opacity response

Color

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

変動値
変更されるレイヤーの色を設定します。
color response

Radius

レイヤーの角の曲率を変更します。

変動値
変更される角の曲率の値を設定します。
radius response

Scroll

レイヤーを特定の方向にスクロールします。

Scroll
レイヤーをスクロールして移動する距離の値を入力します。
scroll response

Reorder

レイヤーの順番を変更します.レイヤートがコンテナの中にある場合コンテナー中に位置するレイヤー同士の順番が変わります。

並べ替え
レイヤーが配列した順番を変えます。
reorder response

Jump

シーン間の移動ができます。

移動する
移動するシーンを選択できます。
エフェクト
シーン移動をする時にトランジション効果を入れることができます。
選択したシーンリセット
移動するシーンの状態を初期状態に戻します。このオプションを付けなかった場合、そのシーンで最後に起きたインタラクションの状態のまま移動します。
jump response

Playback

動画レイヤーがコントロールできます。動画の再生や停止、特定区間にジャンプするなどができます。

再生
動画を再生します。
一時停止
動画を一時停止します。
シーク
動画の特定区間にジャンプします。M:SS形式で特定区間が入力できます。

Text

テキストのプロパティや内容が変更できます.テキストレスポンスは持続時間がありません。

変動値
テキストの内容を変更します。
サイズ
テキストのサイズを変更します。
ウエイト
テキストの太さを変更します。
整列
テキストの左右または上下の整列を変更します。
行間
テキストのサイズを変更します。
text response

Stop

プログレスバー(Progress bar)やローダー(Loader)のようにアニメーションが進行中のレイヤを止めることができます.

Send

デバイス間のインタラクションを可能にします。デバイス単体では使用できず,Send(送信)レスポンスと一緒に使われるトリガーです。Sendレスポンスから転送する文字列とReceive(受信)トリガーで設定した文字列が一致するときにレスポンスを実行します。

Vibrate

デバイスに振動を与えます。

設定可能なオプションはありません。

vibrate response

Focus

選択したインプットレイヤにカーソルをフォーカスイン/アウトします。

Focus In
選択されたインプットレイヤにフォーカスインします。
Focus Out
選択されたインプットレイヤにフォーカスアウトします。
focus response

Assign

変数の値が上書きできます。

Condition

レスポンスが実行するための条件を設定します。コンディションピースで設定した条件を満たすときに,以下に羅列したレスポンスが実行されます。

Greater than
ターゲットレイヤのプロパティが特定の値を超える場合にのみ実行します。
Greater than or equal to
ターゲットレイヤのプロパティが特定の値以上の場合にのみ実行します。
Less than
ターゲットレイヤのプロパティが特定の値未満の場合にのみ実行します。
Less than or equal to
ターゲットレイヤのプロパティが特定の値以下の場合にのみ実行します。
Equal to
ターゲットレイヤのプロパティが特定の値と一致しる場合にのみ実行します。
Not equal to
ターゲットレイヤのプロパティが特定の値と一致しない場合にのみ実行します。
condition response

Timeline / Valueline

プロトパイではトリガーの種類によってレスポンスの実行範囲をタイムラインとバリューラインに区分して表示します。タイムラインやバリューラインを通してレスポンスの持続時間とスタートディレイ、マッピングレンジが視覚的に確認でき,レンジバーにマウスオーバーしたときに表示されるバー(またはハンドル)をドラッグして持続時間と開始点を調整することができます。

*連続トリガーに使用されるレスポンスは決められた持続時間やマッピングされる値がないため、タイムライン、バリューラインはありません。

Timeline

タイムラインはレスポンスの持続時間、ディレイ、リピート(繰り返し)設定を視覚化して表示します。多数のレスポンスが一緒に使用されるマイクロインタラクションを作製するときにタイムラインを使うとより効率的に各レスポンスのタイミングが調整できます.

timeline image

Valueline

バリューラインはトリガーに割り当てられたレイヤーと、レスポンスに割り当てられたレイヤーの動作範囲を表示します。

valueline image

Scene

二つ以上の画面が必要な場合は、シーンから追加することができます。また,複雑なプロトタイプの場合は機能単位でシーンを分離することで、インタラクションパネルの可読性を向上させるとができます。

scene list

シーン管理

シーンパネルでシーンの順番を変えたり複製することができます。

manage scene modal

Scene Transition

ジャンプレスポンスを使用するとシーン間の移動ができます。iosのデフォルト機能であるトランジション効果がを使用することが可能であり,アニメーションすることなくすぐにシーンの移動させることもできます。

レコーディング

プレビューからすぐプロトタイプが録画できます.
録画は最大5分まで可能であり,録画が完了したらmp4(h264)ファイルとして保存されます.

scene list

Animation Curve

現実の物体は一定な速度で動く場合がはほとんどありません。したがって、人間は一定の速度よりは加速、減速、加減速が入っている動きをより自然だと感じます。これらの動きはイージングファンクション(easing-function)と3次ベジェ(Cubic-Bezier) 、スプリング(spring)を適切に活用することで自然で美麗なアニメーションが作れることができます。

Easing Function

最初から用意された加速度に関するプリセットです。プロパティパネルのイーズイン(ease-in),イーズアウト(ease-out)、イーズインアウト(ease-in-out)の中から選べます。

EaseIn

  • easeInSine

  • easeInCubic

  • easeInQuint

  • easeInCirc

  • easeInElastic

  • easeInQuad

  • easeInQuart

  • easeInExpo

  • easeInBack

  • easeInBounce

easeOut

  • easeOutSine

  • easeOutCubic

  • easeOutQuint

  • easeOutCirc

  • easeOutElastic

  • easeOutQuad

  • easeOutQuart

  • easeOutExpo

  • easeOutBack

  • easeOutBounce

EaseInOut

  • easeInOutSine

  • easeInOutCubic

  • easeInOutQuint

  • easeInOutCirc

  • easeInOutElastic

  • easeInOutQuad

  • easeInOutQuart

  • easeInOutExpo

  • easeInOutBack

  • easeInOutBounce

Cubic-Bezier

四つの数字を組み合わせてカスタマイズしたイージングカーブ(easing curve)使えます。このサイトでカスタマイズした3次ベジェ値を簡単に作ることができます。

*今後アプリ内で直接3次ベジェのグラフを操作しながら設定できる機能を提供する予定です。

Example

  • Cubic-bezier
    ( 0.39, 0, 0.23, 1)

  • Cubic-bezier
    ( 0.71, 0.41, 0.32, 0.76)

Spring

スプリングカーブはレイヤーがバネの様に弾けるアニメーションを作ります。

*今後アプリ内で直接スプリングカーブのグラフを操作しながら設定できる機能を提供する予定です。

Example

  • 600, 16

  • 250, 19

Shortcut

Overall

macOS Windows
Hide ProtoPie Command + H -
Hide Others Command + Option + H -
Toggle Full Screen Command + Control + F -
Minimize Window Command + M Ctrl + M
Toggle Layer Panel Command + Option + 1 Ctrl + Alt + 1
Toggle Interaction Panel Command + Option + 2 Ctrl + Alt + 2
Toggle Layer and Interacton Command + Option + 3 Ctrl + Alt + 3

Manage a prototype

macOS Windows
New Command + N Ctrl + N
Open Command + O Ctrl + O
Close Command + W Ctrl + W
Save Command + S Ctrl + S
Save as Command + Shift + S Ctrl + Shift + S
Upload to Cloud Command + U Ctrl + U
Rename Command + R Ctrl + R
Edit Text Layer Command + Return Ctrl + Enter

Insert interaction elements

macOS Windows
Image Layer I I
Rectangle Layer R R
Oval Layer V V
Container Layer N N
Tap Trigger T T
Drag Trigger D D
Chain Trigger C C
Move Response M M
Scale Response S S
Opacity Response O O

Edit a prototype

macOS Windows
Undo Command + Z Ctrl + Z
Redo Command + Shift + Z Ctrl + Shift + Z
Copy Command + C Ctrl + C
Paste Command + V Ctrl + V
Duplicate Command + D Ctrl + D
Delete Delete Delete
Group Layers with Container Command + G Ctrl + G
Ungroup Layers from Container Command + Shift + G Ctrl + Shift + G
Collapse Command + [ Ctrl + [
Expand Command + ] Ctrl + ]
Unfold Sublayers Together Option + Click Alt + Click
Disabling smart guide Cmd + Layer drag Ctrl + Layer drag
Resizing layers with center pivot Option + Layer resize Alt + Layer resize
Dragging layers perpendicularly Shift + Layer drag Shift + Layer drag

Run a prototype

macOS Windows
Run Prototype Command + R Ctrl + R
Toggle Preview Command + P Ctrl + P
Bring Preview to front Ctrl + Tab Ctrl + Tab

Control a view

macOS Windows
Zoom In Command + =,
Z + click
Ctrl + =,
Z + click
Zoom Out Command + -,
Z + Option + click
Ctrl + -,
Z + Alt + click
100%表示 Command + 0 Ctrl + 0
Center Canvas Command + 1 Ctrl + 1
Panning Spacebar + click move Spacebar + click move
Language selector
TOP