【実務・中級編】Figmaの「Export」設定を極める！Web・iOS・Android向けアセット一括書き出しの最適解とトラブル回避策 – UI/UX・デザインツール活用バイブル

Figmaの「Export」を極める。プロダクトの品質と開発速度を決定づける、アセット書き出しの最終回答

UI/UXデザイナーとエンジニアの境界線において、最も摩擦が起きやすく、かつプロダクトのパフォーマンスに直結するのが「アセットの書き出し（Export）」だ。

多くのデザイナーは、デザインが完成したことに満足し、エクスポート設定をデフォルトのまま放置してエンジニアに丸投げしてしまう。しかし、それでは不十分だ。エンジニアが受け取るアセットに余計な余白があったり、SVGのパスが汚かったり、ファイル名の命名規則がバラバラだったりすれば、それはそのまま「負債」としてコードベースに蓄積される。

本稿では、世界レベルのプロダクト開発現場で標準となっている、FigmaのExport設定の極限の最適解を伝授する。

—

1. 密度とフォーマットの最適解：Web・iOS・Androidを制する命名規則

各プラットフォームに最適な解像度とフォーマットを、手動で設定するのは時間の無駄だ。まずは、プラットフォームごとの「物理的な正解」を脳に刻んでほしい。

Web向け：WebPを標準に、SVGを最小に

Web開発において、PNG/JPGはもはやレガシーだ。モダンなブラウザ対応が前提なら、WebPを積極的に活用すべきである。

  • 命名規則: `icon/settings_24.svg`（スラッシュ区切りでフォルダ階層化）
  • SVG: ベクター素材は原則SVG。後述する「レイヤー整理」が必須。
  • ビットマップ: `1x` と `2x` を用意。WebPで書き出すことで、高画質と軽量化を両立する。

iOS/Android向け：サフィックスの自動化

モバイルアプリでは、画面密度に応じた複数のアセットが必要だ。Figmaのサフィックス（接尾辞）機能を使い倒せ。

  • iOS: `@2x`, `@3x`（1xは今のデバイススペックではほぼ不要だが、プロジェクト方針による）
  • Android: `ldpi`, `mdpi`, `hdpi`, `xhdpi`, `xxhdpi`, `xxxhdpi`
  • Pro Tip: Androidの場合、Figma標準のサフィックス設定よりも、Android Resource Export 系のプラグインを使い、`drawable-xhdpi/` のようなディレクトリ構造で書き出すのが開発者フレンドリーだ。

—

2. SVG書き出しの真髄：パスの乱れと「ゴミ」を排除する

エンジニアがSVGをコードに埋め込む際、最も嫌がるのが「不要なグループ化（``タグのネスト）」と「絶対座標のズレ」だ。

境界線（Bounding Box）の統一

アイコンを書き出す際、可視パーツのサイズだけで書き出してはいけない。

  • 鉄則: 必ず 24×24 や 32×32 といった固定サイズの透明な「Base Frame」の中に配置すること。
  • これにより、エンジニアがCSSやSwiftUIでサイズを指定する際、アイコンごとに余白を微調整する必要がなくなる。

ベクターネットワークのクリーンアップ

FigmaのSVGエクスポートを美しくするための3ステップ：
1. Outline Stroke (`Cmd + Shift + O`): 線を塗りに変換する。ブラウザやOSによる線のレンダリング差異を防ぐ。
2. Flatten (`Cmd + E`): 複雑なレイヤー構造を1つのパスに統合する。
3. Boolean Groupsの確定: UnionやSubtractの状態のままにせず、必ずFlattenして単一のパスデータにする。

—

3. 開発効率を爆上げする「神ショートカット」と「プラグイン」

プロの現場でマウスをカチカチやってエクスポート設定をいじるのは、三流の仕事だ。

隠れたキーボードショートカット

  • `Cmd + Shift + C` (Copy as PNG): エクスポート設定を無視して、現在の選択範囲を即座にクリップボードにPNGとしてコピーする。Slackでのクイックな共有に最適。
  • `Cmd + /` → “Export”: エクスポートパネルを即座に開く、あるいはエクスポートを実行する。

導入必須の神プラグイン

1. Export Styles to CSS/JSON: デザインシステムを構築しているなら必須。色やタイポグラフィをコードとして書き出す。
2. Svgo: SVG書き出し時に、メタデータや不要な属性を削除して極限まで軽量化する。
3. Magicul: デザインファイルをコード（React/Flutter等）へ変換する際の精度が非常に高い。

—

4. チーム開発における「設定の共有化」とオートメーション

「デザイナーが手動で書き出す」という工程自体が、実は最大のリスクだ。最新のデザインと実装のアセットが乖離する原因になるからだ。

Figma REST API + GitHub Actions による自動化

モダンな開発チームでは、FigmaのアセットをCI/CDパイプラインに組み込む。
以下は、Figmaからアセットを自動取得するための設定ファイル（JSON）の構成例だ。

{
“figmaPersonalToken”: “env.FIGMA_TOKEN”,
“fileId”: “AbCdEfG123456”,
“items”: [
{
“nodeId”: “10:124”,
“format”: “svg”,
“output”: “./assets/icons/ic_settings.svg”,
“optimize”: true
},
{
“nodeId”: “10:250”,
“format”: “webp”,
“scale”: 2,
“output”: “./assets/images/hero_banner@2x.webp”
}
],
“config”: {
“svgo”: {
“plugins”: [
{ “removeViewBox”: false },
{ “cleanupIDs”: true }
]
}
}
}

このように、Node IDを指定して構成管理することで、デザイナーがFigma上でアイコンを更新し、GitHubにPush（またはWebhook発火）するだけで、最新のアセットが自動的にリポジトリに反映される。

—

5. テックリードからのアドバイス：アセットは「対話」である

エクスポート設定は、単なるファイルの出力ではない。それはエンジニアに対する「この通りに実装してくれ」という最終的な仕様書だ。

  • 命名規則を揃えよ: `img_hero_mobile` なのか `heroImageMobile` なのか。プロジェクトの命名規則（Snake case / Camel case）をエンジニアと合意し、Figmaのレイヤー名に反映させよ。
  • 「Include “Export” settings」にチェックを入れよ: コンポーネントをライブラリ化している場合、このチェックを忘れると、インスタンス側でエクスポート設定が引き継がれない。

FigmaのExportを極めることは、デザインの美しさを損なうことなく、最速でユーザーの元へプロダクトを届けるための最短ルートだ。

今日から、ただ「書き出す」のをやめよう。「エンジニアがそのまま使えるコード」を書き出すという意識を持つだけで、チームの生産性は劇的に変わるはずだ。

スポンサーリンク
タイトルとURLをコピーしました