グラフィックデザイン · COURSE
Figma 連携で書き出し自動化
Figma の最新デザインを命名規則どおりに自動書き出し、開発者に渡す。
audience
グラフィックデザイン部・フロントエンドとの橋渡し
duration
60分
lessons
5 章
reviewed
2026.05
先に読むとよい
達成目安
全 5 レッスンを読み、コース完了マークを付ける
未完了
クイズ 3 問に挑戦し、正答率 80% 以上
未挑戦
コース構成
このコースで学ぶこと
- 01
Figma → 書き出し → 命名 → 共有の負担
デザイン更新のたびに『書き出し・命名・Slack 共有・GitHub への配置』が発生。AI で自動化できる。
Figma で完成したデザインを開発者に渡すまでに、毎回同じ作業が発生します：書き出し設定（@1x @2x @3x、SVG）→ 命名規則（kebab-case で project-page-element_state）→ 圧縮（tinypng）→ 開発リポジトリの assets/ に配置 → Slack で通知。
Claude Code に Figma MCP を繋ぎ、上記をワンコマンドで自動化できます。
- 02
Figma MCP のセットアップ
公式の Figma MCP（dev mode）を `.mcp.json` に登録。
json{ "mcpServers": { "figma": { "transport": "http", "url": "https://mcp.figma.com/v1", "auth": { "type": "oauth", "callbackPort": 9876, "scopes": ["file:read", "design:export"] } } } }.mcp.json - 03
書き出しのワークフロー
プロジェクト ID とフレーム名を指定 → 各種解像度で書き出し → 命名規則で保存。
text> Figma プロジェクト ID: ABC123 のフレーム『hero-section-final』を書き出し。 ## 手順 1. Figma MCP で該当フレームのメタデータ取得 2. 以下の形式で書き出し: - @1x.png / @2x.png / @3x.png - SVG（ベクター部分） - WebP（最適化） 3. 命名: `<project>-<page>-<element>_<state>@<resolution>.<ext>` 例: `spring2026-lp-hero_default@2x.png` 4. assets/web/2026-spring/ に配置 5. Slack #design-handoff に通知メッセージドラフト ## ルール - 既存ファイルがある場合は v ナンバーをインクリメント - backup/ に旧版を退避 - 解像度・サイズ・容量を Slack 通知に含める出力イメージClaude の返答（書き出し結果・要約）assets/web/2026-spring/ に 5 ファイルを書き出しました。 spring2026-lp-hero_default@1x.png (84 KB) spring2026-lp-hero_default@2x.png (218 KB) spring2026-lp-hero_default@3x.png (412 KB) spring2026-lp-hero_default.svg (12 KB) spring2026-lp-hero_default.webp (96 KB) 旧版 1 件を backup/ に退避しました。 --- Slack #design-handoff 通知ドラフト --- ヒーローセクションを更新しました（@1x/@2x/@3x + SVG + WebP）。 パス: assets/web/2026-spring/ ／ 合計 822 KB
- 04
バリエーション展開
1 つのデザインから、ライト/ダーク、複数言語、A/B 案などを一括書き出し。
text> hero-section の以下バリエーションを一括書き出し: ## バリエーション軸 - テーマ: light / dark（2 通り） - 言語: ja / en（2 通り） - A/B: 案 A / 案 B（2 通り） → 計 8 通り ## 命名 hero_<theme>_<lang>_<variant>@2x.png 例: hero_light_ja_a@2x.png ## 並列処理 8 通りを並列で書き出し（Figma API のレート制限内で） - 05
Skill 化と開発者との連携 SOP
`/figma-export <frame-name>` で日常運用。開発者には Slack 通知 + PR URL 自動生成も。
MCP 完全版手を動かす
0 / 5
理解度チェック
Q1.Figma 連携で書き出し自動化を継続運用するうえで、デザインと開発の摩擦を減らすコツは？
Q2.Figma 書き出し自動化パイプラインの主目的はどれか？
Q3.Figma の未発表案件のフレームを自動書き出し対象にする際、注意すべきセキュリティ事項は？