Figmaの「Export」をハックせよ：ピクセルパーフェクトを超えた自動化パイプラインの構築
プロダクトの規模が拡大するにつれ、Figmaの「Exportボタン」をポチポチ押す手作業は、エンジニアリングにおける最大の「負債」となる。
本稿では、UIコンポーネントを単なる画像としてではなく、CI/CDパイプラインの一部として扱うための、極限まで最適化されたエクスポート戦略を伝授する。
—
1. 命名規則の深淵：サフィックスとトークンの自動化
多くのチームが混乱するのは、エクスポートの命名規則をデザイナとエンジニアの「暗黙の了解」に依存しているからだ。Figmaの「Export settings」のサフィックス機能は、単なるラベルではない。ビルドスクリプトのトリガーであるべきだ。
推奨命名スキーム
Figmaのエクスポート設定（`Suffix`）には以下の規則を強制せよ。
- iOS: `scale 2x` -> `@2x`, `scale 3x` -> `@3x`
- Android: `scale 1x` -> `drawable-mdpi/`, `scale 2x` -> `drawable-xhdpi/`
- Web: `scale 1x` -> `null` (無印), `format webp`
極意: Figma上で手動設定するのではなく、Figma API (REST API) を活用し、各レイヤーの名称を `[platform]/[category]/[name]` という構造で命名せよ。これにより、PythonやNode.jsのスクリプトで正規表現を用いてディレクトリへ自動振り分けが可能になる。
—
2. SVG最適化：レンダリングエンジンを欺くレイヤー構造
SVGの書き出しで「パスが崩れる」「予期せぬクリッピングマスクが発生する」のは、Figmaの内部表現とブラウザのレンダリングアルゴリズムの乖離によるものだ。
崩れを防ぐための「クリーンルーム」戦略
1. Flattenの強制: 複雑なパスやベクターネットワークは、エクスポート前に必ず `Flatten` (Cmd+E) を実行せよ。
2. グループのフラット化: 階層が深いグループは、エクスポート時にIDが複雑化し、CSSでの制御が困難になる。`[SVG名]` という単一グループに全パスを内包させること。
3. 座標の整数化: ピクセル値が小数（例: `10.45px`）の場合、SVGコード内でサブピクセルレンダリングが発生する。Figmaのプラグイン等で全座標を整数（Integer）へ丸める前処理を自動化パイプラインに組み込め。
—
3. DevOpsのための自動化パイプライン：Figma API + CLI
手動のエクスポートは、ヒューマンエラーの温床だ。私はプロダクト開発において、Figmaを「ヘッドレスCMS」のように扱い、CI上でアセットを生成する仕組みを構築している。
実践スクリプト：Node.jsによる一括取得
以下のスクリプトは、Figma APIを叩き、指定したコンポーネントを最適化してローカルに書き出す雛形だ。
/
- Figma API経由でのアセット取得パイプライン
- 必要な環境変数: FIGMA_TOKEN, FILE_KEY
/
const axios = require(‘axios’);
const fs = require(‘fs’);
async function downloadAssets(nodeIds) {
// 1. エクスポート設定に基づいて画像URLを取得
const { data } = await axios.get(`https://api.figma.com/v1/images/${FILE_KEY}?ids=${nodeIds.join(‘,’)}&format=svg`, {
headers: { ‘X-Figma-Token’: process.env.FIGMA_TOKEN }
});
// 2. URLからバイナリを取得し、ファイルシステムへ展開
for (const [id, url] of Object.entries(data.images)) {
const response = await axios.get(url, { responseType: ‘stream’ });
const writer = fs.createWriteStream(`./assets/${id}.svg`);
response.data.pipe(writer);
// ここでsvgo等の最適化ライブラリをパイプラインに挿入するのが定石
console.log(`Successfully exported: ${id}`);
}
}
—
4. トラブル回避の極限ハック
- メモリ消費への対策: 巨大なFigmaファイルから数千個のアセットを一括エクスポートすると、ブラウザのメモリ制限に抵触する。必ず「ページ単位」あるいは「フレーム単位」でAPIを分割して叩け。
- デザインシステムとの同期: エクスポート設定は `Figma Variables` や `Auto Layout` と密接に関係する。エクスポート時の命名は、コード側のコンポーネントライブラリの `props` と完全に一致させること。これがズレると、エンジニアは一生手動で名前をリネームし続けることになる。
- WebPの圧縮品質: Figma標準のエクスポートは圧縮効率が甘い。ビルドプロセス中に `imagemin` や `sharp` を通し、WebPの画質をプロジェクトの要件に合わせて動的に再エンコードするステップを必ず構築せよ。
最後に：デザイナーとエンジニアの「言語」を統一する
真のUI/UXエンジニアリングとは、ツールを使いこなすことではなく、ツールを使って「人間による操作」を排除することにある。
Figmaは単なるデザインツールではない。それは、プロダクトの仕様が記述された「ソースコード」の一種である。エクスポートという極めて単純なプロセスにこそ、我々が追求すべき自動化の真髄と、プロダクトの品質を左右する繊細な構造が宿っている。
さあ、今すぐ「Exportボタン」を押すのをやめ、スクリプトを走らせる準備を始めろ。それが、伝説的なプロダクトを創り出すための第一歩だ。