エクスポート形式および設定

Figmaデザインでは、さまざまなエクスポート形式および設定をサポートしています。この記事を使用して、ニーズに最も適した形式を判断してください。デザインをエクスポートする準備ができたら、Figmaからのエクスポートでこれらの設定を適用する手順を確認してください。

エクスポート形式

PNG (Portable Network Graphics)

PNGは、可逆圧縮、透明度、カラーコントラストをサポートするグラフィック形式です。可逆圧縮は、エクスポート時に元の画質とテキストの判読性を維持します。PNGとしてエクスポートすると、JPGとしてエクスポートする場合よりもファイルのサイズが非常に大きくなることに注意してください。

PNGは、透明度を含む画像や、ロゴ、図、イラストなどの画像とテキストの両方を含むグラフィックに最適です。

PNGには、次のエクスポート設定を使用できます。

• 重なり合うレイヤーを無視
• バウンディングボックスを含める(テキストレイヤーのみ)

JPG (Joint Photographic Group)

JPG (またはJPEG)は、非可逆圧縮を伴うラスター画像ファイル形式です。非可逆圧縮はファイルデータを完全に削除することでファイルサイズを減らします。この結果、ファイルは小さくなりますが、画質も低下します。

ほとんどの場合、Webでの使用にはJPGの品質で十分であり、サイズが縮小されるため読み込み時間が短縮されます。JPGは印刷デザインや写真にも使用されることがあります。

JPGは透明度をサポートしておらず、圧縮によってテキストの判読性に影響が及ぶ可能性があることに注意してください。画像にテキストや透明度がある場合は、代わりにPNGやSVGとしてエクスポートしてください。

JPGには、次のエクスポート設定を使用できます。

• 重なり合うレイヤーを無視
• バウンディングボックスを含める(テキストレイヤーのみ)

SVG (Scalable Vector Graphics)

SVGはXMLベースのベクターグラフィックです。これらは数値と座標に基づくシェイプであり、あらゆる画面でレンダリングできます。SVGはピクセルに依存しないので、画質に影響を与えずに、どのサイズにもスケーリングできます。また透明度もサポートしています。

SVGはスクリプトやコードで表すことができるため、デジタルデザインで一般的に使用されています。レスポンシブデザインに含める予定のロゴ、アイコン、イラストには、SVGを使用します。

SVGには、次のエクスポート設定を使用できます。

• 重なり合うレイヤーを無視
• バウンディングボックスを含める(テキストレイヤーのみ)
• “id”属性を含める
• テキストをアウトライン化
• 線を簡素化

PDF (Portable Document Format)

PDFでは、複雑な対話型のレイアウトを共有できます。PDFには、固定レイアウトのテキスト、フォント、ベクター画像、画像が含まれます。PDFでは、任意のシステムで個別のデザイン要素をレンダリングして操作できます。そのためPDF形式は、ソフトウェア、ハードウェア、オペレーティングシステムにかかわらず多目的に使用できます。

Appleのモバイル開発言語であるXcodeはPDFをサポートしています。このため、PDFはiOSアプリケーションの構築に適しています。Figmaでは、PDFを使用してスライドデッキをエクスポートしたり、iOS開発用のアセットを共有したりします。また、印刷デザインのモックアップに使用することもできます。

エクスポート設定

エクスポート設定では、デザインをエクスポートする方法をさらに詳細に制御できます。

スケール

デフォルトのスケールオプションを選択するか、フィールドにカスタムサイズを入力します。サイズをカスタマイズするには、次のいずれかと一緒に数値を入力します。

• 倍率として使用する値の後ろにxを追加します。
• 固定幅を設定する値の後ろにwを追加します。
• 固定高さを設定する値の後ろにhを追加します。

高密度画面(Retinaディスプレイなど)用のコンテンツをエクスポートする場合、アセットの解像度を上げるため、スケールを大きくしてエクスポートすることを検討してください。

Figmaから画像としてエクスポートしたアセットはDPIがデフォルトで72です。規模に応じてエクスポートした画像のDPIを計算するには、選択したスケールに72を掛け合わせます。たとえば、2倍でエクスポートした画像のDPIは144です。3倍でエクスポートした画像のDPIは216です。

