インポート

ProtoPieは、数回のクリックだけでmacOSのSketch、WindowsとmacOSのAdobe XD及びFigmaからデザインを簡単にインポートすることが可能です。

インポートは現在、従来の旧方式(Legacy)とプラグインの両方での方法で可能ですが、長期的にはプラグインに移行する予定です。

FigmaSketchAdobe XDのインポートプラグインにて、他ツールの併用がより便利で効率的になったProtoPieをご体験いただけます。

はじめましょう

  • プラグイン:Figma、Adobe XD、またはSketch用のProtoPieプラグインをインストールし、インポートするファイルで使用したいプラグインを実行します。

  • 旧方式(Legacy):インポートしたいSketchまたはFigmaファイルを開いてProtoPie Studioを実行します。ProtoPieのメニューから「インポート…」を選択します

Figmaインポート(プラグイン)

FigmaのProtoPieプラグインのダウンロードとインストールはこちらから。

新しいFigma用ProtoPieプラグインを利用すると面倒な手間が全くなく、スピーディに作業することが可能になります。FigmaからProtoPieへ、デザインの読み込みはたったの数秒で。

インポートする項目が管理できます。トップレベル・フレームをFigmaと同じレイヤー、位置、制約のシーンやオブジェクトとして読み込めます。

旧方式(Legacy)とFigmaインポートとの違い

  • 一つまたは複数のフレームとオブジェクトをインポート

  • 選択した項目をインポート

  • べクター・レイヤーをSVGとしてインポート

  • テキスト・レイヤーをテキスト・レイヤーとしてインポート

  • ContraintsをそのままContraintsとしてインポート

Figma用ProtoPieプラグインはProtoPie5.2以降のバージョンにてご利用頂けます。

こちらのサンプルファイルを使用して、Figma用のProtoPieプラグインをお試しください。

シーンとしてインポート

Figmaのトップレベル・フレームを名前を変更せずにProtoPieのシーンとしてインポートでき、トップレベル・フレームはFigmaのレイヤー階層に合わせてシーンとしてインポートされます。

オブジェクトをインポート

Figmaと同じレイヤー、位置、制約でオブジェクトをインポートできます。一つまたは複数のオブジェクトを一度にに読み込むことが可能で、トップレベル・フレームでない項目はシーン内にレイヤーまたはコンテナーとして取り込まれます。

Figmaのコンポーネント及びコンポーネント・インスタンスはコンテナーとして読み込まれます。

これらをコンポーネントに変えることでProtoPieでコンポーネントとして使うことができます。詳細はこちらをご覧ください。

SVGとしてインポート

Figmaのベクター・レイヤーをProtoPieへSVG(Scalable Vector Graphics)形式でインポートします。シェイプに変換するとプロパティを修正することができます。現在ProtoPieは一部のSVGプロパティのみに対応しています。SVGレイヤーについてはこちらをご覧ください。

テキストレイヤーのインポート

Figmaのテキスト・レイヤーをProtoPieで編集できるようにビットマップとしてインポートします。ProtoPieでプロパティを編集するためには、インポート後にテキスト・レイヤーに変更してください。テキスト・レイヤーに関しての詳細はこちらをご確認ください。

再インポート

基本的にFigmaからフレームやオブジェクトを再インポートすると以前インポートした項目に書き換えられます。ただし、いくつかの例外があります。

  • ProtoPieにインポートしたオブジェクトのプロパティを一部変更した場合、再インポートしてもこのオブジェクトは影響を受けません。

  • ProtoPieで新しく作成したスクロール・コンテナーにはレイヤーの順番などが設定できますが、再インポートした場合は、編集されたレイヤーが適用されません

  • インポート後に削除されたレイヤーは、再インポートの際には自動的に適用されません。 レイヤーをインポートしたい場合にはFigmaでレイヤーを選択し、そのレイヤーを別にインポートする必要があります。

  • シーンまたはオブジェクトを複製したい場合は、一度インポートしてから複製してください。例えばFigmaのトップレベル・フレームをProtoPieで2つのシーンとして読み込みを行いたい場合は一度インポートしてからシーンを複製することで2つ目のシーンを作成します。

Sketchインポート(プラグイン)

SketchのProtoPieプラグインのダウンロードとインストールはこちらから。インストールの方法についてはこちらをご覧ください。

Sketch用ProtoPieプラグインで超高速で効率的なデザインを体験できます。SketchからProtoPieへのインポートはすべてローカルで行われ、待ち時間がありません。

アートボードをシーンとしてインポートし、オブジェクトはSketchと同じレイヤー階層、配置、および制約を持つオブジェクトとしてインポートが可能です。

