デザインとフロントエンドの境界が融ける Claude Code × Figma

Transcript

1. Claude Codeセミナー デザイン編 デザインとフロントエンドの境界が融ける Claude Code Figma 2026.4.21 Tue. クラスメソッド株式会社 製造ビジネステクノロジー部　クボキ ヒロシ
2. 自己紹介 クボキ ヒロシ 製造ビジネステクノロジー部 デザイナー 2019年6月入社（classmethod ← SIer ← デザイン事務所×2 ← 印刷会社） 資格 AWS AI プラクティショナー IPA 基本情報技術者、 IPA 応用情報技術者、
 IPA 旧情報セキュリティスペシャリスト、 レタリング検定 4 級 趣味 🎮 ビデオゲーム（ソウルボーン・ソウルライク・メトロイドヴァニア） 🛠️ いろいろDIY
3. 今日の前提 受託開発の中で試してきたことを元にお伝えします 一つの考え方として聞いてもらえると嬉しいです 話さないこと MCP設定など細かい話はしません Claude Designにはほぼ触れません
4. デザインとフロントエンドの境界が融ける Claude Code Figma
5. 境界とは
6. デザイナー Figma
7. デザイナー 極論、 UIデザインをつくる係
8. 計画 UIデザインが終わったら実装はお任せ 設計 開発 エンジニアにお任せ
9. 実装まで自らすることは、 ほぼない
10. Figma デザインの “正” の置き場所 (Single Source of Truth, SSoT)
11. 要件整理 IA ⋮ プロジェクトが進むと実装との乖離が進む 簡単な修正を直接適用 実装都合でUI調整 考慮漏れを実装でカバー 実装都合でUI調整
12. デザインと実装の境界にある共通言語だが、 一方通行になることが多く、 正しさから乖離しがち
13. この2カ月で大きな2つの変化
14. Code to Canvas Claude Code to Figma Write to Canvas Figma MCP: use_figma
15. Code to Canvas コー ドから構造を持ったFigmaへ変換
17. Write to Canvas Claude CodeからFigmaを編集でき るよ うになった
18. つまり コードとデザインを往来できるようになった
19. Code to Canvas 事前にFigma Pluginのイ ンス トールを推奨 https://claude.com/plugins/figma
20. 開発環境がローカルで実行できるなら ＞ 開発サーバーを立ち上げて、
 Figmaキャプチャを実行できるようにして ＞ ${URL} をFigmaキャプチャして送って
21. 開発環境が使えない？ Playwrightで解決
22. ブラウザで表示さ えできれば
 どんなページでもFigmaへ変換でき る 公式でプラグ イ ン配布し ているのでイ ンス トールも簡単
 https://claude.com/plugins/playwright
23. PlaywrightならこれでOK ＞ ${URL} をFigmaに送って ${FigmaURL}
24. ただし ブラウザにレンダリングされた結果を変換しているため
 いろいろな情報が抜け落ちる
25. レイアウ トやコンポーネント レイアウ トフリー Checkbox Button バリアブル gap-1.5 p-4 neutral-900 neutral-950 neutral-50
26. 抜け落ちた情報を ど う するか ？ Write to Canvas
27. コンポーネントやバリアブルなど、 置き換えてもらう ＞ ${FigmaURL} にデザインシステムを適用して
28. “デザインシステム”といっても
 キッチリしたものではなく
 Figmaで適切なコンポーネント化、
 値のバリアブル化ができていればOK もちろんデザインシステムが整理されているほどよい
29. Write to CanvasはリモートMCPのため
 ローカルフォントが使われていると編集できない （Proプランだと） Webフォントを使う コンポーネントの探索＆使い方の試行錯誤をするため 非常に時間がかかる コンポーネントの索引を作成しておくとベター
30. Code to Canvasで持ってきたオブジェクトではなく
 元々のFigmaを変更したいんだが？
31. 比較して編集してもらう ＞ AとBを比較して差分をAのFigmaに適用して A = 元のFigmaオブジェクトのURL
 B = Code to Canvasで持ってきたオブジェクトのURL
32. 編集する / しないを選択したい AskUserQuestionを使ってもらう どこを編集したのかわからなくなる 上書き ・複製・作業場所などの指示は明確に
33. 細かく指示するなら ＞ AとBを比較して差分をAのFigmaに適用して
 AskUserQuestionで修正するかどうか聞いて
 hogeセクションにAを複製して作業して
34. AskUserQuestionの例
35. ここから少し踏み込む話 開発環境を触れるデザイナー向け 難しければいつも通りでOK
36. コードとデザインを往来するということは スタイリングの修正をコードへ反映していく 以前より格段にハードルは下がっている
37. これでOK ＞ ${FigmaURL} を元にhogeのリストアイテムの
 スタイルをコードに反映してください
38. すでに生成AIを使って実装しているなら ルールやスキルの整備 ＆ 既存コードがあるため、
 おかしなコードが生成されることは少ない やる気があれば、 多分エンジニアさんが優しく教えてくれるはず
39. 融けた境界
40. 計画 デザイナー 設計 開発
41. これまで以上に “秩序” をつくって守る存在へ つくることそのものの価値は下がって、
 いわゆる上流へシフト 実装側にも一歩踏み込んだ貢献ができる
 （優先順位が落ちがちなスタイリングの微調整など）
42. Figma デザインシステム UIデザイン 実装
43. AIとのインターフェース化 最終成果物をつくる場所ではなく
 AIへ意図を伝える存在へ 画面の量産をする場所ではなく
 デザインシステムを整える存在へ
44. 今日の常識が明日には変わるカオスな時代
45. Thank you for listening!