【初心者向け】Figmaから画像を書き出す方法
Figmaで作成したデザインを画像として書き出す目的は、大きく分けて次の2つに分類できます：
① デザイン確認・共有用に書き出す場合
-
等倍（1x）でフレーム全体を書き出せばOK
-
チームメンバーやクライアントとの確認用には、.png や .jpg 形式が一般的
② Webサイトやアプリで使用する場合
-
デバイス対応のため、複数のサイズ（1x、2xなど）での書き出しが必要なことも
-
アイコンやロゴなどは、可能であれば.svg形式（ベクター）で書き出すのが理想的
フレームとオブジェクト、どちらも書き出せます
Figmaでは、個別のオブジェクトも、アートボード全体（＝フレーム）画像としてエクスポートできます。
用途に応じて、どちらを選ぶかを使い分けましょう。
次のセクションで、それぞれの書き出し方について説明していきます。
デザイン確認用に画像を書き出す方法（Figma）
チームメンバーやクライアントとデザインの進捗を共有する際には、Figmaで作成したフレームを画像として書き出すのが便利です。
✅ 基本の書き出し手順
-
共有したいフレームを選択
-
右側のインスペクタパネル内「Export」セクションを開く
-
「+（プラス）ボタン」をクリックして書き出し形式（例：PNG、JPGなど）を設定
-
「Export [フレーム名]」ボタンをクリックして画像を保存
※確認用途であれば、サイズ（Size）は「1x」で十分です。
🎨 PNG画像で背景を透過させたいとき
透過PNGとして書き出したい場合は、次の設定を行いましょう：
-
フレームを選択
-
インスペクタパネル内の「Fill（塗りつぶし）」設定を確認
-
「Show in exports」のチェックを外すことで、背景色なし（透明）で書き出されます
Webサイト用に画像を書き出すときのポイント（Figma）
Webサイトに画像を掲載する際は、高精細ディスプレイ（Retinaなど）への対応を意識して画像をエクスポートする必要があります。
単純に「100px＝100px」で書き出すのではなく、2倍（@2x）や3倍（@3x）サイズの画像も用意するのが一般的です。
高精細ディスプレイ対応のために
近年のディスプレイは解像度が高く、1xの画像ではぼやけて見えることがあります。
そのため、画像は2倍や3倍のサイズで書き出しておくのがおすすめです。
例：Web上で100pxで表示したい画像 → 200px（@2x）や300px（@3x）の画像を用意しておくと美しく表示されます。
✅ 複数サイズの画像を書き出す手順
-
書き出したいオブジェクトやフレームを選択
-
インスペクタパネルの「Export」セクションで「+（プラス）ボタン」をクリック
- Export Component 1ボタンを押して画像を保存しましょう。
※書き出し形式について、Suffixを使うことでファイル名に@3xと追記され、１倍2倍、3倍の画像が.png形式でエクスポートされます。が自動で付与されます
✅ 活用のヒント
-
Webサイトのレスポンシブ対応（PC／スマホ別の画像出し分け）に便利
-
アプリ開発では、各デバイス向けに大量の画像が必要になるため、この自動出力機能で効率化
-
手作業でのリサイズが不要になるため、時短・ミス防止にも有効
Figmaのエクスポート機能は、確認・共有から実務利用まで幅広く活用できる便利な機能です。
目的に応じて形式や背景の有無を調整し、効率よく画像を書き出しましょう！