従来のSketchインポートとの違いは?

  • 1つまたは複数のアートボードとオブジェクトをインポートします。

  • アートボードをシーンとしてインポートします。

  • 選択したものをインポートできます。

  • ベクターレイヤーをSVGとしてインポートします。

  • テキストレイヤーをテキストレイヤーに変換できるSVGとしてインポートします。

  • 制約を制約としてインポートします。

最高のパフォーマンスを得るためには、デザインをProtoPieにインポートする間、Sketchを開いたままデスクトップに表示しておいてください。

Sketch用ProtoPieプラグインはProtoPie5.4以降のバージョンにてご利用頂けます。

こちらのサンプルファイルを使用して、Sketch用のProtoPieプラグインをお試しください。

シーンとしてインポートする

同じ名前を維持したまま、SketchのアートボードをProtoPieのシーンとしてインポートします。 1つまたは複数のアートボードをシーンとして一度にインポートすることができます。 アートボードをシーンとしてインポートする際は、Sketchのレイヤー階層に基づいています。

オブジェクトとしてインポートする

Sketchと同じレイヤー階層、配置、および制約を維持したままオブジェクトのインポートを行います。 1つまたは複数のオブジェクトを一度にインポートできます。

Sketchのコンポーネントとコンポーネント・インスタンスは、コンテナとしてインポートされます。 それらをコンポーネントに変換して、ProtoPieのコンポーネントとして保持します。コンポーネントの詳細についてはこちらをご参照下さい。

SVGとしてインポートする

SketchのベクターレイヤーをProtoPieのSVGとしてインポートします。 プロパティを編集可能にするには、インポート後にシェイプに変換します。まだすべてのSVGプロパティがProtoPieではサポートされておりませんのでご注意ください。SVGレイヤーの詳細についてはこちらをご覧ください。

テキストレイヤーとしてインポートする

SketchのテキストレイヤーをSVGとしてProtoPieにインポートします。 プロパティを編集可能にするには、インポート後にテキストレイヤーに変換します。 テキストレイヤーの詳細はこちらをご参照下さい。

再インポート

通常、Sketchから再インポートされたアートボードとオブジェクトは、以前にインポートされたものに置き換わります。 ただし、いくつかの例外があります。

  • ProtoPieでインポートされたオブジェクトの一部のプロパティを変更した場合、変更した事項は再インポートした際にはオブジェクトには影響しません。

  • インポート後にレイヤー階層を変更した場合、再インポートの際には変更は反映されません。

  • Sketchで特定のレイヤーのみを選択して、ProtoPieにインポートしない限り、インポートした削除済みのレイヤーは再インポートされません。

  • シーンまたはオブジェクトの複製が必要な場合は、一度インポートしてから複製します。 たとえば、SketchのアートボードをProtoPieの2つのシーンとして作成するとします。 その場合には、まず一度インポートをしてから、シーンを複製して2番目のシーンを作成します。

Adobe XD インポート(プラグイン)

Adobe XDのProtoPieプラグインのダウンロードとインストールはこちらから。

Adobe XD用のProtoPieプラグインを使用するとより簡単に迅速にデザインをAdobeXDからProtoPieにインポートが可能となります。既存のLegacyインポートと異なり、Adobe XDで作業した内容のままProtoPieにインポートすることができます。

アートボードをシーンとしてインポートし、Adobe XDと同じレイヤー階層、配置、および条件を持つオブジェクトをインポートします。

従来のAdobeXDインポートとの違いは?

  • 1つまたは複数のアートボードとオブジェクトをインポートします

  • アートボードをシーンとしてインポートします

  • 選択したものをインポートします

  • ベクターレイヤーをSVGとしてインポートします

  • テキストレイヤーをテキストレイヤーに変換できるSVGとしてインポートします

  • 制約条件をそのままインポートします

デザインをProtoPieにインポートする間、AdobeXDを開いてデスクトップに表示したままにするとより効率よく便利にお使い頂けます。

AdobeXD用ProtoPieプラグインはProtoPie5.3以降のバージョンにてご利用頂けます。

こちらのサンプルファイルを使用して、Adobe XD用のProtoPieプラグインをお試しください。

シーンとしてインポート

同じ名前を維持したまま、AdobeXDのアートボードをProtoPieのシーンとしてインポートします。 1つまたは複数のアートボードをシーンとして一度にインポートすることができます。 アートボードをシーンとしてインポートする時のレイヤー階層はAdobeXDに基づいています。

オブジェクトのインポート

Adobe XDと同じレイヤー階層、配置、および条件にてオブジェクトをインポートします。 1つまたは複数のオブジェクトを一度にインポートすることができます。

AdobeXDのコンポーネントとコンポーネントインスタンスはコンテナとしてインポートされます。 ProtoPieではそれらをコンポーネントに変換して保存します。 [詳しくはこちらから]

SVGとしてインポート

