FigmaからSVGを「ゴミ」として書き出すな。フロントエンドを加速させる最適化の極致
UI/UXエンジニアとして、私は数多のプロジェクトで「デザインデータ」が「負債」に変わる瞬間を目撃してきた。特に、Figmaから無造作にエクスポートされたSVGコードは、パフォーマンスの観点で見れば「ゴミの塊」だ。
ブラウザのレンダリングエンジンは、君たちが適当に放置したメタデータや冗長なグループ構造を一つ一つ解釈し、メモリを浪費する。これを放置するのは、Webのアーキテクトとして怠慢だ。
本稿では、FigmaのSVG出力を制御し、CI/CDパイプラインで自動的に「極限まで削ぎ落とす」ための、エンジニアのための処方箋を授ける。
—
1. FigmaのSVG出力に潜む「見えない負債」
FigmaのSVGエクスポートは、可搬性と再現性を優先しているため、開発環境では不必要なコードが大量に含まれる。
- `fill-rule=”evenodd”` の氾濫: 全てのパスに記述されるこの属性は、複雑な形状でない限りデフォルト値で補完可能であり、純粋なノイズだ。
- メタデータの汚染: `sketching-plugin` 系のメタデータや、レイヤーIDがそのまま `id` 属性として出力される。これらはDOMを汚し、CSSのセレクタ干渉を引き起こす。
- 不要なグループ (`
`) のネスト: Figmaのレイヤー構造をそのまま反映するため、パスが深くネストされ、ブラウザのスタイル計算コストを増大させる。
これらを放置することは、ビルド時に「重い画像をそのまま配信する」のと同じだ。我々はデザインを「データ」として制御しなければならない。
—
2. 構造化のベストプラクティス：レイヤーは「コード」である
最適化の第一歩は、Figma上での設計から始まる。エクスポート時のコードを最適化するためのレイヤー設計だ。
1. グループのフラット化: 複雑なレイヤー構造は、最終的に「アウトライン化」するか、可能な限りフラットなパスの集合体へと統合する。
2. 命名規則の強制: レイヤー名はそのまま `id` になり得る。`path_1234` といった自動生成名ではなく、`icon-submit-arrow` のように意味のある名称を付与する。
3. ビューボックスの正規化: コンポーネントのサイズは、必ず 24×24 や 32×32 などのキリの良い整数値で統一する。これにより、レンダリング時の浮動小数点計算によるアンチエイリアスの揺らぎを排除できる。
—
3. 「SVGO」を組み込んだ完全自動化パイプライン
Figmaからのエクスポートを手動で行うのは今日で最後にしよう。我々が必要なのは、デザインデータをフロントエンドのビルドプロセスに直結させるパイプラインだ。
推奨構成：SVGO + CLIのオートメーション
`svgo` はSVG最適化のデファクトスタンダードだが、デフォルト設定では甘い。我々は「極限」を追求する。
設定ファイル: `svgo.config.js`
module.exports = {
multipass: true, // 複数回パスを通し、極限まで圧縮する
plugins: [
‘preset-default’,
‘removeDimensions’, // width/heightを削除し、viewBoxでスケーラブルに
{
name: ‘removeAttrs’,
params: { attrs: ‘(stroke|fill|style|data-name)’ } // 必要に応じて属性を全消去し、CSSで制御可能に
},
‘removeUselessDefs’,
‘cleanupIDs’ // 不要なIDをクリーンアップし、競合を防ぐ
]
};
自動化スクリプト: `optimize-svg.sh`
FigmaのAPI（REST API）を用いて、特定のフレームを自動取得し、即座に最適化するワークフローだ。
!/bin/bash
1. Figma APIから画像を取得
2. SVGOで圧縮
3. TypeScriptの型定義を自動生成
PROJECT_ID=”your_project_id”
FILE_KEY=”your_file_key”
echo “Downloading SVGs from Figma…”
実際にはFigma REST APIを叩いてSVG URLを取得し、curlでDLする処理を入れる
echo “Optimizing with SVGO…”
svgo -f ./raw-svgs -o ./src/assets/icons –config=svgo.config.js
echo “Generating Icon Components…”
自動生成ツール（svgrなど）を呼び出し、Reactコンポーネント化する
npx @svgr/cli –out-dir src/components/icons ./src/assets/icons
—
伝説のアーキテクトからの助言
デザインシステムにおいて、SVGは単なる画像ではない。それは「純粋な数学的データ」だ。
- メモリ消費: SVGのパスデータが長ければ長いほど、ブラウザのパース時間は増大し、メモリを食う。極限までパスポイントを削減（simplify）せよ。
- 責務の分離: アイコンの色情報はCSSの `currentColor` に依存させるべきだ。SVGの中に `fill=”#000″` を残すのは、デザインシステムの柔軟性を自ら捨てているに等しい。
プロトタイピングの段階から、このパイプラインを意識した人間だけが、プロダクトの寿命を延ばすことができる。ツールに使われるな。ツールを支配し、コードという名の芸術を磨き上げろ。
君たちが今日書いたその一行の最適化が、明日、数百万人のユーザーのブラウザを0.1秒速くするのだから。