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

Convertifyで、Figmaのフレームをレイヤー、グループ、不透明度、描画モードを保ったままProcreateの.procreateキャンバスにエクスポートします。

FigmaのデザインをProcreate用にエクスポートするには、Export from Figmaタブをクリックし、ワークフローセレクターからExport Figma to Procreate (Beta) を選びます。

Procreateへのエクスポートはベータ版です。 キャンバスに描き始める前にProcreateで確認し、想定どおりに変換されないフレームがあればお知らせください。

キャンバスサイズを選ぶ ​

Procreateのキャンバスはピクセル単位で指定します。エクスポートする前にCanvas sizeを選んでください。

  • 1xでは、キャンバスのピクセル数がFigmaのフレームと同じになります。
  • 2x（デフォルト）、3x、4xでは、キャンバスが2倍、3倍、4倍の大きさになり、Procreateで拡大して描くときにより鮮明な仕上がりになります。

キャンバスの長辺は、ほとんどのiPadでProcreateが開ける上限である8192 pxまでに制限されます。それより大きいフレームは収まるように縮小され、その場合はConvertifyがお知らせします。

フレームをProcreateのアニメーションとしてエクスポートする ​

Export frames as one animationをオンにすると、選択したフレーム（またはページ上のすべてのフレーム）が、最初のフレームと同じサイズの1つのAnimation Assistキャンバスとしてエクスポートされます。各フレームがアニメーションのフレームになります。

  • 順序とタイミングは、ページのフローの開始点から、各フレームのAfter delayプロトタイプリンクに従います。最も短い遅延時間がフレームレートになり、それより長い遅延時間ではそのフレームが表示され続けます。リンクがない場合は、フレームが左から右、上から下の順に、毎秒15フレームで再生されます。
  • 最後のフレームが最初のフレームにリンクしている場合は、ループ再生がオンになります。そうでない場合、アニメーションは1回だけ再生されます。
  • 最初のフレームの単色の塗りがキャンバスの背景になります。それ以降のフレームで塗りが異なる場合は、その塗りがBackgroundレイヤーとして残ります。

現在のFigmaページをProcreateにエクスポートする ​

ページ上のすべてのフレームを変換するには、Export This Pageをクリックします。各フレームがそれぞれ1つのProcreateキャンバスになります。

選択したFigmaフレームをProcreateにエクスポートする ​

特定のフレームだけをエクスポートしたい場合は、そのフレームを選択してからExport Selected Framesをクリックします。

レイヤーの変換のされ方 ​

  • フレーム内の各最上位レイヤーは、名前、表示・非表示、ロック、不透明度、描画モードを保ったまま、Procreateのレイヤーになります。
  • グループ（および塗り、線、クリッピングのないフレーム）は、名前、表示・非表示、ロック、不透明度を保ったまま、Procreateのグループになります。Procreateのグループにはほかのグループを入れられないため、それより深くネストされたものは、その最上位レイヤーに統合されます。
  • フレームの単色の塗りは、キャンバスの背景色になります。フレームのグラデーション、画像、複数の塗り、線、効果は、代わりにBackgroundレイヤーになります。
  • マスクは、クリップしている各レイヤーのProcreateのレイヤーマスクになるため、Procreateで引き続き編集できます。輝度マスクは明るい部分と暗い部分を保ち、複数のマスクの下にあるレイヤーでは、それらのマスクが1つにまとめられます。
  • Procreateからインポートしたキャンバスでは、Figmaにないクリッピングマスク、Alpha Lock、描画モードが保持されます。
  • Procreateはピクセルで描画するため、テキスト、ベクター、効果は各レイヤーにレンダリングされ、編集できなくなります。
  • フレームの外側にあるコンテンツは、キャンバスに合わせてトリミングされます。
  • キャンバスにはFigmaファイルのカラープロファイルが使われます。Display P3のファイルではDisplay P3、それ以外ではsRGBになります。

Figmaから.procreateファイルをダウンロードする ​

Convertifyの処理が終わったら、.procreateファイルをダウンロードします。複数のフレームをエクスポートした場合は、キャンバスがまとめて.zipファイルでダウンロードされます。

Figmaからダウンロードしたファイルの保存 Figmaのデスクトップアプリを使っている場合は、ファイルをダウンロードするためのダイアログが表示されます。一方、WebブラウザでFigmaを使っている場合は、デフォルトでファイルが自動的にパソコンにダウンロードされます（通常はパソコンのDownloadsフォルダに保存されます）。

.procreateファイルをProcreateで開く ​

  1. AirDrop、ファイルアプリ、または任意のクラウドストレージを使って、.procreateファイルをiPadに移します。.zipをダウンロードした場合は、先に解凍してください（ファイルアプリでタップします）。
  2. .procreateファイルをタップしてProcreateで開くか、ProcreateのギャラリーでImportをタップしてファイルを選びます。
  3. キャンバスがギャラリーに表示され、レイヤーをすぐに編集できます。