AdobeXDのベクターレイヤーをSVG(Scalable Vector Graphics)としてProtoPieにインポートします。 プロパティを編集可能にするには、インポート後にShape(シェイプ)に変換して下さい。 ProtoPieではまだ全てのSVGプロパティがサポートされておりませんのでご注意ください。 [詳しくはこちらから]

テキストレイヤーをインポートする

AdobeXDのテキストレイヤーをSVGとしてProtoPieにインポートします。 プロパティを編集可能にするためには、インポート後にテキストレイヤーに変換します。 [詳しくはこちらから]

再インポート

通常、Adobe XDから再インポートされたアートボードとオブジェクトは、以前インポートされたものから上書きされます。 ただし、いくつか例外があります。

  • ProtoPieでインポートされたオブジェクトの一部のプロパティを変更した場合、再インポートしても変更がオブジェクトには適用されません

  • インポート後にレイヤー階層を変更した場合、再インポートしても変更したレイヤー階層は適用されません。 (例)インポートしたレイヤーを新しく作成したスクロールコンテナーに追加する

  • 削除されたインポートレイヤーは、Adobe XDにてこの特定のレイヤーのみを選択してProtoPieにインポートしない限り、再インポートされません

  • シーンまたはオブジェクトの複製をしたい場合には、一度インポートしてから複製します。 (例)AdobeXDのアートボードを2つのシーンとしてProtoPieにインポートしたい場合。まずは一度インポートしてから、シーンを複製して2番目のシーンを作成します。

Figma インポート(旧方式: Legacy)

ProtoPieはFigmaインポートをするために、様々なオプションを提供しています。Figma CC内の全てのレイヤーを読み込んだり、再読み込みする時にProtoPieで変更した位置やサイズを維持しながら変更事項だけを読み込むこともできます。

Frame

Figmaファイルの中でインポートするアートボードを選択します。

Import Size

Frameの倍率を設定します。Figmaで制作したアートボードのサイズによって変わります。

All layer structure

アートボード内の全てのFrameをフォルダ構造を維持したままインポートします。

Exportable layers

アートボード内のFrameで、exportable(エクスポート可能)に設定されているFrameだけをインポートします。

Overwrite positions of layers

再インポートする時にFigmaFrameの位置の値を上書きします。

Overwrite sizes of layers

再インポートする時にFigmaFrameのサイズの値を上書きします。

Update layer orders and grouping structure

再インポートする時にFigmaFrameの順番と構造を上書きします。

Remove layers deleted in Figma

再インポートする時にFigmaから削除されたFrameがあればProtoPieからも削除します。

Sketch インポート(旧方式: Legacy)

ProtoPieはSketchインポートをするために、様々なオプションを提供しています。Sketch内の全てのレイヤーを読み込みしたり、再読み込みする時にProtoPieで変更した位置やサイズを維持しながら変更事項だけを読み込むこともできます。

ArtboardSketch

ファイルの中でインポートするアートボードを選択します。

Import Size

レイヤーの倍率を設定します。Sketchで制作したアートボードのサイズによって変わります。

All layer structure

アートボード内の全てのレイヤーをフォルダ構造を維持したままインポートします。

Exportable layers

アートボード内のレイヤーで、exportable(エクスポート可能)に設定されているレイヤーだけをインポートします。

Overwrite positions of layers

再インポートする時にSketchレイヤーの位置の値を上書きします。

Overwrite sizes of layers

再インポートする時にSketchレイヤーのサイズの値を上書きします。

Update layer orders and grouping structure

再インポートする時にSketchレイヤーの順番と構造を上書きします。

Remove layers deleted in Sketch

再インポートする時にSketchから削除されたレイヤーがあればProtoPieからも削除します。

Adobe XD インポート(旧方式: Legacy)

ProtoPie5.2またはそれ以下のバージョンでご利用可能です。

ArtboardAdobe XD CC

ファイルの中でインポートするアートボードを選択します。

Import Size

レイヤーの倍率を設定します。Adobe XD CCで制作したアートボードのサイズによって変わります。

All layer structure

アートボード内の全てのレイヤーをフォルダ構造を維持したままインポートします。

Only layers marked for batch export

アートボード内のレイヤーで、exportable(エクスポート可能)に設定されているレイヤーだけをインポートします。

Overwrite positions of layers

再インポートする時にAdobe XD CCレイヤーの位置の値を上書きします。

Overwrite sizes of layers

再インポートする時にAdobe XD CCレイヤーのサイズの値を上書きします。

Update layer orders and grouping structure

再インポートする時にAdobe XD CCレイヤーの順番と構造を上書きします。

Remove layers deleted in Adobe XD CC

再インポートする時にAdobe XD CCから削除されたレイヤーがあればProtoPieからも削除します。

よくあるご質問

Back To Top