UI/UXデザインツール『Figma』入門

4-8. 画像の書き出し(エクスポート)

  • UIデザイン
  • UXデザイン
  • プロトタイピング
  • Webデザイン

エクスポート機能を利用することで、グループ・オブジェクト・およびフレームをエクスポートすることができます。Figmaのエクスポートは、PNG ・ JPG・ SVG・PDF形式に対応しています。このレッスンではエクスポート機能の使い方について解説していきます。

公開日:2019/08/23最終更新日:2021/08/30

1.Figmaのエクスポートについて

ショートカットキー : Command + Shift + E

Figmaのエクスポート機能は、PNG ・JPGSVGPDF形式の書き出しを行うことが出来ます。

エクスポートの手順は次の通りです。

  1. 書き出したいオブジェクト・レイヤー・グループ・フレームを選択します。
  2. エクスポート設定を行う。
  3. 選択されたエクスポートリストの全てを書き出し/単一の要素として書き出しを行う。

2.エクスポートの設定をする

エクスポートの設定を行うには、書き出したいオブジェクト、レイヤー、グループ、フレームを選択します。

選択を行ったら、プロパティパネルから図1の「Export」セクションで設定を行います。
Exportセクションプロパティは次のようになっています。

  • ①書き出し設定の追加と消去
  • ②倍率の変更Figmaでは、0.25倍から1024倍までを選択を行うことができます。
    そのほかにも、multiplier( x )、width( w )、またはheight( h )を手動で入力することが可能です。
  • ③書き出したいファイルの接頭辞または、接尾辞の追加を行うことが出来ます。例えば、2倍の倍率で書き出されたオブジェクトは、OS用に設計するとき、にAppleが必要とする命名規則を満たすために、「@2倍」というサフィックスが付きます。アンドロイドの場合、「2x」は「xhdpi/」という接頭辞で表します。アプリ開発するときに便利な機能です。
  • ④書き出しのフォーマットを、PNGJPGSVGPDFから選択できます。
  • ⑤選択したフォーマットの詳細設定を行うことが出来ます。
  • ⑥書き出しのプレビューを行うことが出来ます。 
図1 書き出しプロパティパネル

3.エクスポートを実行する

上記で設定したオブジェクト・レイヤー・グループ・フレームを書き出すには、以下の二通りあります。

単一の要素として書き出す

単一の要素として書き出すには、書き出したいオブジェクト・レイヤー・グループ・フレームを選択し、プロパティパネルから図2赤枠の「Export オブジェクト名」のボタンを押し、保存先の選択を行うことで、書き出すことが出来ます。

図2 書き出しプロパティパネル

選択されたエクスポートリストの全てを書き出し

選択された全てのエクスポートリストを書き出すには、エクスポート設定を個々に行います。

個々に行ったら、Command+Shift+Eまたは、左上のサーチバーから「Export」と入力を行います。

ショートカットキーもしくは、「Export...」を使用することで、図4のウィンドウが表示されるので、赤枠の「Export」から書き出すことが出来ます。

図3 サーチバー

 

図4 エクスポートプロパティパネル

 

理解度チェック





UI/UXデザインツール『Figma』入門

1. Figmaの概要とインストール

2.Figmaの基本操作

3.ツールバーの操作

4. プロパティパネルの操作

5. プロトタイピング

6. 共有とバージョン管理

7. 料理写真投稿アプリを作ってみよう



このレッスンの著者