今週のデザインシステムの議論は2つの方向に展開されました。デザインワークフローにおけるAIの役割拡大と、アクセシビリティの絶対的な要件です。Storybook 10.3はReact向けMCPサーバーをリリースし、AIエージェントがstory、APIドキュメント、使用例などのコンポーネントメタデータを構造的に認識して既存のデザイ… 開発ですぐ活用できるよう整理しました。
font-sizeとline-heightにバインドされたnumber変数を使用して、Figmaでフォントスケーリングをシミュレートする10ステップのプロセスを解説します。120%、140%、160%、180%、200%のスケール増分を対象とし、すべてのフレームにauto layoutを一貫して適用し、すべてのテキスト要素にテキストスタイルを定義する必要があります。デザイナーは画面をコピーして変数コレクションを切り替え、固定コンテナやauto layoutの未設定によるレイアウトの崩れを発見できます。ライト/ダークモードの変数セットを既に使用しているデザインシステムは、同じ切り替えパターンを適用できます。
data-testid属性を使って要素を見つけることは、アクセシビリティの低いマークアップがテストスイートを通過することを暗黙的に許可するコードの臭いです。ボタンがクリック可能なdivに置き換えられても、data-testidを使用するテストは通過し続けますが、その要素はキーボードアクセスができず正しいARIAロールも持ちません。Testing LibraryやPlaywrightの組み込みクエリAPIのロールベースセレクターは、副作用としてセマンティックHTMLを強制します。getByRoleが要素を見つけられない場合、スクリーンリーダーとキーボードユーザーも見つけられないということを意味します。著者はテストクエリを自然言語のアクションとして構造化することを推奨し、セマンティックHTMLによる暗黙的なARIAロールの活用、すべてのフォームコントロールへのvisibleまたはvisually-hiddenラベルの関連付け、Testing Playgroundの活用、ブラウザDevToolsのアクセシビリティツリービューの活用などの実践的なヒントを提供しています。
use_figmaスキルを使用して、実行中のReactアプリをglobal CSSから抽出したデザイントークンでFigmaに変換し、一致するFigma変数を作成し、すべてのフレームをその変数にバインドされたauto layoutで構成します。チュートリアルはトークンレベルの双方向同期を示しています。Figmaで背景色変数を変更すると、バインドされたすべてのフレームが即座に更新され、新しいトークン（navbar-bg: white）を追加するとデザインシステムに登録されます。FigmaデザインをコードベースへUに戻すプロセスはLLMの非決定論的な性質によりre-promptが必要で、最初の試みでは背景色の変更を見逃し、削除したstrokeを黒に変換するという問題が発生しました。use_figmaスキルを使用して、実行中のReactアプリをglobal CSSから抽出したデザイントークンでFigmaに変換し、一致するFigma変数を作成し、すべてのフレームをその変数にバインドされたauto layoutで構成します。チュートリアルはトークンレベルの双方向同期を示しています。Figmaで背景色変数を変更すると、バインドされたすべてのフレームが即座に更新され、新しいトークン（navbar-bg: white）を追加するとデザインシステムに登録されます。FigmaデザインをコードベースへUに戻すプロセスはLLMの非決定論的な性質によりre-promptが必要で、最初の試みでは背景色の変更を見逃し、削除したstrokeを黒に変換するという問題が発生しました。font-sizeとline-heightにバインドされたnumber変数を使用して、Figmaでフォントスケーリングをシミュレートする10ステップのプロセスを解説します。120%、140%、160%、180%、200%のスケール増分を対象とし、すべてのフレームにauto layoutを一貫して適用し、すべてのテキスト要素にテキストスタイルを定義する必要があります。デザイナーは画面をコピーして変数コレクションを切り替え、固定コンテナやauto layoutの未設定によるレイアウトの崩れを発見できます。ライト/ダークモードの変数セットを既に使用しているデザインシステムは、同じ切り替えパターンを適用できます。data-testid属性を使って要素を見つけることは、アクセシビリティの低いマークアップがテストスイートを通過することを暗黙的に許可するコードの臭いです。ボタンがクリック可能なdivに置き換えられても、data-testidを使用するテストは通過し続けますが、その要素はキーボードアクセスができず正しいARIAロールも持ちません。Testing LibraryやPlaywrightの組み込みクエリAPIのロールベースセレクターは、副作用としてセマンティックHTMLを強制します。getByRoleが要素を見つけられない場合、スクリーンリーダーとキーボードユーザーも見つけられないということを意味します。著者はテストクエリを自然言語のアクションとして構造化することを推奨し、セマンティックHTMLによる暗黙的なARIAロールの活用、すべてのフォームコントロールへのvisibleまたはvisually-hiddenラベルの関連付け、Testing Playgroundの活用、ブラウザDevToolsのアクセシビリティツリービューの活用などの実践的なヒントを提供しています。今週のデザインシステムの議論は2つの方向に展開されました。デザインワークフローにおけるAIの役割拡大と、アクセシビリティの絶対的な要件です。Storybook 10.3はReact向けMCPサーバーをリリースし、AIエージェントがstory、APIドキュメント、使用例などのコンポーネントメタデータを構造的に認識して既存のデザインシステムコンポーネントを再利用できるようにしました。ChromaticはバージョニングとAuth付きでMCPサーバーのリモート公開をサポートしています。別途、Claude Codeのuse_figmaスキルを通じて実演されたFigmaのアップデートされたMCPサーバーとskills統合は、双方向デザイントークンワークフローを確立しました。CSSグローバル値がFigma変数として流入し、デザイン変更がコードに戻る仕組みですが、LLMの非決定論的な性質により逆方向のパスではre-promptが必要でした。
アクセシビリティも今週の重要なテーマでした。DequeはADA Title IIの状況を明確にしました。連邦の審査活動にもかかわらず公式なコンプライアンス期限の変更は発表されておらず、州・地方政府に対する基本的なADA義務は規則の修正に関係なくDOJを通じて執行可能です。WCAG 2.1 AAへの準拠を維持し、アクセシビリティをCI/CDパイプラインに組み込むことが推奨されています。Tetralogicalの低視力ユーザー向けデザインガイドは、テキストコンテナに固定の高さを設けないこと、重要なコントロールを左上に配置すること、400%ズームでstickyナビゲーションをハンバーガーメニューに変換することなどの具体的なルールを示しました。
テストとデザイン手法も注目を集めました。data-testidセレクターがアクセシビリティの問題のシグナルであるというDominik Dorfmeisterの主張と、AIがインターフェースの必要性を判断するgenUIとユーザーが成果物を要求するvibe codingの明確な区別を示したNielsen Norman Groupの分析が紹介されました。