FigmaでPNGにエクスポートする方法

2022/06/22

画像レイヤー、グループ、またはフレームをJPG、PNG、またはSVGとしてエクスポートする場合でも、Figmaで対応できます。

ただし、さまざまな形式で画像をエクスポートする方法や、使用しているエクスポートオプションの種類がわからない場合に備えて、この記事では、Figmaエクスペリエンスを向上させるためのガイドラインとヒントを提供します。

PNGにエクスポート

PNG画像のエクスポートは、おそらくすべての人の最初の選択肢です。プロセスは、PNG、JPG、SVGなどのどの形式でも同じです。

画像を選択します。

右側のサイドバーの[エクスポート]セクションを選択します。

「+」記号をクリックします。

PNG画像形式を選択します。

[画像のエクスポート]ボタンをクリックします。

エクスポートする前に、プレビュー機能を使用して、正しい画像があり、それ以上の変更が必要ないことを確認してください。

選択したエクスポートをPNGにエクスポート

選択したアイテムをエクスポートする場合、プロセスは可能な限り簡単です。

エクスポートする要素またはフレームを選択します。

プロパティパネルに移動します。

下にスクロールして、[エクスポート]セクションを見つけます。

「+」記号をクリックします。

PNG画像形式を選択します。

必要に応じて、別の要素サイズを設定してください。

選択したアイテムをエクスポートします。

代替のPNGエクスポート方法

共有したい画像がFigmaにある場合、アプリからそれをエクスポートすることが唯一の方法ではありません。

最高の機能の1つは、「PNGとしてコピー」オプションです。仕組みは次のとおりです。

Figmaで画像を選択します。

画像を右クリックしてメニューを開きます。

「PNGとしてコピー」オプションを選択します。

画像を別のアプリケーションに貼り付けます。

この機能を使用すると、Figma内の目的の画像またはオブジェクトのPNGバージョンをクリップボードに直接コピーできます。オブジェクトに他のエクスポート設定がない場合、これは画像のデフォルトの1xバージョンになります。

さらに簡単にするために、次のキーボードショートカットを使用できます。

「Ctrl+Shift + C」は、Windowsデバイスのキーボードショートカットです。

「Command+Shift + C」は、Macデバイスのキーボードショートカットです。

このメソッドを使用すると、FigmaでオブジェクトのPNGコピーを共有するためのより高速な方法が得られます。ただし、従来の方法を使用してPNG画像をエクスポートすると、画像の品質をより細かく制御できます。

複数のレイヤーを1つのPNGとしてエクスポート

複数のレイヤーを選択してPNGとしてエクスポートしようとすると、個々のレイヤーが個別のPNG形式で含まれたzipファイルが作成されます。

これは一度に複数のファイルをエクスポートするのに最適ですが、すべてのレイヤーを1つのPNGファイルにマージする必要があるユーザーには役立ちません。

そこで登場するのが「グループ」機能です。Figmaで複数のレイヤーを選択し、それらをグループに入れることができます。次に、グループをPNGファイルとしてエクスポートできます。これにより、すべてのレイヤーが選択された1つのファイルが作成されます。

目的のレイヤーを選択します。

メニューから「グループ」を選択します。

グループを選択し、[エクスポート]セクションに移動します。

「+」記号をクリックします。

PNG形式を選択します。

グループエクスポート。

Figmaの他のほとんどのアクションと同様に、これも単純化できます。たとえば、キーボードショートカットを使用してグループを作成できます。

「Ctrl+G」は、Windowsデバイスのキーボードショートカットです。

「Command+G」は、Macデバイスのキーボードショートカットです。

レイヤーの選択に不満がある場合は、「Shift + Ctrl+G」または「Shift+Command+G」を押すと選択のグループが解除されます。

PNGエクスポート品質設定

デフォルトでは、Figmaは32ビットRGBAPNGファイルをサポートしています。これは、ピクセルの不透明度を制御できるので便利です。

リソースが圧縮されても画質が低下しないため、PNG形式がよく使用されます。これは、問題が発生しないという意味ではありません。多くのFigmaユーザーは、写真をWebにアップロードするとPNGの品質が低下するという不満を持っています。しかし、それは必ずしもフィグマの問題ではありません。多くの場合、これはダウンロードを処理するサーバーによって行われる圧縮が原因です。

別のサーバーで圧縮したときに画像がそれほど損なわれないように、品質を調整するためにできることがあります。