ProcreateをFigmaにインポート

Convertifyで、Procreateの.procreateキャンバスをレイヤー付き、または統合した画像としてFigmaにインポートします。

ProcreateのキャンバスをFigmaにインポートするには、Import into Figmaタブをクリックし、ワークフローセレクターからImport Procreate to Figma (Beta) を選びます。次に、.procreateファイルをConvertifyプラグイン内のドロップエリアにドラッグ＆ドロップします（ドロップエリアをクリックしてファイルを選ぶこともできます）。プレビューとサイズを確認してから、Import ProcreateをクリックするとFigmaに配置されます。

Procreateのインポートはベータ版です。 インポートしたレイヤーをもとに作業を進める前に確認し、想定どおりに変換されないキャンバスがあればお知らせください。

.procreateファイルをパソコンに移す ​

Procreateのキャンバスは、iPadに保存されています。Figmaを使っているパソコンにキャンバスを移すには、次のようにします。

  1. Procreateのギャラリーでアートワークを左にスワイプしてShareをタップするか、アートワークを開いてActions > Shareをタップします。
  2. 形式としてProcreateを選びます。
  3. AirDrop、ファイルアプリ、または任意のクラウドストレージを使って、.procreateファイルをパソコンに送ります。

インポート前にキャンバスを確認する ​

ファイルを選ぶと、ギャラリーのプレビュー、ファイル名、キャンバスのサイズ、インポート後のサイズが表示されます。Import Procreateをクリックする前に、Import asとImport sizeを変更できます。ファイルを選択しただけでは、Figmaにレイヤーは追加されません。選択を取り消すにはClear fileを使い、別のファイルに替えるには、そのファイルを選び直します。

ギャラリーのプレビューがない場合や破損している場合でも、Convertifyは読み取れるキャンバスのレイヤーをインポートでき、その旨のお知らせを表示します。アーカイブが破損している場合は、プレビューが唯一復元できるアートワークになることがあります。インポートする前に、警告がないか確認してください。

レイヤー付きか統合かを選ぶ ​

Import asで、アートワークの配置方法を選びます。

  • Layered canvasがデフォルトです。以下で説明するレイヤー、グループ、マスクを保持します。
  • Flattened imageは、表示されているアートワークを1枚の画像として配置し、グループ、マスク、不透明度、描画モードをピクセルに焼き付けます。個々のレイヤーは保持されないため、Procreateにエクスポートし直しても復元できません。

統合してインポートする場合は、Procreateが保存しているフル解像度の合成画像を、利用できれば使います。その合成画像を読み取れない場合、Convertifyは代わりに表示されているレイヤーを統合し、インポート時の警告を追加します。アニメーションの場合は、前景レイヤーと背景レイヤーを含めて、フレームごとに統合した画像を1枚ずつ作成し、プロトタイプの再生タイミングを保持します。

どちらのモードでも、以下のインポートサイズに対応しています。Figmaの上限である4096 pxを超える画像は、画像タイルに分割されます。

インポートサイズを選ぶ ​

Import sizeで解像度を選びます。

  • Original resolutionがデフォルトで、キャンバスを元のピクセルサイズのまま保ちます。
  • Up to 1024 px、Up to 2048 px、Up to 4096 pxでは、それより大きいキャンバスを、長辺がその上限に収まるように縮小します。それより小さいキャンバスは元のサイズのままです。

レイヤー付きモードでは、レイヤー、グループ、マスクがまとめて拡大縮小され、アニメーションのフレームにも同じリサイズ後のキャンバスサイズが使われます。キャンバスは縦横比を保ち、ピクセル単位で丸められます。

リサイズで小さくなるのはFigmaに配置される画像であり、Convertifyはまず元のファイルを読み取る必要があります。Procreateにエクスポートし直すために元のピクセルを残しておきたい場合は、Original resolutionを選んでください。インポート時に失われたディテールは、あとからエクスポートの倍率を上げても元に戻りません。

レイヤーの透明な余白を残すかトリミングするか ​

レイヤー付きのインポートでは、Trim transparent layer bordersがデフォルトでオンになっています。各レイヤーの画像の範囲は描かれたピクセルに合わせられ、キャンバス上の位置はそのまま保たれます。

