MenuToggle Menu

Figmaからのインポート

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

  • プラグイン（推奨）:Figma用ProtoPieプラグインをインストールして、Figmaでプラグインを開く
  • 旧方式（Legacy）: インポートしたいFigmaファイルを開き、ProtoPie Studioを立ち上げる。ProtoPieで'ファイルメニュー'をクリックし、そこから'インポート'を選択する。

Figma用ProtoPieプラグイン

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

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

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

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

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

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

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

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

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

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

  • 一つまたは複数のフレームとオブジェクトをインポート
  • 選択した項目をインポート
  • べクター・レイヤーをSVGとしてインポート
  • テキスト・レイヤーをテキスト・レイヤーとしてインポート
  • ContraintsをそのままContraintsとしてインポート
  • オートレイアウトのプロパティをインポート

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

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

安装并下载Figma插件。

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

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

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

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

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

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

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

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

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

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

インタラクションをインポートする

フレーム間のプロトタイプのインタラクションを、FigmaからProtoPieに簡単にインポートします。

ProtoPie は Figma でフレーム間に適用されたインタラクションを Jump レスポンスに変換してインポートします。これにより、インポート後にProtoPieでシーン間のトランジションを再作成する必要がなくなりました。

Figmaのフレームにスマートアニメート トランジションが含まれている場合、ProtoPieはこれらをスマートトランジション付きのジャンプレスポンスとしてインポートします。

詳細はこちらをご参照ください。

[object Object]
オートレイアウトのインポート

ProtoPie は Figma から基本的なオートレイアウトプロパティのインポートをサポートしています。元のデザインに一致するように高度な設定もインポートされます。ただし、ProtoPie Studio でこれらの設定を編集すると、リセットされてレイアウトに影響を与える可能性があります。

回転値が 0 以外のオブジェクトの場合、正確な位置を確保するためにインポート時に基点が (50, 50) に設定されます。

再インポート

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

  • ProtoPieにインポートしたオブジェクトのプロパティを一部変更した場合、再インポートしてもこのオブジェクトは影響を受けません。
  • ProtoPieで新しく作成したスクロール・コンテナーにはレイヤーの順番などが設定できますが、再インポートした場合は、編集されたレイヤーが適用されません
  • インポート後に削除されたレイヤーは、再インポートの際には自動的に適用されません。 レイヤーをインポートしたい場合にはFigmaでレイヤーを選択し、そのレイヤーを別にインポートする必要があります。
  • シーンまたはオブジェクトを複製したい場合は、一度インポートしてから複製してください。例えばFigmaのトップレベル・フレームをProtoPieで２つのシーンとして読み込みを行いたい場合は一度インポートしてからシーンを複製することで２つ目のシーンを作成します。

Legacy Figma Import

ProtoPieは、Figmaをインポートするためのさまざまなオプションを提供しています。

作業スタイルに応じて、Figma内のすべてのレイヤーを取り込むことも、「エクスポート可能（exportable）」に設定されたレイヤーのみを取り込むことも可能です。

また、再インポート時にProtoPie上で変更した位置やサイズを保持しつつ、その他の変更内容のみを反映させることもできます。

この機能を利用するには、Figmaの構造変更に伴い、ProtoPie 9.1.0 以上のバージョンが必要です。

Figmaでエクスポートの設定する方法については、こちら（need to put URL here)をご覧ください。

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

panel figma import

FAQs

Back To Top