MenuToggle Menu

Layers

プロトパイでは、他のデザインツールと同じようにレイヤーのプロパティを調整することができます。レイヤーをはメニューバーから簡単に追加が可能です。

Layer Property

位置

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

サイズ

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

回転

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

基準点

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

角丸の半径

ProtoPieでは、長方形レイヤーのコーナーごとに異なる曲率の設定が可能です。 各コーナーの半径を設定するときは、対応する角の丸いアイコンをクリックして、半径の値を入力します。

不透明度

レイヤーの透明度を設定します。レイヤーの透明度を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コードの例です。

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 Playerでプロトタイプを実行したときに機能します。プレビューウィンドウまたはブラウザでプロトタイプを実行すると、プレイスホルダーが代わりに表示されます。

自動スタート

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

フロントカメラ [前面]

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

フロントカメラ [背面]

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

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