スケーリングにはいくつかの形式の制限があります。

• SVGのエクスポートは、等倍でのみサポートされます。またSVGは、コードで値を調整するか、幅と高さの変数を使用することでスケーリングできます。例: <1img src="image.svg" width="50px"1>
• PDFのエクスポートは、等倍のみがサポートされています。別のスケールでアセットをエクスポートするには、別の形式を選択する必要があります。

サフィックス

これはオプション設定です。[サフィックス]フィールドに入力したものはすべて、エクスポートするとファイル名に追加されます。これを使用すると、エクスポートしたアセットの整理に役立ち、レイヤー名を変更する必要がありません。たとえば、PNGとして「HomePage」というラベルが付けられたフレームをエクスポートしている場合、エクスポートしたファイル名は「HomePagedraft.png」になります。

形式固有のエクスポート設定

一部の形式では追加のエクスポート設定をサポートしています。プロパティパネルの[エクスポート]セクションでをクリックして、これらの設定を表示して調整します。

次の表には、各形式で使用できる設定が示されています。

形式	重なり合うレイヤーを無視	バウンディングボックスを含める	“id”属性を含める	テキストをアウトライン化	線を簡素化
PNG	✓	✓	✕	✕	✕
JPG	✓	✓	✕	✕	✕
SVG	✓	✓	✓	✓	✓
PDF	✕	✕	✕	✕	✕

カラープロフィール

デフォルトでは、Figmaはファイルのカラープロフィールを使用してアセットをエクスポートします。たとえば、ファイルがDisplay P3に設定されている場合、アセットはDisplay P3としてエクスポートされます。

ただし、エクスポート時に別のカラープロフィールを選択できます。

1. [エクスポート設定]をクリックします。
2. カラープロフィールのドロップダウンを開き、カラープロフィールを選択します。
   • ファイルと同じ(カラープロフィール)
   • sRGB
   • Display P3

プロフィールと色管理についての詳細はこちら→

重なり合うレイヤーを無視

この設定はデフォルトで有効になっています。有効な場合、選択したレイヤーのみがエクスポートに含められます。選択したオブジェクトに交わっていたり重なっているその他のオブジェクトは、エクスポートに影響しません。無効な場合は、選択したレイヤーまたはグループと交わるすべてのレイヤーが含められます。

バウンディングボックスを含める

テキストレイヤーのみに使用できます。有効な場合、テキストレイヤーのバウンディングボックスにより、エクスポートのサイズが決定されます。テキストより大きなバウンディングボックスの部分は、エクスポート時に空白のスペースで埋められます。バウンディングボックスからはみ出すテキスト部分は切り取られ、破棄されます。

無効な場合、テキスト自体の寸法に基づいてエクスポートのサイズが決定されます。文字とバウンディングボックスの間にスペースがある場合は、トリミングおよび破棄されます。

"id"属性を含める

有効な場合、SVGのメタデータに"id"タグが追加されます。これによりJavaScriptは簡単に<svg>要素にアクセスでき、スタイルシート内の特定のid選択機能をポイントする場合にもこれを使用できます。レイヤーパネルにあるオブジェクトの名前の"id"が基準として使用されます。

テキストをアウトライン化

少なくとも1つのテキストレイヤーが選択されている場合、この設定はデフォルトで有効になっています。外観を維持するために、すべてのテキストレイヤーはすべてグリフに変換されます。この設定が有効になっていると、エクスポート後にテキストを編集することはできません。編集できるようにしておく必要がある場合は、この設定を無効にします。

線を簡素化

この設定は、選択したオブジェクトが(基本的なシェイプではなく)ベクターネットワークであり、内側の線または外側の線を含む場合にデフォルトで有効になります。Figmaでは、内側、中央、または外側の線をオブジェクトに適用できます。SVGでは中央の線だけをサポートしています。この設定により、他のシステムで内側の線と外側の線を正しくレンダリングできるようにします。