FigmaからPenpotへのエクスポート

Convertifyで、Figma Designのページや選択したレイヤーを編集可能なPenpotファイルとしてエクスポートします。

Convertifyは、Figma Designのレイヤーを.penpotファイルとしてエクスポートします。このファイルはPenpotのワークスペースにインポートできます。テキスト、対応しているシェイプ、画像、ローカルコンポーネントは編集可能なまま残ります。

Penpotへの変換はベータ版です。納品に使う前に、変換時の警告を確認し、インポートしたデザインを比較してください。2つのアプリは、すべてのプロパティに同じ方法で対応しているわけではありません。

デザインをエクスポートする ​

  1. FigmaでConvertifyを実行し、Export from Figmaを選びます。
  2. ワークフローセレクターからExport Figma to Penpot (Beta) を選びます。
  3. エクスポートするページにチェックを入れるか、Export all Figma pages to Penpotを有効にします。選択範囲をエクスポートする場合は、キャンバス上でレイヤーを選択します。
  4. Export PagesまたはExport Selected Layersをクリックします。
  5. 警告を確認し、.penpotファイルをダウンロードします。参照されているコンポーネントのマスターは、ほかのページにあるものも含めて自動的に含まれます。
  6. PenpotのファイルダッシュボードでOptionsを開き、Import Penpot filesを選んで、ダウンロードしたファイルを選択します。インポートが完了したら、インポートしたファイルを開きます。

結果を確認する ​

デスクトップ用と小さい画面用のレイアウト、テキストの折り返し、画像のトリミング、コンポーネントのコピーを比較してください。重要なレイアウトはサイズを変えてみて、ローカルコンポーネントは実際に編集してみてから、その動作を前提にしてください。エクスポートしたファイルはコピーなので、その後の編集はFigmaとPenpotの間で同期されません。

互換性と編集可能なコンテンツ ​

  • フォントとテキスト： 変換先のアプリで、同じフォントを使える状態にしてください。フォントの置き換えや、空白の扱い、行間、フォントのバージョンの違いによって、折り返しが変わることがあります。変換では文字をそのまま保持し、見た目を合わせるために改行を挿入することはありません。
  • 画像と効果： いずれかの辺がFigmaの上限である4096ピクセルを超える画像は、インポート時にローカルでリサイズされ、PNGに変換されます。レイヤーのジオメトリと正規化されたトリミングの設定は編集可能なまま残りますが、元のピクセル解像度、エンコード、画像のメタデータは失われます。トリミングした端とカラープロファイルを確認してください。画像の補間や一部のシャドウ・効果は、アプリによって描画が異なります。一部の画像のトリミングや対応していないペイントは、画像として焼き付ける必要があります。その場合は、警告に対象のレイヤーと失われる設定が表示されます。レイヤーが編集可能なまま残っても、元のペイントのプロパティがすべて保持されるわけではありません。Figmaでは、始点に戻る線付きのパスが閉じたパスになることがあります。閉じた箇所の端点の形状と角の形状を確認してください。
  • トークン： 数式や、数式に依存するエイリアスは、Figmaのライブな変数バインディングにはなりません。変換ではレイヤーの解決済みの値を保持し、対応していないバインディングを報告します。
  • コンポーネント： 対応しているコピーは、ローカルのコンポーネントマスターを使います。ジオメトリやレイアウトのオーバーライドによっては、別のローカルマスターが必要になります。そうしたコピーは編集可能で、そのローカルマスターにリンクされたままですが、元のマスターとの関係と今後の更新は失われます。こうしたケースは変換時の警告に表示されます。
  • レイヤーとレイアウト： FigmaのAuto間隔は、Penpotでは最小間隔なしでエクスポートされます。間隔を変更していなければ、無効になっている固定間隔の値はFigmaに戻せます。この無効な値にバインドされた変数は、ライブなレイアウトのバインディングを持たないまま、トークンライブラリに残ります。対応していない構造では、追加のグループ、ローカルマスター、または編集可能な近似表現が必要になることがあります。警告を確認し、サイズ変更を試してください。画像が一致しているだけでは、レイアウトの動作も一致しているとは言えません。非表示の固定幅テキストは、Figmaに戻すと引き伸ばしの配置が失われることがあります。表示したりサイズを変えたりするときは、レイアウトを確認してください。中央揃えの固定サイズのコンテナの中には、保存されたボックスより大きな左右対称のパディングを持つものがあります。対応している場合、変換ではボックスと中央揃えのライブなレイアウトを保持し、その軸のパディングを0にして、失われたパディングの設定とバインディングを報告します。

これらのワークフローはFigma Designを対象としています。FigJam、Figma Slides、プロトタイプの再生については、同等の動作は提供されません。元のファイルは保管しておき、重要なレイアウトは両方のアプリで確認してください。

保存したデザインをFigmaに戻すには、PenpotをFigmaにインポートするの手順に従ってください。