Figmaの「Export」を制する者は、プロダクト開発の速度を制する。
やあ。今日はFigmaの「Export」機能について話をしよう。
UIデザインの現場で、エンジニアから「このアイコン、パスが壊れてるよ」「アセットの命名規則がバラバラでマージできない」と泣きつかれた経験はないかな？あるいは、自分で書き出したPNGがぼやけていて、何度もやり直した経験があるかもしれない。
デザインツールとしてのFigmaは素晴らしいが、「エンジニアがそのまま使える資産（アセット）として書き出す」という最後の工程こそ、プロダクトの品質と開発効率を分かつ最も重要な境界線だ。
今日は、プロの現場で必須とされる「一括書き出しの最適解」と、誰もが一度はハマるトラブルを回避する極意を伝授しよう。これをマスターすれば、君の作業時間は半分になり、エンジニアからの信頼は倍になるはずだ。
—
1. 命名規則の黄金律：サフィックスで「迷い」を消す
エンジニアが最も嫌うのは「どれがどの解像度の画像か」を推測することだ。FigmaのExport設定にある「Suffix（接尾辞）」を駆使して、誰が見ても一目で分かる仕組みを作ろう。
推奨される命名規則
プロジェクト全体で統一すべきルールは以下の通りだ。
- iOS: `name@2x.png`, `name@3x.png`
- Android:
- `drawable-mdpi/name.png` (1x)
- `drawable-hdpi/name.png` (1.5x)
- `drawable-xhdpi/name.png` (2x)
- `drawable-xxhdpi/name.png` (3x)
- Web: `name.svg`, `name.webp`
ここでプロの裏技：
FigmaのExport設定で、カンマ区切りで複数の設定を登録できることを知っているかな？
例えば、`2x, 3x, webp` と入力するだけで、ボタン一つでこれら全てが生成される。この「一括生成」こそが、修正時のミスを防ぐ最強の防波堤だ。
—
2. SVG書き出しの罠：レイヤー構造を「整理」せよ
SVGの書き出しで「パスが乱れる」「影やグラデーションが消える」といったトラブルは、9割が「レイヤー構造の未整理」に起因する。
トラブルを防ぐ3つの鉄則
1. 「Flatten」の勇気を持つ:
複雑なパスは `Cmd + E` で統合（Flatten）しておこう。レイヤーが階層化されすぎていると、ブラウザやライブラリによって解釈が異なり、描画崩れを起こす原因になる。
2. グループ化を最小限にする:
無意味なグループ（`Group 1`, `Group 2`など）は、書き出し時に冗長な `
3. 「Outline Stroke」の徹底:
線（Stroke）をそのまま書き出すと、拡大縮小で線の太さが変わってしまう。必ず `Shift + Cmd + O` でアウトライン化してから書き出すこと。これはSVGを「図形」として固定するための必須儀式だ。
—
3. 開発者へのハンドオフ：究極のワークフロー
デザインデータは、エンジニアに渡した時点で「生き物」になる。以下の設定をプロジェクトのベースとして仕込んでおこう。
開発者に感謝されるセットアップ
- コンポーネントごとのExport設定:
フレームごとではなく、コンポーネントそのものにExport設定を埋め込んでおこう。これならエンジニアは、君の編集作業を待たずに、いつでも最新の素材をDLできる。
- 命名のプレフィックス活用:
`icon/home`, `icon/user` のように、`/`（スラッシュ）を使って命名すると、Figmaは自動的にフォルダ分けしてくれる。これを活用して、アセットを構造化するんだ。
HelloWorld的な動作確認
初めてこのワークフローを導入するなら、まずは小さな「アイコンコンポーネント」で試してほしい。
1. アイコンを選択する。
2. 右下の「Export」パネルで、`PNG`（2x, 3x）と `SVG` を登録する。
3. 「Export」ボタンを押し、フォルダを確認する。
4. SVGをエディタ（VS Code等）で開き、不要な `
もし問題があれば、それはFigmaのせいではなく、レイヤー構造の乱れだ。整理して書き出す、これの繰り返しが「美しいプロダクト」を支える。
—
最後に：デザイナーとエンジニアは「同じもの」を見ている
デザインとは単なる「見た目」ではない。「どう実装されるか」までを設計することだ。
今日紹介した設定は、最初は面倒に感じるかもしれない。だが、一度この「型」を身につけてしまえば、エンジニアとのコミュニケーションコストは劇的に下がり、君は「デザインの本質的な改善」に集中できるはずだ。
Figmaはただのドローソフトじゃない。チームの生産性を最大化するための「プラットフォーム」だ。ぜひ、明日の作業から一つずつ取り入れてみてほしい。
もし何かわからないことがあれば、いつでも聞いてくれ。君のプロダクトが、世界中で愛されるものになることを応援しているよ。