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へのインポートは初めてですか？お試しファイルを使って試してみませんか？

ProtoPie 9.5.0以上のバージョンでFigma用ProtoPieプラグインをダウンロードしインストールします。

いくつかのヒントをご紹介します。

• 最高のパフォーマンスを得るために、デザインをProtoPieにインポートする際は、Figmaを開いたままデスクトップに表示させておいてください。
• インポートする際は、最上位のフレームをシーンとして使用し、Figmaと同じレイヤー階層、位置、制約を持つオブジェクトを使用してください。
• インポート体験の変更点：
  • アイテムが個別にインポートされるようになり、準備ができ次第ProtoPie Studioに表示されます。以前はすべてのアイテムが一度に処理され、すべてが完了するまで表示されませんでしたが、このアップデートによりインポートがより速く、よりシームレスになりました。

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

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

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

プラグインは下記の要素のインポートを対応します。

• Sections
• Main components

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

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

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

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

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

安装并下载Figma插件。

結合済みとしてエクスポート

Figmaでレイヤーを結合（flatten）してからProtoPieにエクスポートすると、より高い視覚的忠実度が得られます。

オプション1：エクスポート

「エクスポート」ボタンをクリックすると、エクスポートの種類（シーン、オブジェクト、または結合済み）によって動作が異なります。

• フレームを選択し「シーン」を選択した場合、その構造はProtoPieのシーンとしてインポートされます。
• サポートされていないプロパティはSVGレイヤーに変換されます。
  • 注: インポートしたデザインがFigmaと異なって見える場合は、「結合済みとしてエクスポート（Export as Flattened）」オプションを使用して再インポートしてみてください。

オプション2：結合済みとしてエクスポート（Export as Flattened）

「結合済みとしてエクスポート」タイプを使用すると、デザインが簡素化された結合済みの画像としてProtoPieに取り込まれます。これは、レイヤーレベルの詳細よりも視覚的な忠実度が重要な場合に特に役立ちます。

個々のレイヤーを結合したり、複数のレイヤーを1つに結合してからインポートすることができます。これにより、Studioでのインタラクション管理が容易になり、視覚的な一貫性を保つことができます。

結合された画像の最終的な解像度は、ProtoPieの密度設定に従います。

シーンとしてインポート

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

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

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

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

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

SVGとしてインポート

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

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

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

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

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

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

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

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

オートレイアウトのインポート

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

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

デザインの再インポート

Figmaからフレームやオブジェクトを再インポートする際、ほとんどのレイヤーは自動的に更新されます。ただし、ProtoPie内で変更された内容は保持され、上書きされることはありません。

再インポート時に更新されないもの：

• ProtoPieで変更したオブジェクト（例：サイズ、位置、スタイル）。
• レイヤーパネル内で移動したレイヤー（例：スクロールコンテナに追加したもの）。
• 削除されたレイヤー — Figmaから再度選択してインポートしない限り。

追加のヒント：

• シーンやオブジェクトの複製を作成するには、一度インポートしてからProtoPie内で複製してください。
• 再インポートは常に最新のエクスポートタイプ（シーン、オブジェクト、または結合済み）に従います。
• デザインが期待通りに表示されない場合は、「結合済み（Flattened）」オプションを使用して再インポートしてみてください。

ProtoPieがインポートされたレイヤーを追跡する方法：

• Figmaからインポートされた各オブジェクトには、固有の内部IDがあります。
• 同じファイル、同じインスタンスからのオブジェクトのみが再インポートおよび更新可能です。
• エクスポートタイプを切り替える（例：シーンから結合済みへ）と、以前のインポートは新しい形式に置き換えられます。

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

FAQs

• Figmaからデザインをインポートするのに時間がかかるのはなぜですか？

  ProtoPieへのデザインインポートでお困りですか？以下のトラブルシューティング手順をお試しください。

  • Figma、Sketch、Adobe XDの最新バージョンと、それぞれのProtoPieプラグインがインストールされていることを確認してください。
  • 高速で安定したインターネット接続と十分な帯域幅を使用していることを確認してください。

  さらにサポートが必要な場合は、お気軽にお問い合わせください。

• Figmaから特定のレイヤーが正しくインポートされなかったのはなぜですか？

  一部のレイヤーが正しくインポートされていないことに気づいた場合、それはサポートされていないプロパティが原因である可能性があります。Figma、Sketch、またはAdobe XDからデザインをインポートする際にサポートされているプロパティに関する詳細情報を提供しているインポートドキュメントをご確認ください。

  さらにサポートが必要な場合は、お気軽にお問い合わせください。いつでも喜んでお手伝いさせていただきます！

• デザインをエクスポートする際に「Not supported」というメッセージが表示されました。これはどういう意味ですか？

  このメッセージは、選択したレイヤーに、ProtoPieがエクスポート時に完全にサポートしていない要素やプロパティが含まれている場合に表示されます。これらのレイヤーはFigmaからインポートできますが、機能の互換性制限により、ProtoPieで期待通りにレンダリングされたり機能しない場合があります。

  

• どのような種類のレイヤーがサポートされていますか？

  フレーム、セクション、およびほとんどの基本的なレイヤーは問題なくエクスポートできます。ただし、スライスやFigJamコネクタのような一部の要素はエクスポートがサポートされていません。これらを使用している場合は、エクスポートする前にフレームまたは標準レイヤーに変換してみてください。

• 部分的にサポートされているプロパティはどうなりますか？

  Figmaの一部のデザインプロパティは、ProtoPieでは部分的にのみサポートされています。これらはエクスポートを妨げることはありませんが、インポート後に意図したとおりに機能しない可能性があります。一般的なケースをいくつかご紹介します。

  • 複数の塗りつぶし（Multiple fills）: これらは編集可能なSVGとしてエクスポートされます。より詳細な制御が必要な場合は、各塗りつぶしを独自のレイヤーに分離するか、一番上または一番下の塗りつぶしのみを保持することを検討してください。
  • 高度な線設定（Advanced stroke settings）: これらもSVGとしてエクスポートされます。一貫性を確保するには、エクスポートする前に線を長方形に変換できます。
  • レイヤーのぼかしまたは内側の影（Layer blur or inner shadow）: これらの効果はエクスポート時に無視されます。必要な場合は、レイヤーをPNGに結合（flatten）してください。ただし、このバージョンはProtoPieで編集できないことに注意してください。