2026年06月12日
デザインシステムをQMLで手作業から再構築するのは、Qt開発者にとって労力のかかる作業です。一般的なFigmaのデザインシステムには、色、タイポグラフィ、スペーシング、角丸、シャドウ、モーション時間など数百個のデザイントークンに加え、それぞれ複数のバリアントとステートを持つ数十個のUIコンポーネントが含まれます。すべての値を正確に転記する必要があり、わずかな不一致でも実装がFigmaのソースから静かにずれてしまう可能性があります。
新しい2つのAIスキルが、FigmaとQtの間にあるデザインシステムからコードへのギャップを解消します。Qt Figma Token Extractionスキルは、Figmaのデザイントークンを直接QMLのシングルトンに変換します。続いてQt Figma Component Generationスキルが、Figmaのコンポーネントライブラリをそれらのシングルトンを利用するイディオマティックなQMLコントロールに変換します。これら2つを組み合わせることで、デザインシステムの引き渡しを丸ごと自動化できます。これらのスキルは、このワークフロー全体をAIエージェントに委任します。エージェントはFigmaに接続してデザインシステムを読み取り、Qtプロジェクトにそのまま組み込める、整然としたイディオマティックなQMLを生成します。
動画: Claude CodeでのFigma MCP経由によるFigmaデザイントークンのQMLへの変換(シーケンスは短縮・加速されています)
これらのスキルは、Figma Variables、Styles、Componentsを使用して適切に構造化されたFigmaデザインシステムであれば利用できます。両スキルともFigma MCPサーバー経由でFigmaに直接接続し、Qt 6 Quickプロジェクトを対象とします。トークン抽出のステップでは、デザインチームが別組織である場合(例えば外部委託先など)に備えて、curlベースのフォールバックが用意されており、エクスポートしたJSONファイルを介した引き渡しが可能です。コンポーネント生成では、Figma MCP接続が常に必要です。両スキルとも、既存プロジェクトの拡張、または新規プロジェクトのスキャフォールディングに対応しています。
開発者向けにスキルがデザインシステムを抽出する仕組み
これらのスキルを起動すると、本来であれば開発者がFigmaを開き、すべての変数コレクション、コンポーネント、バリアントを手作業で確認し、各値をQMLプロパティに対応させ、エラーなく入力するという作業を、丸ごと引き継いでくれます。まずトークン抽出スキルが実行され、デザインシステムの基盤を作成します。その後、コンポーネント生成スキルがこの基盤を元にQMLコントロールを生成します。
フェーズ1 - デザイントークンの抽出
ステップ1 - Figmaへの接続
エージェントはFigma MCPサーバー経由でデザインファイルに接続します。マルチモードのデザインシステムの場合や、MCPアクセスが適さない場合は、curlベースの代替手段により、開発者が短いターミナルコマンドを実行してJSONファイルをエクスポートし、エージェントがそれを処理できます。
ステップ2 - トークンの検出と分類
エージェントはデザインファイル内のFigma VariablesおよびStylesを調査し、トークンを色、タイポグラフィ、スペーシング、サイズ、角丸、シャドウ、不透明度、モーションといった標準カテゴリに分類します。ライトテーマとダークテーマなどのマルチモードコレクションは自動的に検出されます。
ステップ3 - エイリアスの解決
エージェントはトークンのエイリアス(color.surface.primaryのようなセマンティックトークンが、color.neutral.900のようなプリミティブを参照する関係)を解決します。その際に2階層構造を保持するため、生成されるQMLでもすべてを生の値に平坦化することなく、同じセマンティックな間接参照が維持されます。
ステップ4 - design-tokens.jsonとQMLシングルトンの書き出し
エージェントは、FigmaとQML出力との間の契約となるdesign-tokens.jsonを出力し、続けてColors.qml、Typography.qml、Spacing.qml、Radii.qml、Shadows.qml、Motion.qmlという一連のQMLシングルトンを生成します。Theme.qmlシングルトンはこれらのカテゴリをまとめ、ライト/ダークテーマを切り替え可能なmodeプロパティを公開します。各シングルトンは、pragma Singletonとreadonlyプロパティを用いたイディオマティックなQt 6のパターンに従っています。
ステップ5 - 整合性レポートとサマリー
エージェントは、抽出した内容、スキップした内容、検出した問題点をまとめたタイムスタンプ付きのMarkdown整合性レポートを作成します。
画像: GitHub Copilotにおけるエージェント型Figmaデザイントークン抽出スキルによるQMLデザイントークンの更新
フェーズ2 - UIコンポーネントの生成
ステップ6 - Figmaへの接続とコンポーネント一覧の作成
エージェントはMCP経由でFigmaに接続し、get_metadataを使用してファイル構造を取得し、コンポーネントを含むページとフレームを特定します。そして、各コンポーネントを「保留」から「完了」または「ブロック」までワークフロー全体で追跡する一覧テーブルを作成します。その後、開発者にどのコンポーネントを生成するか、またはすべて生成するかを確認します。
ステップ7 - 実装パターンの選択
コードを書き始める前に、エージェントは開発者に2つの実装パターンのいずれかを選択するよう求めます。パターンA(インライン)は、ほとんどのプロジェクトで推奨されるデフォルトです。すべての状態ロジックがコンポーネントファイル内にreadonlyプロパティに対する条件式として記述されるため、出力が自己完結的でデバッグしやすくなります。パターンB(スタイルシングルトン)は、各コントロールをコンポーネントファイルと、整数の列挙型(enum)を用いて各バリアントの型付きコンポーネントオブジェクトを定義する付随のComponentStyle.qml pragma singletonに分割します。これは、すでにテーマ切り替えの仕組みを持つプロジェクトや、複数の切り替え可能なテーマをサポートする必要があるプロジェクトに適しています。
ステップ8 - 参照アセットの読み込み
エージェントは、選択したパターンに対応する参照アセットを読み込みます。これらのアセットには、出力に求められる正確な構造、プロパティの命名規則、トークンの使用方法がエンコードされており、エージェントはこれらを基準として生成するすべてのコントロールを調整します。
ステップ9 - 各コンポーネントの抽出とマッピング
一覧に含まれる各コンポーネントについて、エージェントは個々のメインコンポーネントノードに対してget_design_contextを呼び出します。まずデフォルトバリアントを確認し、続いてHover、Pressed、Disabledなどの代表的なバリアントを確認することで、バリアント、インタラクティブな状態、サイズ、カラートークンの参照、タイポグラフィ、ボーダー定義、アイコンスロットの有無を抽出します。その後、コンポーネントに参照を書き込む前に、実際のプロジェクトのシングルトンファイルを読み込み、各トークン名を検証します。
ステップ10 - QMLコントロールの書き出し
各コンポーネントは、プロジェクトのcomponents/フォルダに、接頭辞DSとFigmaのコンポーネント名を組み合わせたファイル名(DSButton.qml、DSTextFieldなど)で書き出されます。
画像: Claude Codeにおけるエージェント型Figmaコンポーネント生成スキルによって生成されたデザインシステムUIコンポーネント
ステップ11 - 生成後のレビューとサマリー
エージェントは整合性チェックを実行します。すべてのトークン参照が実際のシングルトンファイルに存在することを確認し、トークン化すべきリテラルの数値を収集します。その後、生成されたコンポーネントとスキップされたコンポーネントをまとめたサマリーを開発者に提示します。
UIコンポーネント生成用の参照アセット
コンポーネント生成スキルには、参照アセットのライブラリが同梱されています。これは、選択したパターンの出力を生成する前にエージェントが読み込む、プロダクション品質のQMLソースファイル群です。プロパティの命名規則、状態マシンの構造、アンカリングパターン、トークンの使用方法、アニメーションの規則、フォーカスリングの実装は、すべてこれらのファイルから直接推論されます。
パターンAには、Figmaで検証済みの参照コントロールが3つ同梱されています:DSButton-reference.qml、DSTextField-reference.qml、DSCheckbox-reference.qml。
パターンBには87個のQMLファイル(48個のコンポーネントファイルと39個の付随スタイルシングルトン)が同梱されており、インタラクティブコントロール、入力・検索、表示要素、ナビゲーション・コンテナ、リスト・リンクコントロールなど、一般的なデザインシステムの全体をカバーしています。
独自の参照素材によるデザインシステム抽出スキルのカスタマイズ
両スキルとも拡張可能です。参照アセットはスキル内のフォルダに置かれた単純なQMLファイルであるため、組み込みのデフォルトに縛られることはありません。
コンポーネント生成スキルでは、組み込みの参照アセットを完全に置き換えることも、拡張することもできます。スライダーの社内スタイル、ダイアログアニメーションの好みのパターン、デリゲートのリサイクルに関する独自のアプローチなど、組織が独自のQMLコンポーネント規約を既に確立している場合は、既存のコントロールを参照素材として組み込んでください。これにより、エージェントはデフォルトではなく組織の規約に合わせて動作するため、生成されるすべてのコントロールがチームの既存コードベースと一貫したものになります。あるいは、標準コントロールには組み込みの参照を残したまま、産業用HMIのゲージ、多軸ジョイスティックの可視化、カスタム動画プレーヤーのトランスポートといったドメイン固有のコンポーネント用に追加の参照アセットを提供することもできます。いずれの場合も、参照アセットはスキルのassets/フォルダに配置する単純なQMLソースファイルであり、注釈やメタデータは不要です。
トークン抽出スキルでは、生成されるシングルトン(Colors.qml、Theme.qml、Spacing.qmlなど)は単純なQMLファイルであり、そのまま参照素材として使用できます。色の命名方法、テーマモードの構造、スペーシングスケールの表現方法について組織が既に規約を確立している場合は、デフォルトのシングルトンテンプレートを独自のものに置き換えることができます。既存のColors.qmlやTheme.qmlを組み込むことで、エージェントはデフォルトから生成するのではなく、組織のプロパティ名やシングルトン構造に合わせるようになるため、リネームの手間なく出力をそのままコードベースに組み込めます。また、特定のカテゴリのみに参照アセットを提供することも可能です。例えば、Spacing.qmlのみ独自のものを用意し、他はデフォルトのままにすることもできます。
デザインシステム抽出スキルの制限事項
トークン抽出スキルは、Figmaのソースが適切に構造化された形でVariablesとStylesを使用していることを前提としています。個々のレイヤーにのみ適用されたアドホックなローカルスタイルは、確実に抽出することができません。整合性レポートはあくまで参考情報です。スキルはWCAGのコントラスト違反や構造上の問題をフラグとして示しますが、Figmaファイル自体を編集することはありません。
コンポーネント生成スキルは、FigmaのComponentsとVariantsが適切に構造化された形で使用されていることを前提としています。名前付きのComponentに変換されていないアドホックなフレームは、確実に抽出することができません。日付ピッカーのカレンダーナビゲーションや、オートコンプリートフィールドのフィルタリング動作といった複雑なインタラクションロジックは、静的なFigmaファイルだけから推論することはできません。エージェントは適切なプロパティとシグナルを備えたビジュアルの骨組みを生成し、開発者がインタラクションロジックを実装する必要がある箇所にはTODOコメントを付記します。
いずれのスキルで参照されるカスタムフォントも、Qtプロジェクトに別途用意する必要があります。どちらのスキルも、Figmaからフォントのバイナリを取得することはできません。
Figma to Qtと併用するエージェント型デザインシステム抽出
これら2つの抽出スキルとFigma to Qtは、デザインからコードへの工程において異なる対象層・段階に向けた、別個のプロダクトです。
Figma to Qtは、Figmaを離れることなく、完成したFigma画面やデザインシステム(色、コンポーネント、スタイル)を開発可能な状態のQMLとして出力したいデザイナー向けに構築されています。完全なUIをQMLコードに変換し、デザインの選択、ビジュアルレイアウト、インタラクティビティ、構造を、作成されたとおりに正確に保持します。Figma to Qtは生成型のツールではなく、専用の変換ツールです。エクスポートされるQMLコードは、デザイナーがエクスポート前にプレビュー、確認、承認したプロジェクトをそのまま反映しています。
抽出スキルは、Claude、Codex、GitHub Copilotなどのエージェントを利用する開発者向けに構築されています。これらのスキルは、UI画面の背後にある構成要素、すなわちデザインシステムそのものを構成するデザイントークンとQMLコントロールを、開発チームが所有し拡張していくコードベースへと変換します。
Qtは、デザイナーと開発者それぞれが望む形で作業に取り組める環境を提供します。
依存関係
両スキルとも、生成したQMLを検証するためのQt 6のインストール、および対象のデザインファイルへの読み取りアクセス権を持つFigmaパーソナルアクセストークンを設定したFigma MCPサーバーが必要です。
動作確認環境
これらのスキルは、Claude Code CLI、Qt Creator 20、VS Code上のGitHub Copilotで動作確認済みです。Claude Sonnet 4.6、GPT 5.4、Gemini 3.1 Proのいずれも良好な結果が得られます。
スキルの入手方法
Qtのエージェントスキルは、GitHubリポジトリ https://github.com/TheQtCompanyRnD/agent-skills から入手できます。
または、qt-developmentプラグインの一部として、Claudeマーケットプレイスから直接スキルをインストールすることもできます(「qt-development」で検索してください)。既にプラグインをインストール済みの場合は、gitリポジトリのクローンを手動でpullすることで、最新のスキルを取得できます。
