Claude + Figma MCP Design System — 06 分子層：原子の組み合わせ

原作者：Ugur Anlak

オリジナルソース：https://www.youtube.com/embed/Xa-CFXhn1Ok

Claude + Figma MCP デザイン システム シリーズのこのパートでは、Atomic Design アプローチの最も重要なブレーク ポイントである分子レイヤーに進みます。前のセクションでは、ボタン、入力、バッジ、アバターなどのアトムを構築しましたが、それらだけでは意味がありません。このビデオでは、次のことを明確にします。 👉 本当のシステムは、原子が集まったときに始まります。だからこそ、私は理論だけを話しているわけではありません。フォーム フィールド 統計カード トランザクション アイテム検索バー ナビゲーション タブ アイテム カード コンテナなどの反復的な UI パターンを通じて、実際の製品システム (Finwise) を通じて分子層を分解して検査します。また、これらの構造が Figma でどのように設定されるか、トークン システムにどのように接続されるか、バリアントおよびブール ロジックがどのように機能するか、インスタンス スワップでどのようにスケールされるか、およびクロード + MCP でどのように生成可能になるかについても、段階的に説明します。この時点で、デザイン システムは単なる UI ライブラリではなくなりました。 👉 AI + デザイナー + 開発者の間の共通言語になります。 ⚙️ このビデオは誰に向けていますか?デザインシステムを確立するUI/UXおよびプロダクトデザイナー、Figma変数とトークンアーキテクチャを扱う人、Claude + MCPでAI支援デザインを作成する人、コンポーネントアーキテクチャとアトミックデザインを深めたい人 🔗 シリーズ00の他のエピソード - MCP Connection https://www.youtube.com/watch?v=Yzle-29HIHs&list=PLlAo6K4__ybEDpI0Y17YUOd3jXVBMs4cK&index=5 01 — タイポグラフィhttps://www.youtube.com/watch?v=8F1ek50u2U4&list=PLlAo6K4__ybEDpI0Y17YUOd3jXVBMs4cK&index=4 02 — カラートークンhttps://www.youtube.com/watch?v=h_9_byPiJ3I&list=PLlAo6K4__ybEDpI0Y17YUOd3jXVBMs4cK&index=3 03 — 間隔と境界線の半径https://www.youtube.com/watch?v=y9gaFZ8yHjk&list=PLlAo6K4__ybEDpI0Y17YUOd3jXVBMs4cK&index=2 04 — アイコン システム アーキテクチャhttps://www.youtube.com/watch?v=GlQnhqJp9gI&list=PLlAo6K4__ybEDpI0Y17YUOd3jXVBMs4cK 05 — アトミック レイヤー (フォーム コンポーネント) 👉 このエピソードの基礎となります — 必ずご覧ください。 https://youtu.be/Dd6VfiQqxc8 🚀 詳細 このシリーズでは、実際の生産シナリオを通じて AI ネイティブ設計システムの導入について説明していきます。プレゼンテーション (デッキ): https://www.figma.com/deck/m7ryk4AOu33HSW5OCZFrxA ドリブル: https://dribbble.com/uguranlak 🧠 注目のコンセプト アトミック デザイン 分子層 コンポーネント アーキテクチャ デザイン トークン Figma 変数 バリアント システム ブール プロパティ インスタンス スワップ AI ネイティブ デザイン クロード MCP 🔥 ハッシュタグ #designsystem #figma #uidesign #uxdesign #productdesign #aidesign #figmamcp #designarchitecture #designtokens #componentdesign