詳細解説 Figma MCPは頼んだものだけを正確に作る — それ以上はない Edy SilvaとGabriel QuaresmаはClaude Codeを通じたFigma MCP 統合を実際に検証しました。最大の発見は「具体性がすべて」という点です。特定のFigmaノードを指定して既存コンポーネント（例：React/Tailwind製病院ダッシュボードのSidebar.jsx）を更新する場合は安定して動作しますが、ファイル全体への曖昧な指示では一貫性のない結果になります。Claudeはwireframeに示された内容を忠実に再現します。モバイル専用の390px フレームはモバイルのままで出力され、HTMLの単一ファイル要求は単一ファイルのままです。レスポンシブレイアウトやプロジェクトアーキテクチャを自律的に推論することはありません。デザインライブラリのマッピングは未解決の課題として残っており、Figmaスタータープランの月約6回のMCPリクエスト制限 は、反復的な習熟を妨げる実質的な障壁となっています。
Read Articlearrow_forward Video · ワークフロー 30:21
シニアデザイナー12人が見せるエンジニアリングへのハンドオフ工程 ホストのJay氏が、Figma 、Firefox、Slack、RAMP、Lattis、Intercom、Shopifyなどの主要プロダクトチームのシニアデザイナーにインタビューし、実際のFigma-to-engineeringハンドオフワークフローを公開します。共通パターンが浮かび上がります。design tokenの値にマッピングされたカスタムspacingアノテーションコンポーネント（例：size 100 = 8 dp）は、パディングの明示において、Figma標準のアノテーションツールより優れています。「ready for dev」フラグと専用specページにより、スケッチ作業と最終成果物が明確に分離されます。ストーリーボード形式のモーションシートは、散文的な説明の代わりにピクセル数値とキーフレームタイミングを直接定義します。最後のセクションでは、ShopifyとIntercomのデザイナーがAI支援環境で直接コーディングし、実際のGitHub PRと共有可能なブラウザリンクを生成する手法、つまりハンドオフをFigmaファイルのレビューではなくブランチforkへと転換した事例が紹介されます。
AI_INFOGRAPHICopen_in_full close WATCH_VIDEOarrow_forward Article · アクセシビリティ READ TIME: 10m
オーストラリアの三つの主要アクセシビリティ更新と2026年の組織への影響 2025年 にオーストラリアで三つ の重要な規制変更が施行され、グローバルな影響を与えています。オーストラリア人権委員会（AHRC）はWCAG 2.0 に代えてWCAG 2.2 Level AA を最低基準として採用しました。新たに追加されたLevel A/AAの6 基準には、フォーカスの非遮蔽（2.4.11）、ドラッグ操作（2.5.7）、最小ターゲットサイズ（2.5.8）、アクセシブル認証（3.3.8）、重複入力の排除（3.3.7）、一貫したヘルプ（3.2.6）が含まれます。AHRCはさらに、SaaS、AIツール、IoTデバイス、生体認証フローへとDDA（障害差別禁止法）の義務範囲を拡大しました 。また、デジタルトランスフォーメーション庁（DTA）の新しいDigital Experience Policyにより、2025年1月 以降、すべての政府サービスがDigital Service、Digital Inclusion、Digital Access、Digital Performanceの各基準を満たすことが義務付けられました。Dequeは、2026年 にEN標準が正式更新される際の二重対応作業を避けるため、EN 301 549 とWCAG 2.2 AAを同時に目標とすることを推奨しています。
READ_FULL_LOGarrow_forward Article · ガイド READ TIME: 9m
Design System導入のベストプラクティス Mary Achinger氏は、誰にも使われていないデザインシステムを実際に活用されるシステムへ転換するための体系的なプレイブックを提示し、すべての推奨事項を仮定ではなく現場調査に基づかせています。基礎フェーズではcontextual inquiry に注力します。スプリント計画やコードレビューを観察して、チームがコンポーネントをローカルにコピーしたり独自のサブシステムを構築している箇所を特定します。「token hacker」や「skeptical developer」といったペルソナは、その後の段階別オンボーディングや役割別ドキュメント設計に活用されます。Capability-to-complexityマトリクスにより、準備が整っていないチームへの過剰なエンジニアリングを防止します。NetguruのSilkコマースデザインシステムが繰り返し引用される実証事例となっており、セットアップ時間を50%短縮 し、MVPスプリントごとに3 〜6日 を節約。全体的なリブランディングを約3営業日 で完了させました。
READ_FULL_LOGarrow_forward Article · コンポーネント READ TIME: 12m
Design System Component：デザイナーと開発者のワークフローをつなぐ この包括的なガイドは、グローバルcolor token（$purple-100など）からalias token（$color-icon-successなど）、4px ベースのspacingスケール、コンポーネントおよびパターンライブラリに至るまで、デザインシステムの構造を体系的に整理し、各レイヤーがどのようにデザイナーと開発者の間のギャップを埋めるかを説明します。またコンポーネントライブラリ（prop定義やstate変形を持つ命名済みの独立したUI要素）とパターンライブラリ（一般的なレイアウト問題に対する再利用可能なソリューション）を明確に区別します。Silk コマースデザインシステムがメインのケーススタディとして登場します。ショッピングフロー向けに最適化された33個 の完全カスタマイズ可能なpre-builtコンポーネントにより、セットアップ時間が50%短縮 、MVPスプリントごとに3 〜6日 節約、約3 営業日でフルリブランディングを完了しました。ガバナンス推奨事項にはsemantic versioning、changelog、ハイブリッドチーム構造（コアチームとembedded contributor）が含まれます。
READ_FULL_LOGarrow_forward Article · アクセシビリティ READ TIME: 9m
不安を抱える人のためのデザイン - TetraLogical TetraLogical のDemelza Feltham氏は、基本的なWCAGへの準拠を超え、より人間中心のアプローチで不安を抱えるユーザーの認知負荷を軽減する具体的なデザインパターンを提示しています。まず取り上げるのは時間的プレッシャーです。チケット購入や2 FAフローのカウントダウンタイマーは離脱を招くため、WCAG 2.2.1 Timing Adjustableを実装するとともに、カウントダウン自体を非表示にするオプションと「ゆっくりどうぞ」のような穏やかなコピーへの置き換えを推奨しています。カート数や入札活動を示す希少性キューなどの緊迫感演出要素は、不安を抱えるユーザーに不均衡な悪影響を与えるダークパターン として指摘されています。予測可能なUI慣例（期待される右上位置に明確に配置された閉じるボタン、明確にスタイリングされたインタラクティブ要素）とアクセシブルなwayfinding（パンくずリスト、明確なナビゲーション、検索機能）もさらに認知的負担を軽減します。必要な書類を事前に案内するフォーム前チェックリストと、透明性のあるデータ収集理由の説明がガイダンスを完成させます。
READ_FULL_LOGarrow_forward summarize Digest_Summary
今週のfeatured記事はAI支援のdesign-to-codeワークフローを詳細に検証しました。 Edy SilvaによるClaude Codeを通じたFigma MCP の実地実験が示した核心的な教訓は、具体性がすべてだということです。Sidebar.jsxのような特定のコンポーネントを更新するために正確なFigmaノードを指定した場合は安定して動作しますが、ファイル単位の曖昧な指示では一貫した結果が得られません。Claudeはwireframeを忠実に再現しますが、レスポンシブアーキテクチャを自律的に推論することはありません。デザインライブラリのマッピングは未解決の課題として残り、Figmaのスタータープランの月約6回のMCPリクエスト制限 が反復的な導入の実質的な障壁となっています。
デザインシステムの組織的側面も同様に注目されました。Netguru の2 本の補完的な記事がグローバルcolor tokenからalias token、spacingスケール、コンポーネントライブラリに至るtokenヒエラルキーの全体構造を整理し、現場調査に基づく導入プレイブックを提示しました。中心となるのはcontextual inquiryで、スプリント計画やコードレビューを観察して独自のサブシステムが生まれる地点を特定することです。NetguruのSilk コマースデザインシステムが全体を通じた実証事例となり、セットアップ時間の50%短縮 と約3 営業日でのフルリブランディングを実現しました。
今週の動画はFigma 、Shopify、Intercom、Slackのシニアデザイナー12 名が実際のハンドオフワークフローを公開してさらに視野を広げました。token対応のアノテーションコンポーネント、専用specページ、モーションシートが共通パターンとして浮かび上がり、最先端のチームはFigmaファイルのレビューではなくAIがコードファースト環境で生成したブランチのforkへとハンドオフを移行させ、デザイナーと開発者の境界を再び流動化させています。
Key Takeaways Claude CodeによるFigma MCPは特定のコンポーネントノードを指定した場合に安定して動作しますが、レスポンシブレイアウトやプロジェクトアーキテクチャを自律的に推論することはありません。プロンプトの具体性が鍵となる変数です。 tokenヒエラルキーとcontextualな導入調査を備えた適切に管理されたデザインシステムはMVPスプリントのセットアップ時間を50% 短縮し、フルリブランディングを約3 営業日に圧縮できます。 最先端のハンドオフワークフローはFigmaファイルレビューからコードファースト環境でAIが生成したブランチのforkへと移行しており、デザイナーと開発者の境界がますます流動的になっています。 
