Claude Code to Figmaを試して、UI/UXデザイナーの役割について考えたこと｜ミテ

Claude Codeが目まぐるしいですね…！ 今回はClaude Code to Figmaによるデザイン制作をしてみての感想や今後のUI/UXデザイナーの役割を考えてみたいと思います。 Claude Code to Figmaでやったこと今回試したフローはざっくりこんな感じです。 セットアップ：Claude CodeにFigma MCPを接続する デザインシステムの用意：GoodpatchのSparkleをFigmaライブラリとして使用 Claudeで作成：要件を渡してReactコードを生成、Figmaに書き出し それぞれ詳しく書いていきます。 実際の手順セットアップセットアップはkenさんの以下のポストを参考にしました。非エンジニアにも丁寧に解説されているのでおすすめです。 大まかな流れはこうです。 Claude Codeデスクトップアプリをインストール ターミナルでClaude C

[rogertroutman]

デザイントークン（変数化）コンポーネント（再利用可能要素）オートレイアウト（flex, grid）が正しく使われてるFigmaだったら本当にコーダーの仕事なんか1/10くらいになるんですけどねえ（ため息）

[evergreeen]

それ以前にFigma makeだけでこれぐらいのUIならできちゃうよ。Geminiで対話しながら要件定義して、Figma make用にプロンプト書いてって指示してコピペするだけ。もう人間の役割を捻り出して自分に言い聞かせるしかない。怖い

[nguyen-oi]

AIでFigmaに書き出しとかデザイナーの仕事が完全に「指示役」にシフトしてて震えるな

[sh19910711]

"オートレイアウトが完全に再現されていたわけでもないし、Sparkleのコンポーネントに自動で置き換わったわけでもない。でも、それでいいんだと思いました。レビューや議論の場として使うなら、今の精度で十分"

[Futaro99]

なんかもう怖い

[lifeisadog]

この人のことは知らないけど「UI/UX」わセットで語る人たちってUIを「画面設計」と思い込んでるのがいつも引っかかってる

[himanahitodesukun]

現場、イテレーションスピードが遅すぎて検討では使い物にならんのだよね。コードとは違って完成は目指せない。あ、ゴミUIでOKなら話は別だしそれでいいときもあるね

[sadah]

“Goodpatch”

[furugenyo]

いわゆる設計という意味でのデザインが役割になるのかな

[morimarii]

個人用アプリ作ってるけどClaudcodeならfigmaを介す意味がほとんどなくて直接モック（ＨＴＭＬ）作ってくれる。そこで人間とデザインの詳細詰めて実装すれば……というかそもそも……（それ以上いけない）

[prjpn]

大事なのは、AIがデザインシステムと連携出来ること。

[ryoma_robo]

storybookでも良さそう

[denimn]

pptxエージェントを自分で作ってみてもそうなんだけUIを意味・感情としてよいものを作ろうとするとめちゃくちゃコンテキストが消費されるのよねー。

[somaria3]

入り口にも立てないオフィスとフォトショイラレしか使えんデザイナーが多すぎるんよ

[sai0ias]

今まさにAI駆動開発しやすいようにデザインシステムを構築してるところなんだが同じようなことを思った。今後は手を動かす人でなくルールを決められる人でないと厳しい。デザイナーに限らない気もするが。

[otihateten3510]

なんかゲーミングPCみたいなUI作るよねあのひとたち

[misshiki]

Claude Code＋Figma MCPで要件→React生成→Figma書き出しを検証。UIは8〜15分で生成。デザイン工程は「Figma設計→実装」から「AIコード→Figma確認」へ変化。UI/UXデザイナーは画面制作よりデザインルール設計へ役割シフト。

[FreeCatWork]

ふむふむ、AIさんがコードをくれるの？ボク、もっと可愛いデザイン考えてにゃ！