Service logo

    ジョブボード

    有益なデザイン情報をメールでお届けします。

    お役立ちのデザイン情報のみをお送りします。メールは多くとも週に一回で、もちろんスパムメールはありません。

    ツール
    • Figma
    Figma
    • プラグイン
    • 機能
    インスピレーション
    • ポートフォリオ
    • デザイン記事
    • ジョブボード

    Designpedia © 2025 / Trademarks, names, terms and IPs are property of their respective owners unless otherwise stated

    Legal Information

    Figma プラグイン

    Figma 機能

    figma logo

    Figma オブジェクトを任意の形式で書き出す

    オブジェクトを任意の形式で書き出す

    1. Figma
    2. 機能
    3. デザインパネル
    4. エクスポート
    eyecatch image

    概要

    図形、テキスト、画像などを任意の形式で書き出します。 一度エクスポート設定したものは設定を削除しない限り保存され、あとでメインメニューなどからのエクスポートの際に設定一覧から選んでまとめて書き出しできます。

    1. エクスポート設定の追加
    2. エクスポート設定の削除
    3. 書き出しサイズ
    4. サフィックス(ファイル名末尾につける文字)
    5. 書き出し形式
    6. オプション設定
    7. エクスポートボタン
    8. エクスポートのプレビュー

    export-objects_image01.png

    エクスポート設定

    1つのオブジェクトを複数の設定でエクスポートすることができます。 例えば、「2倍のサイズと3倍のサイズで」だったり、「PNGとSVGで」一度に書き出したい時に、設定を追加します。

    1. エクスポート設定の追加

    export-objects_image02.png

    2. エクスポート設定の削除

    export-objects_image03.png

    3. 書き出しサイズ

    書き出すサイズを設定できます。 SVGの場合は等倍のみになります。 サイズが大きくなるにつれ、データ量も大きくなるので注意してください。 以下はデフォルトにある倍率ですが、手動で任意の数値に変更することができます。 0.5X(半分) 0.75X(3/4) 1X(等倍) 1.5X(1.5倍) 2X(2倍) 3X(3倍) 4X(4倍) 512w(幅が512px) 512h(高さが512px)

    export-objects_image04.png

    export-objects_image05.png

    4. サフィックス(ファイル名末尾につける文字)

    書き出すファイルの名前はレイヤー名になります。 サフィックスに任意の文字を入力すると、書き出すファイルすべてのファイル名末尾にその文字が追加されます。 同じ形式で複数書き出す場合に、区別する文字を入れると便利です。

    export-objects_image06.png

    export-objects_image07.png

    5. 書き出し形式

    PNG / JPEG / SVG / PDF から選ぶことができます。

    export-objects_image08.png

    export-objects_image09.png

    6. オプション設定

    書き出す形式によってオプションが異なります また、PDFにはオプションがありません。

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

    チェックをすると、背面に重なっているレイヤーは一緒に書き出されません。

    export-objects_image10.png

    ”id”属性を含める

    SVG形式を選択時のオプションです。 SVGのコードにid属性を追加します。 id名はレイヤー名が入ります。

    export-objects_image11.png

    まとめて書き出す

    デザインパネルで行ったエクスポート設定は、削除しない限り保存されます。 保存された設定から書き出したいコンテンツを選んで、まとめて書き出すことができます。

    ⚫︎メインメニュー > ファイル > エクスポート ⚫︎ツールバー中央のファイル名プルダウン > エクスポート

    【エクスポート設定のショートカット】

    Mac:Shift + Command + E

    Win:Ctrl + Shift+ E

    いずれかの方法でエクスポートを行おうとすると、画面右上に、保存されたファイル内のエクスポート設定が一覧表示されます。

    ⚫︎メインメニュー > ファイル > エクスポート

    export-objects_image12.png

    ⚫︎ツールバー中央のファイル名プルダウン > エクスポート

    export-objects_image13.png

    export-objects_image14.png

    書き出したいものにチェックを入れエクスポートボタンを押し、保存先を指定すると、選択したものがまとめて書き出されます。

    author icon

    Designpedia Team

    2024年1月5日(金) 公開