FigmaのデザインをPNGとしてエクスポートする方法：完全なステップバイステップガイド

FigmaのデザインをPNGファイルとしてダウンロードすることは、作品を共有したり他のツールに流用したりする場合、必須と言えるでしょう。しかし、右クリックだけでは不十分な場合があり、手動でエクスポートする必要があります。この手順は簡単ですが、特にエクスポートメニューに慣れていない場合は、いくつか問題が発生するかもしれません。

ステップ1: フレームまたはオブジェクトを選択する

Figmaファイルを開き、エクスポートしたいフレームまたはオブジェクトをクリックします。ワークスペースでハイライト表示されていることを確認してください。これがFigmaにエクスポートしたいオブジェクトを伝える方法です。正直なところ、選択を間違えると何もエクスポートされなかったり、間違ったものがエクスポートされたりする可能性があるため、戸惑うことがあります。理由は分かりませんが、Figmaはこの点に非常にこだわります。

ステップ2: エクスポートセクションにアクセスする

右側のサイドバーのデザインパネルの下に「エクスポート」というセクションがあります。もし見つからない場合は、少し下にスクロールすると、エクスポート設定を追加するためのプラスアイコンが表示されます。それをクリックすると、選択したオブジェクトに新しいオプションが追加されます。ヒント：プラスアイコンをクリックするのを忘れて、後から「なぜエクスポートボタンが見つからないのか」と不思議に思う人がいます。これは当然のことながら、Windows が本来よりも操作を難しくしているからです。

ステップ3: エクスポート設定を選択する

新しいエクスポートメニューにドロップダウンメニューが表示されます。PNG高画質画像を求める人が多いため、これを選択してください。サイズもまたはを選択でき、お好みに合わせて調整することもできます。に設定すると高画質の1x画像2xが2x得られる場合もありますが、ファイルサイズが2倍になります。プロジェクトに最適なサイズを選択してください。

ステップ4: エクスポートプロセスを開始する

すべて問題なければ、「エクスポート」ボタンを押してください。デスクトップアプリでは、Figma は保存場所を選択するように促します。ウェブ版の場合は、デフォルトのダウンロードフォルダに自動ダウンロードされます。混雑時にはダウンロードが止まったり、時間がかかることがありますが、これはクラウドアプリ特有の問題です。

ステップ5: ダウンロードしたPNGファイルを見つける

ダウンロードフォルダまたは保存場所に移動すると、PNGファイルが保存され、すぐに使える状態になります。正しいレイヤーをエクスポートしたか確認し忘れたことがあるので、ファイルを目で確認して、意図した通りになっているか確認してください。ぼやけたり、変な感じがする場合は、エクスポートサイズのオプションを見直してみてはいかがでしょうか。

追加のヒントとよくある問題

よくある間違いの一つは、正しいフレームまたはオブジェクトが選択されているかどうか確認することです。空のグループや選択されていないレイヤーをエクスポートしようとすると、Figma は空の PNG を出力することがあります。また、エクスポートがうまくいかない場合は、ページを更新するかアプリを再起動すると改善することがあります。稀に、エクスポートメニューが突然消えてしまうことがありますが、その場合はアプリをリロードするだけで直ります。当然ながら、Figma はそういう細かい作業に細心の注意を払う必要があるのです。

よくある質問

複数のフレームを一度にエクスポートできますか?

はい、複数のフレームまたはオブジェクトを選択するだけです（長押しShiftまたはCtrl+クリック）。そして、すべて選択した状態でエクスポート設定を追加し、エクスポートボタンを押すだけで、一括でエクスポートされます。大量のアセットを素早く準備したい場合に最適です。

PNG 以外にどのような形式でエクスポートできますか?

Figmaは非常に柔軟性が高くJPG、SVG、、として保存することもできますPDF。エクスポートパネルのドロップダウンから必要な形式を選択するだけです。拡大縮小用にベクターグラフィックが必要な場合は、SVGの方が適しているかもしれません。

エクスポート時のファイルサイズに制限はありますか?

厳密な制限はありませんが、非常に高解像度の画像や巨大なファイルは動作を遅くしたり、問題を引き起こしたりする可能性があります。適度なサイズに抑えましょう。サムネイルをいくつか使うだけなら、10, 000 x 10, 000ピクセルのPNGファイルをエクスポートしても意味がありません。可能であれば、エクスポート前に最適化してください。

まとめ

Figmaでオブジェクトまたはフレームを選択します
右側のサイドバーに移動し、エクスポートセクションの+アイコンをクリックします。
PNG希望のサイズを選択してください
「エクスポート」を押してダウンロードを待ちます
ダウンロードフォルダでファイルを確認してください

これで誰かの作業時間を少しでも短縮できれば嬉しいです。Figmaでのエクスポートは、インターフェースが少し使いにくいと感じることもありますが、一度コツをつかめば簡単です。頑張ってください！