オフにすると、描画のある各レイヤーに、透明な余白を含むキャンバス全体の範囲が与えられます。マスクの位置は揃ったままで、インポートサイズの上限はキャンバス全体に適用されます。その分、画像は大きくなります。空のレイヤーは引き続き除外され、この設定は統合したインポートには影響しません。

インポートされる内容 ​

Layered canvasを選んだ場合：

ConvertifyはFigmaファイルに新しいページを追加し、選んだインポートサイズのフレームを1つ作成します。Original resolutionの場合は、Procreateのキャンバスとピクセル単位で同じサイズになります。

  • レイヤーは、名前、表示・非表示、ロック、不透明度、描画モードを保ったまま、画像レイヤーとして取り込まれます。
  • グループは、名前、表示・非表示、ロック、不透明度を保ったまま、グループとして残ります。
  • レイヤーマスクは、そのレイヤーの輝度マスクになります。
  • クリッピングマスクは、下のレイヤーにクリップされたまま残ります。
  • 背景色は、フレームの塗りになります。Procreateで背景を非表示にしていた場合は、非表示になります。
  • キャンバスの回転と反転が適用されるため、キャンバスはProcreateのギャラリーと同じ見た目になります。
  • カラーは、キャンバスのカラープロファイル（Display P3またはsRGB）からFigmaファイルのカラープロファイルに変換されるため、Procreateと同じ見た目になります。プロファイルが保存されていない古いキャンバスでは、ギャラリーのプレビューのプロファイルが使われます。

Procreate 4以降で保存されたProcreateファイルは、古いiPadのファイルも含めてインポートできます。

Figmaで変わる点 ​

以下はLayered canvasでのインポートに当てはまります。統合したインポートでは、代わりに表示されている見た目が画像に焼き付けられます。

  • Procreateはピクセルで描画するため、Figmaではすべてのレイヤーが画像になります。テキストレイヤーはピクセルとして取り込まれ、テキストは編集できません。
  • FigmaにはProcreateのAlpha Lockに相当する機能がありません。この設定は記憶されるため、Procreateにエクスポートし直すと再びオンになります。
  • FigmaにはSubtract、Hard Mix、Vivid Light、Linear Light、Pin Light、Divideの描画モードがないため、これらを使っているレイヤーはNormalに設定されます。Lighter ColorとDarker ColorはLightenとDarkenになり、見た目が少し異なる場合があります。Match blend modes Figma doesn't haveをオンにすると、これらのレイヤーが焼き付けられ、Procreateとまったく同じ見た目になります。マスクと不透明度は保持されますが、その下のレイヤーを変更しても更新されません。
  • 空のレイヤーは除外されます。
  • Figmaでは画像の1辺が4096 pxまでに制限されるため、元の解像度でインポートする場合、それより大きいレイヤーは画像タイルのグループとして取り込まれます。

除外された内容や近似された内容は、インポートの完了後、プラグインのImport warningsに一覧表示されます。

Procreateにエクスポートし直す ​

レイヤー付きのインポートでは、ConvertifyがFigmaで表示できない情報を記憶しているため、インポートしたキャンバスをProcreateにエクスポートし直すと、クリッピングマスク、レイヤーマスク、Alpha Lock、元の描画モードが保持されます（Figmaでレイヤーの描画モードを変更した場合を除きます）。インポートしたアニメーションを再び1つのProcreateアニメーションとしてエクスポートするには、そのフレームを選択し、Export frames as one animationをオンにします。FigmaからProcreateへのエクスポートをご覧ください。

アニメーションのインポート ​

キャンバスでAnimation Assistがオンになっている場合は、各アニメーションフレームがそれぞれFigmaのフレームになり、再生順に横に並びます。

  • Animation Assistで背景レイヤーと前景レイヤーを設定している場合は、すべてのフレームに表示されます。
  • フレームは、保持フレームを含め、アニメーションのフレームレートで再生されるFigmaのプロトタイプとしてリンクされます。Presentを押すと再生できます。ループとワンショットのアニメーションはProcreateと同じように再生されます。ピンポンのアニメーションでは、戻りの再生用に中間フレームのコピー（(back) と表示）が追加されます。
  • 非表示のフレームは除外され、オニオンスキンはインポートされません。

破損したファイル ​

ファイルのレイヤーを読み取れない場合、Convertifyは代わりにProcreateのキャンバスのプレビュー画像を配置し、その理由をお知らせします。