Intro

プロトパイは別途のプラグインがなくてもスケッチ(Sketch)とAdobe XD CCインポートを支援します.デザインが終わったプロジェクトを数回のクリックだけて持ち込むことができます.

Get Started

インポートするスケッチ(Sketch)またはAdobe XD CCファイルを開いてプロトパイスタジオを実行します.スタジオのファイル(File)メニューから必要なインポートメニューが選択できます.

sketch import

Sketch Import

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

Artboard
Sketchファイルの中でインポートするアートボードを選択します。
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 CC Import

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

Artboard
Adobe 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からも削除します。

Figma Import (Beta)

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

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からも削除します。

FAQ

  • フィグマからデザインを読み込むのに時間がかかりすぎます。

    フィグマはオンラインベースのツールなのでSketchやAdobeXDからインポートするより時間が長くかかる場合がございます。フィグマのサーバーと通信するのでユーザーのネット回線速度やフィグマサーバーとの距離がどのぐらい離れているかもインポートに影響する場合がございます。

    インポートに十分な速度が出るためには十分な帯域幅を持つネット回線を使う必要があります。またフィグマとこの問題を解決するために引き続き協力しています。

  • フィグマから一部のレイヤが正常にインポートされません。

    Frameにテキストレイヤ、マスクレイヤまたは回転したレイヤが含まれている場合、フィグマから提供するAPIの限界のため正常にインポートされない場合がございます。

    次の方法により問題が解決できます。
    1. フィグマから前回非正常にインポートされたすべてのレイヤを覆うくらいのFrameを作ります。
    2. もしこのレイヤが影やぼかしなどの効果が適用されていたら当該効果の面積までカバーできる大きさのFrameを作ります。
    3. Frameの中にレイヤを入れます。
    4. Frameをexportableに設定します。
    5. プロトパイのインポート設定により”only layers marked for export”オプションをオンにして再インポートします。
    6. 先ほど再インポートしたframe(フレーム)はProtoPieで一つのレイヤにインポートされます。

    上記の方法で解決されない場合にはFigma APIの技術的な限界かもしれません。Figmaに問い合わせすることをお勧めします。

Other Options

Recently used

最後にインポートしたツールと設定を維持したままインポートパネルを開きます.

Re-import from Recently used

最後にインポートしたツールと設定で直ちにインポートを実行します.

Language selector
TOP