ゲームUIのボタンやダイアログ枠は、解像度が変わっても角だけ伸びてほしいパーツが多いです。私はWeb案件の合間に小さなゲームUIを触ることがありますが、Figma Unity 9スライスの話は「PNGを書き出してUnityにドラッグ」だけだと、端がにじんだり、Retinaと実機で太さが変わったりして手戻りになりがちです。Figma側でスライス線を決め、UnityのSprite Editorで同じ境界を再現する流れを一度型にしておくと、実装担当とのすり合わせが短くなります。
この記事でわかること
- Figmaで9スライス（スケール可能な枠）を設定してPNGを書き出す手順
- Unity 2022以降のSprite Editorで境界を合わせるときの確認ポイント
- フリーランス向けに、クライアントへ渡すチェックリストとファイル命名
先に結論
- 向いている人: FigmaでゲームUIを作り、Unity（uGUI / UI ToolkitのImage）に載せるディレクター兼デザイナー。ボタン・モーダル・インベントリ枠など「角は固定・中央だけ伸びる」部品が多い案件
- 向いていない人: 全部ベクターでUI ToolkitのUSSだけで完結させる案件。9スライスよりSVGや9-patch相当のベクター設定の方が向くケースもあります
- 私のおすすめ: 書き出しは@2x PNGに統一し、Figmaのスライス値を1枚の仕様表（Googleスプレッドシートでも可）に書いてからUnityへ渡す
私は最初に「角の半径が同じボタン」を1つだけ通し、実機で押したときの縁のにじみを見てから量産します。
この記事には、Google AdSense による広告およびアフィリエイトリンクが含まれる場合があります。紹介経由で購入や申し込みがあると、私に紹介料が入ることがあります。
Figmaをチームの正本にするなら、FigmaのDev Mode権限と、書き出し用のExport設定を先に揃えてください。HUD全体のAuto Layoutの話はAuto LayoutでHUDを渡す手順に、制作フローの入口は制作フローの柱を参照すると、この9スライス手順がどこに挟まるか分かりやすいです。
9スライスを使う場面と使わない場面
| パーツ | 9スライス向き | 理由 |
|---|---|---|
| 角丸ボタン・タブ | 向く | 文言長さに応じて横幅だけ伸ばせる |
| ダイアログ背景 | 向く | 解像度差で中央を引き伸ばしやすい |
| アイコン単体 | 向かない | 1:1固定。通常のSpriteで十分 |
| フルスクリーン背景 | 向かない | 9分割より単一テクスチャやタイルの方が軽い |
| 細いプログレスバー | 条件付き | 端キャップ＋中央リピートなら9スライス可 |
Unity側では、ImageコンポーネントのImage Type: Sliced（旧uGUI）またはSprite EditorのBorder値が、Figmaのスライス線と一致している必要があります。ここが1pxずれるだけで、角のグラデーションが段差に見えることがあります。
Figma側の準備（フレームとスライス）
- ボタンやパネルを1つのフレームにまとめ、装飾（影・ハイライト）まで含めるか、実装で別レイヤーにするかを先に決める
- フレーム右クリック → Copy/Paste as → Copy as PNG ではなく、Export設定で書き出す（後述）
- FigmaのSliceツール（ショートカット
S）で、9分割の境界線を置く - 角丸がある場合、スライス線は角の曲率が始まる手前に置く（曲率の中を切るとにじむ）
スライス線の目安は次のとおりです。
- 左右の線: 左右の角丸＋固定装飾の幅（例: 24px @1x）
- 上下の線: 上下の固定帯（例: 16px @1x）
- 中央: 残り全部が伸縮ゾーン
@2xで書き出す場合、Unityに渡す数値は@1x換算でBorderを書くか、@2xのままBorderを2倍で入力するかをチームで固定してください。私は「Figmaのスライス数値は@1x、UnityのPixels Per Unitと合わせて@2xテクスチャならBorder×2」とラベル付けしています。
数値の倍率ルールを決めないまま渡すと、実装側が毎回Sprite Editorを開き直すので、仕様表の1行目に倍率を必ず書きます。
書き出し設定（PNG・@2x）
FigmaのExportパネルで、次を確認します。
- 形式: PNG（アルファ付き。JPGは不可）
- 倍率: 2x（モバイル実機が多い案件では3xも候補。ただし9スライスは2xで十分なことが多い）
- ファイル名:
ui_btn_primary@2x.pngのように用途＋倍率 - Include “id” in exported filename はオフ（長くなりすぎるため）
- スライスを使う場合、スライスレイヤーにExport設定を付ける
影を含めるとBorderが太く見えるので、Drop shadowは別Spriteに分ける運用もあります。Dev Modeで実装者に値を見せる場合はDev Modeの制作現場手順も合わせて参照してください。
UnityへのインポートとSprite Editor
- ProjectにPNGをドラッグ
- Inspectorで Texture Type: Sprite (2D and UI)、Sprite Mode: Single
- Pixels Per Unit をプロジェクト既定（例: 100）に合わせる
- Sprite Editor → Border に L / T / R / B を入力（Figmaスライスと同じルール）
- シーン上のImageで Image Type: Sliced、Fill Center のオンオフをデザインに合わせる
プレビューで枠をドラッグして伸ばし、角が潰れないか、中央の模様がリピートしていないかを確認します。テキストを長くしたボタンで試すと、実装前に気づけることが多いです。
Horizontal Layout Groupを併用する場合は、Preferred Width を「最小幅」列の数値と揃え、Layout Elementで伸縮優先度を付けると、多言語化したときのはみ出しが減ります。私は日本語の最大文字数を先に決め、その長さのダミーテキストをFigmaに置いてからスライス線を引いています。
Unity側でFont Assetを差し替える案件では、ボタンの最小サイズをフォント変更前に固定しておくと、9スライスだけ直し直す羽目になりにくいです。
価格・Unityのバージョン表記は執筆時点の情報です。LTSのメジャー差でSprite EditorのUIが変わる場合があります。
実装渡し用チェックリスト（そのまま渡せる）
クライアントやコーダーに渡すとき、私は次の表をPDFまたはスプレッドシートで添付します。
| チェック | 内容 | OK |
|---|---|---|
| 命名 | @2x と用途がファイル名に入っている |
□ |
| 倍率ルール | Border数値が@1x基準か@2x基準か明記 | □ |
| スライス | Figmaスクリーンショット＋L/T/R/B数値 | □ |
| 影 | 本体PNGに含めるか別Spriteか | □ |
| 最小サイズ | ボタンの最小幅・高さ（px） | □ |
| 禁止 | 9スライスしないアイコン一覧 | □ |
「今日やること」として、進行中案件から角丸ボタン1つを選び、上表の6行を埋めてからFigmaでExport → UnityでSliced表示まで通してください。1本通れば、同型のタブやダイアログ枠はコピーで量産できます。
よくある失敗（先に潰す）
- スライス線を目視だけで合わせた … UnityプレビューとFigmaを並べ、L/T/R/Bを数値で記録する
- @2x PNGなのにBorderを@1xのまま入力した … 仕様表の倍率行を先に埋める
- 影を本体に焼き込んだ … 押下状態の9スライスと影の二重管理になる。影は別Spriteが無難
よくある質問
Q. 角だけぼやけて見えるのはなぜですか？
A. スライス線が角丸の曲率の中に入っていることが多いです。線を外側に1〜2px移し、@2x書き出しならBorderも同じ比率で直します。Figma上で1pxずつ動かしてUnityプレビューを並べて見るのが早いです。
Q. テキストが長いとボタンからはみ出します
A. 9スライスは見た目の枠だけ伸びます。PaddingはUnity側のHorizontal Layout GroupやContent Size Fitterで別管理です。デザイン段階で最小幅を仕様表に書いておくと揉めにくいです。
Q. FigmaのSliceとExportが grayed out になります
A. 親フレームにClip contentやマスクがかかっている、またはインスタンスの深いネストでExport対象が選べないケースがあります。書き出し用にDetachした複製フレームを1ページ用意する運用が安全です。
Q. UI Toolkitだけの案件でもPNG9スライスは使いますか？
A. USSのborder-image相当や9-slice対応は案件次第です。uGUI資産が残っているハイブリッド案件ではPNG9スライスがまだ現場で使われます。全部Toolkitなら、ベクターアセットの方針を別途決めた方がよいです。
まとめ
Figma Unity 9スライスは、スライス線の位置と倍率ルールを先に決めてからPNGを書き出すのが肝です。Auto LayoutでHUDの骨格を整え、角だけ伸びる部品を9スライスで渡すと、実装の手戻りが減ります。
今日やること（チェック項目）
- 角丸ボタン1つを選び、FigmaでSliceの L/T/R/B をメモする
@2xPNGをExportし、UnityでBorderを入力してSlicedプレビューする- 仕様表の6行（命名・倍率・スライス・影・最小サイズ・禁止一覧）を1行以上埋める
- 問題なければ同型パーツを2つ目まで複製し、命名規則が崩れないか確認する
UI全体の渡し方はAuto Layout HUD手順と制作フロー入口もあわせて見てください。Figmaの契約プランはFigmaから確認できます。
