この記事は2分で読めます

【Figma】エクスポートでデータを書き出す方法

  • 投稿日
  • 更新日

あとで読む

【Figma】エクスポートでデータを書き出す方法

今回は、Figmaでのデータの書き出し方について解説します。Photoshopなどでは「書き出し」ボタンを使用しますが、Figmaでは「エクスポート」機能でデータを書き出すことができます。簡単にできるので覚えていきましょう。

イッパイアッテナ

はじめまして、イッパイアッテナです。

ITと教養で、優秀なネコの手となり、あなたのあらゆる問題を解決します。あなたの相談役だったり、デザイナーだったり、広報だったり、わたしたちは”イッパイ”の顔をあなたに見せることができます。

エクスポートを使おう

さっそくエクスポートを使ってみましょう。

STEP
書き出したいオブジェクトを用意し、右側にあるエクスポートをクリックします。
STEP
するとこのようにタブが開くので、各項目を設定しましょう。
画像の書き出しサイズの変更

xが書かれているものは倍率wは横の幅hは高さの幅を示しています。

書き出し形式の変更
STEP
設定後エクスポートを押し、保存ファイルを選択して書き出し完了

エクスポートを押すと、どの場所に保存するかファイルが出てくるので、任意の場所を選び保存しましょう。

書き出し方法は以上です。

その他の機能

ここでは、上記以外の機能をご紹介します。

エクスポートの設定

右側の3つの点はエクスポートの設定です。

項目は以下の通りです。

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

PNG、JPG、SVG形式の時に使用できます。

チェックが入っていると、背後のレイヤーは書き出されず選択したレイヤーのみ書き出されます。

チェックあり

チェックなし

バウンディングボックスを含める

PNG、JPG、SVG形式の時に使用できます。

チェックが入っていると、テキスト自体のサイズで書き出されます。文字とバウンディングボックスの間の余白などはトリミングにより破棄されます。

バウンディングボックスとは、ドラッグして移動、変形などができるオブジェクトの周りの枠線のことです。

“id”属性を含む

SVG形式の時に使用できます。

チェックが入っていると、レイヤーパネルにあるオブジェクト名を基準として、“id”タグがSVG内に追加されます。

アウトラインテキスト

SVG形式の時に使用できます。

チェックが入っていると、テキストレイヤーがすべてアウトライン化され書き出されます。そのため、書き出し後もテキストを編集したい場合にはチェックを外しておく必要があります。

サフィックス

サフィックスに入れた文字は、ファイル名の後ろに追加されます。複数書き出しをした時や、サイズ違いをわかりやすく区別したい時に便利です。

まとめ

今回はFigmaでのデータの書き出し方について解説しました。細かい設定も覚え、より便利に利用していきましょう!

この記事を書いた人

かすみ
かすみ

将来は庭のテントでWEBデザインのお仕事がしたいです🏕 フェス・邦楽ロック大好き! テーマパークから介護まで接客経験値豊富な人間🚶‍♀️ 私なりの気づきを皆さまにお届けします✨

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

Web制作について相談してみませんか?

必須は必須項目です。弊社へお問い合わせいただく方は、下記の「個人情報の取り扱いについて」を必ずお読みください。

会社名

任意

お名前

必須

メールアドレス

必須

電話番号

任意

お問い合わせ内容

必須