Figma オブジェクトを任意の形式で書き出す
オブジェクトを任意の形式で書き出す
- Figma
- 機能
- デザインパネル
- エクスポート

概要
図形、テキスト、画像などを任意の形式で書き出します。 一度エクスポート設定したものは設定を削除しない限り保存され、あとでメインメニューなどからのエクスポートの際に設定一覧から選んでまとめて書き出しできます。
- エクスポート設定の追加
- エクスポート設定の削除
- 書き出しサイズ
- サフィックス(ファイル名末尾につける文字)
- 書き出し形式
- オプション設定
- エクスポートボタン
- エクスポートのプレビュー
エクスポート設定
1つのオブジェクトを複数の設定でエクスポートすることができます。 例えば、「2倍のサイズと3倍のサイズで」だったり、「PNGとSVGで」一度に書き出したい時に、設定を追加します。
1. エクスポート設定の追加
2. エクスポート設定の削除
3. 書き出しサイズ
書き出すサイズを設定できます。 SVGの場合は等倍のみになります。 サイズが大きくなるにつれ、データ量も大きくなるので注意してください。 以下はデフォルトにある倍率ですが、手動で任意の数値に変更することができます。 0.5X(半分) 0.75X(3/4) 1X(等倍) 1.5X(1.5倍) 2X(2倍) 3X(3倍) 4X(4倍) 512w(幅が512px) 512h(高さが512px)
4. サフィックス(ファイル名末尾につける文字)
書き出すファイルの名前はレイヤー名になります。 サフィックスに任意の文字を入力すると、書き出すファイルすべてのファイル名末尾にその文字が追加されます。 同じ形式で複数書き出す場合に、区別する文字を入れると便利です。
5. 書き出し形式
PNG / JPEG / SVG / PDF から選ぶことができます。
6. オプション設定
書き出す形式によってオプションが異なります また、PDFにはオプションがありません。
重なり合うレイヤーを無視する
チェックをすると、背面に重なっているレイヤーは一緒に書き出されません。
”id”属性を含める
SVG形式を選択時のオプションです。 SVGのコードにid属性を追加します。 id名はレイヤー名が入ります。
まとめて書き出す
デザインパネルで行ったエクスポート設定は、削除しない限り保存されます。 保存された設定から書き出したいコンテンツを選んで、まとめて書き出すことができます。
⚫︎メインメニュー > ファイル > エクスポート ⚫︎ツールバー中央のファイル名プルダウン > エクスポート
【エクスポート設定のショートカット】
Mac:Shift + Command + E
Win:Ctrl + Shift+ E
いずれかの方法でエクスポートを行おうとすると、画面右上に、保存されたファイル内のエクスポート設定が一覧表示されます。
⚫︎メインメニュー > ファイル > エクスポート
⚫︎ツールバー中央のファイル名プルダウン > エクスポート
書き出したいものにチェックを入れエクスポートボタンを押し、保存先を指定すると、選択したものがまとめて書き出されます。
Designpedia Team
2024年1月5日(金) 公開