動画チュートリアル:FigmaをワンクリックでCanvaにエクスポートする
この動画では、Convertifyプラグインを使って、PSDファイル経由でFigmaをワンクリックでCanvaに自動エクスポートする方法を説明しています。
FigmaのデザインをCanva用にエクスポートするには、Export from Figmaタブをクリックし、ワークフローセレクターからExport Figma to Canvaを選びます。
CanvaはAdobe Photoshopファイルのインポートに対応しているため、このエクスポートではConvertifyが.psdファイルを作成します。ファイルをダウンロードしたら、CanvaのAdobe IllustratorまたはPhotoshopのインポート機能を使って.psdをCanvaにインポートします。
Convertifyはまず、エクスポートするフレームを1つのPSDのグリッドにまとめます。並び順は、Figmaキャンバス上の位置に基づいて、見た目上の左上から右下の順になります。まとめたPSDがそれでも大きすぎる場合、ConvertifyはCanva用のエクスポートを自動的に分割し、小さな.psdファイルを含む.zipを作成します。Canvaのインポート上限は300 MBなので、大きなFigmaページでもCanvaにインポートしやすくなります。
現在のFigmaページをCanvaにエクスポートする
ページ全体を変換するには、Export This Pageをクリックすると、現在のページの.psdファイルへの変換が始まります。
選択したFigmaフレームをCanvaにエクスポートする
特定の部分だけをエクスポートしたい場合は、エクスポートしたいFigmaフレームを選択してからExport Selected Framesをクリックします。
大きなCanva用エクスポートの分割
Convertifyはまず、1つにまとめたPSDファイルの作成を試みます。エクスポートがCanvaのインポート上限である300 MBに近い場合、PSDドキュメントの上限を超える場合、または安全に作成するには大きすぎる場合、Convertifyは1つにまとめた.psdファイルの代わりに、小さな.psdファイルを含む.zipパッケージを自動的に作成します。
最初からPSDファイルを分けたい場合は、エクスポートする前にSplit each frame into a separate PSD fileをオンにすることもできます。.zipをダウンロードしたらパソコン上で解凍し、.psdファイルを1つずつCanvaにインポートします。1つのフレームだけでもCanvaのインポート上限である300 MBを超える場合は、そのデザインを小さなFigmaフレームに分割して、もう一度エクスポートしてください。
Figmaから.psdファイルをダウンロードする
Convertifyの処理が終わったら、ファイルブラウザから.psdファイルをダウンロードします。Convertifyが.zipファイルをエクスポートした場合は、ダウンロードして解凍してから、PSDファイルをCanvaにインポートしてください。
Figmaからダウンロードしたファイルの保存 Figmaのデスクトップアプリを使っている場合は、ファイルをダウンロードするためのダイアログが表示されます。一方、WebブラウザでFigmaを使っている場合は、デフォルトでファイルが自動的にパソコンにダウンロードされます(通常はパソコンのDownloadsフォルダに保存されます)。
.psdファイルをCanvaにインポートする
ダウンロードしたら、.psdファイルをCanvaにアップロードまたはインポートします。Canvaは対応していないPhotoshopのレイヤー機能、効果、フォントを異なる形で変換することがあるため、実際のプロジェクトで使う前に、インポートしたデザインを確認してください。