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

by littlebusters

Embed

Start on current slide

Slide 1

Slide 1 text

Claude Codeセミナーデザイン編デザインとフロントエンドの境界が融ける Claude Code Figma 2026.4.21 Tue. クラスメソッド株式会社製造ビジネステクノロジー部　クボキヒロシ

Slide 2

Slide 2 text

自己紹介クボキヒロシ製造ビジネステクノロジー部デザイナー 2019年6月入社（classmethod ← SIer ← デザイン事務所×2 ← 印刷会社）資格 AWS AI プラクティショナー IPA 基本情報技術者、 IPA 応用情報技術者、  IPA 旧情報セキュリティスペシャリスト、レタリング検定 4 級趣味 🎮 ビデオゲーム（ソウルボーン・ソウルライク・メトロイドヴァニア） 🛠️ いろいろDIY

Slide 3

Slide 3 text

今日の前提受託開発の中で試してきたことを元にお伝えします一つの考え方として聞いてもらえると嬉しいです話さないこと MCP設定など細かい話はしません Claude Designにはほぼ触れません

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

境界とは

Slide 6

Slide 6 text

デザイナー Figma

Slide 7

Slide 7 text

デザイナー極論、 UIデザインをつくる係

Slide 8

Slide 8 text

計画 UIデザインが終わったら実装はお任せ設計開発エンジニアにお任せ

Slide 9

Slide 9 text

実装まで自らすることは、ほぼない

Slide 10

Slide 10 text

Figma デザインの “正” の置き場所 (Single Source of Truth, SSoT)

Slide 11

Slide 11 text

要件整理 IA ⋮ プロジェクトが進むと実装との乖離が進む簡単な修正を直接適用実装都合でUI調整考慮漏れを実装でカバー実装都合でUI調整

Slide 12

Slide 12 text

デザインと実装の境界にある共通言語だが、一方通行になることが多く、正しさから乖離しがち

Slide 13

Slide 13 text

この2カ月で大きな2つの変化

Slide 14

Slide 14 text

Code to Canvas Claude Code to Figma Write to Canvas Figma MCP: use_figma

Slide 15

Slide 15 text

Code to Canvas コードから構造を持ったFigmaへ変換

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Write to Canvas Claude CodeからFigmaを編集できるようになった

Slide 18

Slide 18 text

つまりコードとデザインを往来できるようになった

Slide 19

Slide 19 text

Code to Canvas 事前にFigma Pluginのインストールを推奨 https://claude.com/plugins/figma

Slide 20

Slide 20 text

開発環境がローカルで実行できるなら＞開発サーバーを立ち上げて、  Figmaキャプチャを実行できるようにして＞ ${URL} をFigmaキャプチャして送って

Slide 21

Slide 21 text

開発環境が使えない？ Playwrightで解決

Slide 22

Slide 22 text

ブラウザで表示さえできれば  どんなページでもFigmaへ変換できる公式でプラグイン配布しているのでインストールも簡単  https://claude.com/plugins/playwright

Slide 23

Slide 23 text

PlaywrightならこれでOK ＞ ${URL} をFigmaに送って ${FigmaURL}

Slide 24

Slide 24 text

ただしブラウザにレンダリングされた結果を変換しているため  いろいろな情報が抜け落ちる

Slide 25

Slide 25 text

レイアウトやコンポーネントレイアウトフリー Checkbox Button バリアブル gap-1.5 p-4 neutral-900 neutral-950 neutral-50

Slide 26

Slide 26 text

抜け落ちた情報をどうするか？ Write to Canvas

Slide 27

Slide 27 text

コンポーネントやバリアブルなど、置き換えてもらう＞ ${FigmaURL} にデザインシステムを適用して

Slide 28

Slide 28 text

“デザインシステム”といっても  キッチリしたものではなく  Figmaで適切なコンポーネント化、  値のバリアブル化ができていればOK もちろんデザインシステムが整理されているほどよい

Slide 29

Slide 29 text

Write to CanvasはリモートMCPのため  ローカルフォントが使われていると編集できない（Proプランだと） Webフォントを使うコンポーネントの探索＆使い方の試行錯誤をするため非常に時間がかかるコンポーネントの索引を作成しておくとベター

Slide 30

Slide 30 text

Code to Canvasで持ってきたオブジェクトではなく  元々のFigmaを変更したいんだが？

Slide 31

Slide 31 text

比較して編集してもらう＞ AとBを比較して差分をAのFigmaに適用して A = 元のFigmaオブジェクトのURL  B = Code to Canvasで持ってきたオブジェクトのURL

Slide 32

Slide 32 text

編集する / しないを選択したい AskUserQuestionを使ってもらうどこを編集したのかわからなくなる上書き・複製・作業場所などの指示は明確に

Slide 33

Slide 33 text

細かく指示するなら＞ AとBを比較して差分をAのFigmaに適用して  AskUserQuestionで修正するかどうか聞いて  hogeセクションにAを複製して作業して

Slide 34

Slide 34 text

AskUserQuestionの例

Slide 35

Slide 35 text

ここから少し踏み込む話開発環境を触れるデザイナー向け難しければいつも通りでOK

Slide 36

Slide 36 text

コードとデザインを往来するということはスタイリングの修正をコードへ反映していく以前より格段にハードルは下がっている

Slide 37

Slide 37 text

これでOK ＞ ${FigmaURL} を元にhogeのリストアイテムの  スタイルをコードに反映してください

Slide 38

Slide 38 text

すでに生成AIを使って実装しているならルールやスキルの整備＆既存コードがあるため、  おかしなコードが生成されることは少ないやる気があれば、多分エンジニアさんが優しく教えてくれるはず

Slide 39

Slide 39 text

融けた境界

Slide 40

Slide 40 text

計画デザイナー設計開発

Slide 41

Slide 41 text

これまで以上に “秩序” をつくって守る存在へつくることそのものの価値は下がって、  いわゆる上流へシフト実装側にも一歩踏み込んだ貢献ができる  （優先順位が落ちがちなスタイリングの微調整など）

Slide 42

Slide 42 text

Figma デザインシステム UIデザイン実装

Slide 43

Slide 43 text

AIとのインターフェース化最終成果物をつくる場所ではなく  AIへ意図を伝える存在へ画面の量産をする場所ではなく  デザインシステムを整える存在へ