Figmaデザインでは、さまざまなエクスポート形式および設定をサポートしています。この記事を使用して、ニーズに最も適した形式を判断してください。デザインをエクスポートする準備ができたら、Figmaからのエクスポートでこれらの設定を適用する手順を確認してください。
エクスポート形式
PNG (Portable Network Graphics)
PNGは、可逆圧縮、透明度、カラーコントラストをサポートするグラフィック形式です。可逆圧縮は、エクスポート時に元の画質とテキストの判読性を維持します。PNGとしてエクスポートすると、JPGとしてエクスポートする場合よりもファイルのサイズが非常に大きくなることに注意してください。
PNGは、透明度を含む画像や、ロゴ、図、イラストなどの画像とテキストの両方を含むグラフィックに最適です。
注: Figmaでは、RGBAカラーモデルを使用した32ビットPNGをサポートしています。 RGBAのAはアルファチャネルを示し、ピクセルの不透明度を制御します。アルファ値なしに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にエクスポートするときには以下の点に注意してください。
-
円錐形またはひし形グラデーション: これらは放射状グラデーションとしてエクスポートされます
-
背景ぼかし範囲: 直接レイヤーをぼかす必要があります
-
テキスト: テキストはデフォルトでグリフとしてエクスポートされます。つまり、テキストレイヤーをエクスポートした後に編集することはできません。テキストの編集を保存するには、をクリックして、[テキストをアウトライン化する]をオフにします
-
線: 線は塗りとしてエクスポートされます
SVGには、次のエクスポート設定を使用できます。
PDF (Portable Document Format)
PDFでは、複雑な対話型のレイアウトを共有できます。PDFには、固定レイアウトのテキスト、フォント、ベクター画像、画像が含まれます。PDFでは、任意のシステムで個別のデザイン要素をレンダリングして操作できます。そのためPDF形式は、ソフトウェア、ハードウェア、オペレーティングシステムにかかわらず多目的に使用できます。
Appleのモバイル開発言語であるXcodeはPDFをサポートしています。このため、PDFはiOSアプリケーションの構築に適しています。Figmaでは、PDFを使用してスライドデッキをエクスポートしたり、iOS開発用のアセットを共有したりします。また、印刷デザインのモックアップに使用することもできます。
注: テキストはデフォルトでグリフとしてエクスポートされます。つまり、最終のPDFでテキストを編集できなくなります。ただし、PDFをブラウザまたは他の対応ソフトウェアで表示する場合は、テキストを選択してコピーできます。
エクスポート設定
エクスポート設定では、デザインをエクスポートする方法をさらに詳細に制御できます。
スケール
デフォルトのスケールオプションを選択するか、フィールドにカスタムサイズを入力します。サイズをカスタマイズするには、次のいずれかと一緒に数値を入力します。
- 倍率として使用する値の後ろに
xを追加します。
- 固定幅を設定する値の後ろに
wを追加します。
- 固定高さを設定する値の後ろに
hを追加します。
高密度画面(Retinaディスプレイなど)用のコンテンツをエクスポートする場合、アセットの解像度を上げるため、スケールを大きくしてエクスポートすることを検討してください。
Figmaから画像としてエクスポートしたアセットはDPIがデフォルトで72です。規模に応じてエクスポートした画像のDPIを計算するには、選択したスケールに72を掛け合わせます。たとえば、2倍でエクスポートした画像のDPIは144です。3倍でエクスポートした画像のDPIは216です。
注: 2倍でエクスポートした画像の表示サイズは、Figmaに再びインポートしても増加しないことに気づくかもしれません。これは、Figmaでは、DPIが144の画像は高密度画面用のデザインで使用されると想定し、自動的に半分にスケーリングして適用するからです。Figmaへのコンテンツのインポートの詳細はこちら→
スケーリングにはいくつかの形式の制限があります。
- SVGのエクスポートは、等倍でのみサポートされます。またSVGは、コードで値を調整するか、幅と高さの変数を使用することでスケーリングできます。例: <
1img src="image.svg" width="50px"1>
- PDFのエクスポートは、等倍のみがサポートされています。別のスケールでアセットをエクスポートするには、別の形式を選択する必要があります。
サフィックス
これはオプション設定です。[サフィックス]フィールドに入力したものはすべて、エクスポートするとファイル名に追加されます。これを使用すると、エクスポートしたアセットの整理に役立ち、レイヤー名を変更する必要がありません。たとえば、PNGとして「HomePage」というラベルが付けられたフレームをエクスポートしている場合、エクスポートしたファイル名は「HomePagedraft.png」になります。
形式固有のエクスポート設定
一部の形式では追加のエクスポート設定をサポートしています。プロパティパネルの[エクスポート]セクションでをクリックして、これらの設定を表示して調整します。
次の表には、各形式で使用できる設定が示されています。
重なり合うレイヤーを無視
この設定はデフォルトで有効になっています。有効な場合、選択したレイヤーのみがエクスポートに含められます。選択したオブジェクトに交わっていたり重なっているその他のオブジェクトは、エクスポートに影響しません。無効な場合は、選択したレイヤーまたはグループと交わるすべてのレイヤーが含められます。
スライスをエクスポートしますか? [重なり合っているレイヤーを無視]設定は、スライスに対し、その他のオブジェクトの場合とは異なった影響を及ぼします。[重なり合うレイヤーを無視]が有効で、スライスがフレームやグループ内部に含まれている場合、スライスと同じコンテナにあり、スライスの境界内に見えているコンテンツだけがエクスポートされます。
[重なり合うレイヤーを無視]が無効の場合、スライスの境界内に見えているすべてのコンテンツがエクスポートされます。スライスがフレームやグループに含まれない場合は、[重なり合うレイヤーを無視]設定を有効にしても無効にしても影響はありません。スライスの境界内に見えているすべてのコンテンツがエクスポートされます。
バウンディングボックスを含める
テキストレイヤーのみに使用できます。有効な場合、テキストレイヤーのバウンディングボックスにより、エクスポートのサイズが決定されます。テキストより大きなバウンディングボックスの部分は、エクスポート時に空白のスペースで埋められます。バウンディングボックスからはみ出すテキスト部分は切り取られ、破棄されます。
無効な場合、テキスト自体の寸法に基づいてエクスポートのサイズが決定されます。文字とバウンディングボックスの間にスペースがある場合は、トリミングおよび破棄されます。
"id"属性を含める
有効な場合、SVGのメタデータに"id"タグが追加されます。これによりJavaScriptは簡単に<svg>要素にアクセスでき、スタイルシート内の特定のid選択機能をポイントする場合にもこれを使用できます。レイヤーパネルにあるオブジェクトの名前の"id"が基準として使用されます。
テキストをアウトライン化
少なくとも1つのテキストレイヤーが選択されている場合、この設定はデフォルトで有効になっています。外観を維持するために、すべてのテキストレイヤーはすべてグリフに変換されます。この設定が有効になっていると、エクスポート後にテキストを編集することはできません。編集できるようにしておく必要がある場合は、この設定を無効にします。
線を簡素化
この設定は、選択したオブジェクトが(基本的なシェイプではなく)ベクターネットワークであり、内側の線または外側の線を含む場合にデフォルトで有効になります。Figmaでは、内側、中央、または外側の線をオブジェクトに適用できます。SVGでは中央の線だけをサポートしています。この設定により、他のシステムで内側の線と外側の線を正しくレンダリングできるようにします。
注: この設定を無効にすると、すべての線が太くなり、マスクが適用されます。視覚効果は同じですが、SVGのコードに行を追加する必要があります。
