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

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

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

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

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

境界とは

デザイナー Figma

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

AskUserQuestionの例

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

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

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

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

融けた境界

計画デザイナー設計開発

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

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

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

今日の常識が明日には変わるカオスな時代

Thank you for listening!

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

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

More Decks by littlebusters

Other Decks in Design

Featured

Transcript