MenuToggle Menu

Layers

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

Layer Property

位置

キャンバス上でレイヤーの座標を設定します。

サイズ

レイヤーの大きさを設定します。

回転

レイヤーの角度を設定します。

基準点

レイヤーの位置、大きさ、角度を変更する際の基準点(原点)を設定します。

角丸の半径

四角レイヤーの角の曲率を設定します。

不透明度

レイヤーの透明度を設定します。レイヤーの透明度を0に設定するとトリガーに反応しません。

カラー

レイヤーの色と色の透明度を設定します。色の透明度を0に設定してもトリガーに反応します。

Border

レイヤの枠線を適用します。

Shadow

レイヤの影を適用します。

ヒートエリア

レイヤーのタッチ領域が任意に調整できます。

隠れたレイヤーのタッチを許可する

レイヤーがトリガーに反応しないように設定します。

マスクとして使う

ベクトルレイヤーだけが持つプロパティであり、他のレイヤーをレイヤーマスクするように設定します。

SVG Layer

SVG（Scalable Vector Graphics）ファイルをインポートし、画像の品質を損なうことなくスケーリングすることができます。 SVGファイルのcolor、border、shadowなどのプロパティを変更したい場合、「shape layer」に変換することができます。

  • 現在、グラデーションや複数カラーのSVGファイルはサーポート対象外です。

  • インポートされたSVGファイルの一部のプロパティがまだサーポート対象ではない場合、「Convert to shape」ボタンが機能しないことがあります。(現在、ProtoPieのサーポート対象はpath、ellipse、polyline、polygon、rect、circleおよびlineです。)

Paste SVG codes

Sketch、Figma、Adobe XD、ZeplinからSVG codeをコピーして直接ProtoPieに貼り付けることができます。以下に例を示します。

SVG code example

<svg width="175px" height="166px" viewBox="0 0 175 166" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
    <polygon id="Star" fill="#2212D4" points="87.5 137.25 33.7176494 165.525055 43.9891644 105.637527 0.478328759 63.224945 60.6088247 54.4874725 87.5 0 114.391175 54.4874725 174.521671 63.224945 131.010836 105.637527 141.282351 165.525055"></polygon>
  </g>
</svg>

Video Layer

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

自動で再生

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

繰り返す

動画を繰り返し再生します。

Lottie Layer

Lottieレイヤーは、Adobe After EffectsアニメーションをプロトタイプでレンダリングしたJSONファイルです。詳細についてはLottieをご覧ください。

自動で再生

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

繰り返す

Lottieを繰り返し再生します。

Audio Layer

Audio(オーディオ)レイヤを支援します。wav, mp3, m4aフォーマットが使用できます。

自動で再生

プロトタイプが実行されたら、自動的にオーディオを再生します。

繰り返す

オーディオを繰り返し再生します。

Camera Layer

スマートデバイスのカメラから出力されたものをレイヤーとして使用できます。これはProtoPieプレイヤーでプロトタイプを実行したときに機能します。プレビューウィンドウまたはブラウザでプロトタイプを実行すると、プレイスホルダーが代わりに表示されます。

自動スタート

シーンがスタートする時にカメラが自動的に起動される。

フロントカメラ [前面]

前面のカメラを使用する。

フロントカメラ [背面]

背面のカメラを使用する。

Text Layer

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

フォント

パソコンに設置されているフォントはすべて選択できます。システム基本フォントを使えば、プロトタイプで装置を基本のフォントに選択すれば、プロトタイプで装置を基本フォントで使用できる。

ウエイト

フォントの太さを調整できます。

サイズ

テキストのサイズを調整できます。

整列

フォントの左右,上下の整列を調整できます。

テキストリサイズ

テキストレイヤは幅や高さによって自動でサイズ調整、または固定しておくこともできます。

字間

テキストの字間を調整できます。

行間

テキストの行間を調整できます。

Missing Font

ProtoPie Studio で使用されているフォントが、実行中のデバイスに表示されない場合は、「missing font」という警告が表示されます。 見つからないフォントを置き換える代替フォントを選択できます。

Input Layer

インプットレイヤはスマート機器のキーボードや普通のキーボードを通じてSingle-lineまたはMulti-lineテキストを入力するのに使用される

１．テキスト

インプットレイヤに予めタイピングされているテキストが必要な時に使用します。

２．プレースホルダ

インプットレイヤにプレースホルダを設定することができます。プレースホルダの色はタイピングされるテキストの色と異なるように設定できます。

３．キーボードタイプ

モバイルキーボードのタイプが選べます。

  • テキスト

  • URL

  • 電子メール

  • 数字

  • テキストパスワード

  • 数字パスワード

4. リターン

下記のものの中で一つを使い、スマート機器の基本キーボードにあるリターンキーを修正できます。

  • 移動

  • 次

  • 送る

  • 検索

  • 完了

  • New Line (複数の行のみ)

５．キーボードテーマ

iOSに限りキーボードのテーマをダーク/ライトの中で選べます。

６．フォーカスアウとオプション

キーボードを解除できる二つのオプションがあります。

  • Retrunキーを押す

  • Input Layerの以外の部分を押す。

iOS Background Blur Layer

iOS 13以上及びウェブで機能する13種類のiOS背景ぼかしエフェクトを使用できます。 （iOS 12以下では、3種類のデフォルト背景ぼかしエフェクトを使用できます。）

デフォルトエフェクト

  • Extra Light

  • Light

  • Dark

マテリアルエフェクト（明るいテーマ及び暗いテーマ）

  • Ultra Thin Material

  • Thin Material

  • Material

  • Thick Material

  • Chrome Material

Constraints

レイヤーにコンストレイント（制約）を追加することができます。親レイヤーがリサイズされた際、追加するコンストレイントによって、レイヤーそのもののサイズと位置が自動で調整されます。コンストレイントは、親レイヤーがレスポンスによってリサイズされたときにも適用できます。

  • 左部分は位置制約を測り、上下左右の4方向で固定スペースを使うことができます。これにより、親レイヤーのいずれの四方に対してもレイヤーのある位置を維持することができるのです。

  •  右側はサイズ制約を測り、固定幅と固定高さを使うことができます。これにより、親レイヤーの幅と高さに対して、レイヤーのサイズを維持することができるのです。

Pin to top right corner

固定幅、固定高さ、固定上部領域と固定右領域を使うことにより、親レイヤーの右側と上部に対してブルーレイヤーはその位置を維持します。親レイヤーがリサイズされても、ブルーレイヤーはそのサイズを維持します。

Center position

固定幅と固定高さのみを使うことによって、親レイヤーがリサイズされた時に、親レイヤーの四方に対してブルーレイヤーは中心点を維持します。

Fixed spacing

左右の固定領域を使うことで、親レイヤーの幅がリサイズされた時に、左右のスペースを維持しながらブルーレイヤーはリサイズされます。

Back To Top