本記事ではFigmaで作成したコンテンツをさまざまな形式でエクスポートする方法を詳しく解説します。初心者から上級者まで参考になるよう、基本操作から応用までを網羅しています。
エクスポートの基本
Figmaではアートボード（フレーム）、オブジェクト、画像などのコンテンツを簡単にエクスポートすることができます。基本的なエクスポート手順は以下の通りです。
エクスポートしたいオブジェクトを選択する
アートボードや個々の要素をクリックして選択します。
右側のプロパティパネルでエクスポート設定を行う
選択したオブジェクトの下にある「エクスポート」セクションを見つけます。
出力形式（PNG、JPG、SVG、PDF）やサイズを指定できます。
「Export」ボタンをクリック
保存場所を指定してエクスポートを完了します。
これだけで、選択したコンテンツをデバイスに保存することができます。
エクスポート可能な形式とその特徴
Figmaでは以下の形式でコンテンツをエクスポートできます。それぞれの特徴を理解して、適切な形式を選びましょう。
PNG
特徴: 透過背景をサポートする非可逆圧縮形式。
用途: Webデザインやアイコンの出力に最適。
設定: サイズ倍率（1x、2xなど）や背景透過の有無を指定可能。
JPG
特徴: ファイルサイズが小さく、高品質な画像出力が可能な非透過形式。
用途: 写真や背景画像向け。
設定: 品質（高、中、低）を調整可能。
SVG
特徴: ベクターデータとしてエクスポートされ、拡大縮小による画質劣化がない。
用途: ロゴやイラスト、Webアプリケーション向け。
設定: 「アウトライン化されたテキスト」に変換するオプションあり。
特徴: 印刷やプレゼン資料向けに最適な形式。
用途: ドキュメントやプリント用デザインの出力。
設定: 高解像度でのエクスポートが可能。
エクスポートの詳細設定
サイズの調整
「1x、2x、3x」などの倍率を指定することで、さまざまなデバイス解像度に対応した画像を出力できます。
カスタム倍率（例: 1.5x）も入力可能です。
範囲の指定
特定のフレームやグループを選択して部分的にエクスポートできます。
全体のデザインをまとめてエクスポートしたい場合は、各フレームに「エクスポート」設定を適用します。
背景の透過
PNGやSVGをエクスポートする際には背景を透過させることができます。
ロゴやアイコンのように背景が不要なデザインに便利です。
ショートカットを活用したエクスポート
Figmaでは、ショートカットを活用することで、作業効率を大幅に向上させることができます。
- Mac:
Shift + Command + E - Windows:
Shift + Ctrl + E
このショートカットを使用すると、選択したオブジェクトをすばやくエクスポート用に設定できます。
特定のユースケースに応じたエクスポート方法
複数のアセットを一括エクスポート
複数のオブジェクトを選択することで一括エクスポートすることが可能です。エクスポートセクションから各サイズの設定を追加することで、１つのデザインの各サイズパターンをまとめて出力することもできます。
スライスツールを使ったエクスポート
特定の範囲をスライスツールで指定し、必要な部分だけをエクスポートできます。
スライスはプロトタイプや特定のコンテンツを切り出す際に便利です。
実務の場でこの方法で書き出すケースは稀です。
デザインを共有してエクスポートしてもらう
「Share」機能を使用して開発者にリンクを共有することで、エクスポートの必要がなくなります。
開発者がFigma内でアセットをダウンロードできるためです。
開発者のFigmaへの理解度によっては、書き出した上で共有する方がスムーズに開発が行えるケースもあります。
プラグインでエクスポートを強化
Figmaには多くのプラグインがあり、エクスポート作業をさらに効率化できます。以下はおすすめのプラグインです。
TinyImage Compressor
エクスポートした画像を圧縮してファイルサイズを削減。
▼ダウンロードページ
ダウンロード先はこちら
Export Kit
HTML、CSS、JavaScriptコードを直接生成するツール。
Figma to Code
ReactやVue.jsのコードをエクスポート可能。
トラブルシューティング
エクスポートした画像がぼやける
原因: サイズ倍率が小さい、またはデザインが高解像度でない可能性があります。
解決策: サイズ倍率を2x以上に設定し、高解像度でエクスポートしてください。
フォントが正しく表示されない
原因: フォントがアウトライン化されていない、または使用フォントがシステムにインストールされていない可能性があります。
解決策: SVG形式の場合、アウトライン化されたテキストを有効にします。
色が正確でない
原因: カラープロファイルの違いかもしれません。
解決策: 必要に応じて、デザイン作成時にsRGBプロファイルを使用します。
まとめ
Figmaのエクスポート機能は非常に柔軟でさまざまなニーズに対応しています。基本操作を押さえることで、効率的に高品質なアセットを生成することが可能です。また、プラグインやショートカットを活用すればさらに作業を効率化できます。本記事を参考にFigmaのエクスポート機能をマスターしてください！
他にもクリエイターの収入アップ方法も紹介しているので、自分の給与に違和感がある方は覗いていってみてください。
