Adobe XD からのインポート

Adobe XD からデザインをProtoPieにインポートするには2つの方法があります。

  • プラグイン(推奨): Adobe XD用ProtoPieプラグインをインストールして、Adobe XDでプラグインを開く
  • 旧方式(Legacy): インポートしたいAdobe XDファイルを開き、ProtoPie Studioを立ち上げる。ProtoPieで'ファイルメニュー'をクリックし、そこから'インポート'を選択する。(ProtoPie5.2またはそれ以前のバージョンでのみ利用可能)

Adobe XD用ProtoPieプラグイン

Adobe XDのProtoPieプラグインのダウンロードとインストールはこちらから。インストールにはProtoPie5.3またはそれ以上のバージョンが必要です。

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

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

ProtoPieへデザインをインポートする間は、Adobe XDを継続的に立ち上げておく事をお勧めします。

Adobe XDからProtoPieへのインポートは初めてですか?お試しファイルを使って試してみませんか?

インポートは下記の機能に対応しています

  • Visibility
  • Lock
  • Position
  • Size
  • Rotation
  • Opacity
  • Constraints
  • Fill (solid color & image)
  • Borders
  • Shadow

ProtoPieのレイヤーの詳細についてはこちらをご覧ください

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

Adobe XDプラグインでは下記の事項が可能です。

  • 1つまたは複数のアートボードとオブジェクトをインポートします
  • アートボードをシーンとしてインポートします
  • 選択したものをインポートします
  • ベクターレイヤーをSVGとしてインポートします
  • テキストレイヤーをテキストレイヤーに変換できるSVGとしてインポートします
  • 制約条件をそのままインポートします
[object Object]
シーンとしてインポート

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

オブジェクトのインポート
[object Object]

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

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

[object Object]
SVGとしてインポート

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

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

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

再インポート

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

  • ProtoPieでインポートされたオブジェクトの一部のプロパティを変更した場合、再インポートしても変更がオブジェクトには適用されません
  • インポート後にレイヤー階層を変更した場合、再インポートしても変更したレイヤー階層は適用されません。 (例)インポートしたレイヤーを新しく作成したスクロールコンテナーに追加する
  • 削除されたインポートレイヤーは、Adobe XDにてこの特定のレイヤーのみを選択してProtoPieにインポートしない限り、再インポートされません
  • シーンまたはオブジェクトの複製をしたい場合には、一度インポートしてから複製します。 (例)AdobeXDのアートボードを2つのシーンとしてProtoPieにインポートしたい場合。まずは一度インポートしてから、シーンを複製して2番目のシーンを作成します。

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

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

Artboard

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

Import Size

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

All layer structure

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

Only layers marked for batch export

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

Overwrite positions of layers

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

Overwrite sizes of layers

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

Update layer orders and grouping structure

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

Remove layers deleted in Adobe XD

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

panel import xd

FAQs

Back To Top