INSIGHTS & INSPIRATION
PRODUCT LEARNING & SUPPORT
INSIGHTS & INSPIRATION
PRODUCT LEARNING & SUPPORT
Introducing ProtoPie
Triggers & Responses
Auto Layout
Interaction Libraries
Connecting Devices
ProtoPie Enterprise
Menu
Introducing ProtoPie
Triggers & Responses
Auto Layout
Interaction Libraries
Connecting Devices
ProtoPie Enterprise
Sketchからのインポート
SketchからProtoPieにデザインをインポートする方法は2つあります。
プラグイン (推奨): Sketch用ProtoPieプラグインをインストールし、Sketchでプラグインを開きます。
レガシー: インポートに使用するSketchファイルを開き、ProtoPie Studioを開きます。ProtoPieのファイルメニューからインポートを選択します。
Sketch用ProtoPieプラグイン
ProtoPie 7.0以上が必要なSketch用ProtoPieプラグインをダウンロードしてインストールします。Sketch用プラグインのインストール方法について、詳細はこちらをご覧ください。
Sketch用ProtoPieプラグインを使用すると、圧倒的なスピードと柔軟性を手に入れることができます。SketchからProtoPieへのデザインのインポートはすべてローカルで行われるため、遅延はありません。
インポートするものをコントロール。アートボードをシーンとしてインポートし、Sketchと同じレイヤ階層、位置、制約を持つオブジェクトをインポートできます。
ベストなパフォーマンスを得るには、デザインをProtoPieにインポートする間、Sketchを開いてデスクトップ上に表示したままにしてください。
初めてお使いですか？このサンプルファイルを使って、Sketch用ProtoPieプラグインをお試しください。
サポートされているプロパティ
表示・非表示
ロック
位置
サイズ
回転
不透明度
制約（レスポンシブ制約）
塗り（単色＆画像）
境界線
シャドウ
ProtoPieのレイヤープロパティについて、詳細はこちらをご覧ください。
プラグインとレガシーインポートの違い
Sketch用ProtoPieプラグインでは、以下の調整が可能です。
単一または複数のアートボードやオブジェクトをインポートする。
アートボードをシーンとしてインポートする。
選択したものをインポートする。
ベクターレイヤーをSVGとしてインポートする。
テキストレイヤーに変換可能なSVGとしてテキストレイヤーをインポートする。
制約を制約としてインポートする。
シーンとしてインポートする
Sketchのアートボードをそのままの名前でProtoPieのシーンとしてインポートします。一度に1つ、または複数のアートボードをシーンとしてインポートできます。アートボードのシーンとしてのインポートは、Sketchのレイヤー階層に基づきます。
オブジェクトのインポート
Sketchと同じレイヤー階層、位置、制約を維持したまま、オブジェクトをインポートします。一度に1つ、または複数のオブジェクトをインポートすることが可能です。
Sketchのコンポーネントおよびコンポーネントインスタンスは、コンテナとしてインポートされます。ProtoPie内でもコンポーネントとして維持したい場合は、インポート後にコンポーネントに変換してください。コンポーネントについての詳細は こちら をご覧ください。
SVGとしてインポートする
Sketchのベクターレイヤーを、ProtoPieのSVG（Scalable Vector Graphics）としてインポートします。プロパティを編集可能にするには、インポート後にシェイプに変換してください。なお、ProtoPieはまだすべてのSVGプロパティをサポートしていません。SVGレイヤーについての詳細は こちら をご覧ください。
テキストレイヤーのインポート
Sketchのテキストレイヤーを、ProtoPieのSVGとしてインポートします。プロパティを編集可能にするには、インポート後にテキストレイヤーに変換してください。テキストレイヤーについての詳細は こちら をご覧ください。
再インポート
一般的に、Sketchからアートボードやオブジェクトを再インポートすると、以前インポートされたものが上書きされます。ただし、考慮すべき例外があります。
ProtoPieでインポートされたオブジェクトの一部のプロパティを変更した場合、再インポートしてもその特定のオブジェクトには影響しません。
インポート後にレイヤー階層を変更した場合、再インポートしても調整されたレイヤー階層には影響しません。たとえば、インポートされたレイヤーを新しく作成したスクロールコンテナに追加した場合などです。
インポート後に削除されたレイヤーは再インポートされません。ただし、Sketchでその特定のレイヤーのみを選択してProtoPieにインポートした場合は除きます。
シーンやオブジェクトの複製を作成したい場合は、1度だけインポートして複製してください。たとえば、SketchのアートボードをProtoPieの2つのシーンとして使用したいとします。その場合は、一度インポートしてからそのシーンを複製して2つ目のシーンを作成してください。
シーンとしてインポートする
Sketchのアートボードをそのままの名前でProtoPieのシーンとしてインポートします。一度に1つ、または複数のアートボードをシーンとしてインポートできます。アートボードのシーンとしてのインポートは、Sketchのレイヤー階層に基づきます。
オブジェクトのインポート
Sketchと同じレイヤー階層、位置、制約を維持したまま、オブジェクトをインポートします。一度に1つ、または複数のオブジェクトをインポートすることが可能です。
Sketchのコンポーネントおよびコンポーネントインスタンスは、コンテナとしてインポートされます。ProtoPie内でもコンポーネントとして維持したい場合は、インポート後にコンポーネントに変換してください。コンポーネントについての詳細は こちら をご覧ください。
SVGとしてインポートする
Sketchのベクターレイヤーを、ProtoPieのSVG（Scalable Vector Graphics）としてインポートします。プロパティを編集可能にするには、インポート後にシェイプに変換してください。なお、ProtoPieはまだすべてのSVGプロパティをサポートしていません。SVGレイヤーについての詳細は こちら をご覧ください。
テキストレイヤーのインポート
Sketchのテキストレイヤーを、ProtoPieのSVGとしてインポートします。プロパティを編集可能にするには、インポート後にテキストレイヤーに変換してください。テキストレイヤーについての詳細は こちら をご覧ください。
再インポート
一般的に、Sketchからアートボードやオブジェクトを再インポートすると、以前インポートされたものが上書きされます。ただし、考慮すべき例外があります。
ProtoPieでインポートされたオブジェクトの一部のプロパティを変更した場合、再インポートしてもその特定のオブジェクトには影響しません。
インポート後にレイヤー階層を変更した場合、再インポートしても調整されたレイヤー階層には影響しません。たとえば、インポートされたレイヤーを新しく作成したスクロールコンテナに追加した場合などです。
インポート後に削除されたレイヤーは再インポートされません。ただし、Sketchでその特定のレイヤーのみを選択してProtoPieにインポートした場合は除きます。
シーンやオブジェクトの複製を作成したい場合は、1度だけインポートして複製してください。たとえば、SketchのアートボードをProtoPieの2つのシーンとして使用したいとします。その場合は、一度インポートしてからそのシーンを複製して2つ目のシーンを作成してください。
レガシーSketchインポート
レガシーSketchインポートでは、Sketchファイルからすべてのレイヤー、または書き出し可能(Exportable)としてマークされたレイヤーのみをインポートできます。
アートボード
インポートするSketchのアートボードを選択します
インポートサイズ
レイヤーの倍率を設定します。これは選択されたSketchのアートボードのサイズに基づいて変更できます
すべてのレイヤー構造
アートボードのすべてのレイヤーがフォルダー構造でインポートされます
書き出し可能レイヤー
「書き出し可能（exportable）」に設定されているレイヤーのみがインポートされます
レイヤーの位置を上書き
Sketchからアートボードを再インポートするときに、レイヤーの位置の値を上書きします
レイヤーのサイズを上書き
Sketchからアートボードを再インポートするときに、レイヤーのサイズの値を上書きします
レイヤー順序とグループ化構造を更新
Sketchからアートボードを再インポートするときに、レイヤー順序とグループ化構造を更新します
Sketchで削除されたレイヤーを削除
Sketchからアートボードを再インポートするときに、Sketchで削除されたレイヤーを削除します
アートボード
インポートするSketchのアートボードを選択します
インポートサイズ
レイヤーの倍率を設定します。これは選択されたSketchのアートボードのサイズに基づいて変更できます
すべてのレイヤー構造
アートボードのすべてのレイヤーがフォルダー構造でインポートされます
書き出し可能レイヤー
「書き出し可能（exportable）」に設定されているレイヤーのみがインポートされます
レイヤーの位置を上書き
Sketchからアートボードを再インポートするときに、レイヤーの位置の値を上書きします
レイヤーのサイズを上書き
Sketchからアートボードを再インポートするときに、レイヤーのサイズの値を上書きします
レイヤー順序とグループ化構造を更新
Sketchからアートボードを再インポートするときに、レイヤー順序とグループ化構造を更新します
Sketchで削除されたレイヤーを削除
Sketchからアートボードを再インポートするときに、Sketchで削除されたレイヤーを削除します