SALUDOBlog

FigmaでSVGをエクスポート”書き出す”方法は?|そもそもSVGって何?

FigmaでSVGをエクスポート"書き出す"方法は?

FigmaからSVGをエクスポートする方法

FigmaでデザインしたUIパーツを開発者に渡す際、素材データとしてSVGやコードをエクスポートすることが多いです。

SVGは拡大縮小に強く、コーダー側も読み込みやすいフォーマット。コードエクスポートすればCSSやJSファイルを生成できるため、開発用に最適です。

エクスポートの方法は以下の通り。

  1. エクスポートしたいオブジェクトを選択
  2. 右パネルのエクスポートボタンからフォーマットを指定
  3. SVGやコードを選択し、ファイル出力

以上の簡単な手順で、実装に最適なデータを高品質に吐き出すことができます。

Figmaのデザインデータをスムーズに現場につなげることが可能なので、開発者との協業にも最適といえるでしょう。

FigmaからSVGをエクスポートする際の注意点をいくつか紹介します。

使用フォントの埋め込み

SVGエクスポート時は使用フォントが埋め込まれないため、文字が期待通り表示されない場合があります。

グラデーションの変換失敗

複雑なグラデーションがうまくSVG形式に変換できずに失敗することがあるので要注意です。

ストロークの画質低下

特にアウトラインの細いストロークは画質の劣化が発生しやすい傾向があります。

表示ブラウザへの依存性

ブラウザによってSVGの文字やグラデーションの表示方法が異なることがあります。複数環境での確認が必要です。このように出力時の品質保持には多少の注意が必要です。事前確認を怠らないことが大切です。

そもそもSVGとは?

Scalable Vector Graphicsの略で、拡大・縮小に強いベクター形式の画像フォーマットです。

SVGのメリット

  • 解像度に依存せず滑らかに拡大できる
  • ファイルサイズが小さい
  • テキスト情報が保持される

などの特徴があります。Figmaで作ったデザインデータを開発者に渡す際などにSVGでエクスポートすることが多いです。コーディング作業においても扱いやすいフォーマットといえます。

FigmaからSVGとコードをエクスポートする方法をまとめます。

  • SVGは拡大縮小に強いベクターフォーマット
  • コードエクスポートでCSSやJS等が生成できる
  • エクスポートは右のパネルから簡単に可能

以上のように、Figmaのデザインデータを開発現場で生かすには、SVGやコードのエクスポート機能を活用することが重要です。スムーズなデザインハンドオフを実現できるので、開発者との協業に最適といえます。