Qt Quick Controlsスタイルは、コントロールの視覚的な表現を定義します。 背景、コンテンツアイテム、その他のコンポーネントなどのコントロールの視覚的なデリゲートをオーバーライドすることで、開発者はこれらのコントロールに独自の外観やスタイルを実装することができます。 これらのスタイルには複雑な視覚要素や複雑な効果を含めることもあり、スタイルデザイナーやQMLの経験が浅い人にとっては、QMLでそれらを再現するのは難しい場合があります。しかし、スタイルを記述するためにQMLのすべてを知る必要はありません。 qqstylegeneratorツールを使用すれば、手作業の多くを自動化することで、Qt Quick Controlsスタイルの作成がシームレスなプロセスになります。
qqstylegeneratorは、Figmaのデザインからすぐに使えるQt Quick Controlsスタイルを作成するためのツールです。Figmaの定義済みテンプレートを使用することで、開発者は手間をかけずに一貫性があり視覚的に魅力的なスタイルを簡単に作成できます。
Figma テンプレート
このツールの重要な要素は、コントロールのデザインのベースとして使用される Qt Quick Style Generator テンプレートです。これらのテンプレートは、Figmaの変数システムを活用して重要なデザイン属性を管理し、Qt Quick Controlsの構造とセマンティクスに密接に一致するように設計されています。
テンプレートは、ユーザーが Qt Quick コントロールのスタイルを効果的に設計し実装するための構造化されたアプローチを提供します。各テンプレートは、ボタンやチェックボックスなどの特定のコントロール用にカスタマイズされています。確立されたパターンに従うことで、テンプレートは Qt Quick コントロールのルールに準拠した一貫性を確保します。また、ユーザーがデザイン要素を各コントロールの正しい QML コンポーネントにマッピングするのをサポートし、デザイナーが実装の詳細に煩わされることなく創造性に集中できるようにします。
Figmaのコンポーネントは、Qt Quickのコントロールの構造、命名、動作を正確に模倣するように設計されており、デザインと実装のシームレスな移行を保証します。各コンポーネントは、背景やインジケーターなどの対応するコントロールデリゲートと一致しており、Figmaのテンプレートコンポーネントのレイヤーとして表現されています。さらに、コンテンツアイテムを背景領域内に配置し、指定されたパディングに基づいて調整することで、コントロールレイアウトの動作を正確に反映するレイアウトコンポーネントなどを導入しています。また、テンプレートには各コントロールの複数の状態が含まれており、対応する Qt Quick コントロールのさまざまな状態に慎重にマッピングされています。Qt Quick コントロールのアーキテクチャとセマンティクスを模倣することで、デザイナーは視覚的に正確で、かつ、基盤となるコードと機能的に一貫性のあるコントロールを作成することができます。
Figmaの新しい変数システムは、色、間隔、コーナーの半径などの重要なデザイン属性を管理するために使用されます。このシステムによりテーマを定義でき、ライトモードやダークモードなどのスタイルのバリエーションを簡単に管理できるようになります。これらの定義を一元化することで、すべてのコンポーネントに一貫性が生まれ、テーマの更新や修正プロセスが簡素化されます。ライトモードとダークモードがすでに設定されているため、ユーザーは視覚的にも機能的にも調和を保ちながら、テーマを簡単に切り替えることができます。
ツール
スタイルジェネレータの2つ目の重要なコンポーネントは、qqstylegeneratorツールです。このツールは、コマンドラインとグラフィカルユーザーインターフェースの両方を提供し、スタイルを生成する元となるデザインファイルを示すFigmaファイルIDを引数として受け取ります。また、いくつかのオプションを設定することで柔軟性を確保することもできます。これには、ターゲットディレクトリの指定、特定のコントロールの生成、画像フォーマットと解像度の定義、フォールバックスタイルの設定などのオプションが含まれます。出力には、完全に定義されたスタイルパッケージが含まれます。登録用のqmldirファイル、.qrcファイル、コントロール用のQMLテンプレート、統合を容易にするためのCMakeモジュール、アプリケーションで使用できる画像アセットなどです。生成されたスタイルは画像ベースであるため、視覚的なアセットは画像としてエクスポートされ、コントロールを表現します。
その仕組みは？
このツールは、Figma REST API を使用して Figma ファイルの JSON 表現をダウンロードし、デザインの構造化されたビューを提供します。 個別の構成用 JSON ファイルで、各コントロールのエクスポート対象の要素（または Figma では「アトム」と呼ばれます）と、それらのコントロールの状態を詳細に指定します。 各コントロールとその状態に対応して、ツールはデザインを正確に反映するために必要なアセットと構成をエクスポートします。エクスポートされる情報には、サイズ、パディング、オフセット、半径などのレイアウトの詳細、関連アトムの画像などの主要なプロパティが含まれます。すべてのデータが処理されると、ツールはエクスポートされたすべての情報を統合したQML構成ファイルを生成します。この構成オブジェクトとそのプロパティは、必要な情報を提供するために、スタイルのコントロールテンプレートで直接使用されます。
StyleGenerator を使用した FluentWinUI3 スタイルの構築
StyleGenerator ツールは、Qt Quick Controls の新しいFluentWinUI3 スタイルの作成に役立ちました。 まず、Microsoft の Fluent および WinUI3 ガイドラインに従って、Figma でコントロールのデザインを開始し、Figma Quick Controls テンプレートを起点として使用しました。 各コントロールは、Fluent の仕様を満たし、一貫した外観と操作性を維持するように設計されました。デザインが確定すると、Figmaからエクスポートし、qqstylegeneratorツールで処理して必要なアセットと構成を生成しました。
このツールは、各コントロールとその状態に対応するアセットと構成を生成し、画像やレイアウトの詳細を含めました。しかし、一部のコントロールには追加の修正が必要でした。例えば、FluentWinUI3スタイルでは、コンボボックスなどのコントロールやその他のテキストコントロールは、フォーカス時に下部に角度のついたアクセントカラーのストロークが必要であり、これはQMLで直接実装されました。また、Figmaのデザインには含まれていないアニメーションやトランジションなどのその他の機能強化も、QMLで追加されました。このツールは、テンプレートファイルへの手動編集をその後の実行中に保持できるため、これらのカスタム変更を統合し、以前の修正を失うことなくコントロールを洗練させることが容易になりました。これにより、修正を失う心配なくコントロールを洗練させることができました。
qqstylegeneratorツールにより、Fluentスタイルが正確かつ効率的に実装されました。特定の機能については依然として手動での修正が必要でしたが、ツールによってプロセスが大幅に合理化されました。最終的な成果は、ツールがFigmaのデザインを実装に効果的に変換し、自動化と柔軟性を組み合わせることで洗練された機能的なスタイルを実現したことを示しています。
qqstylegenerator を使用したカスタムスタイルの作成方法
Qt Quick Style Generator を使用した独自のカスタムスタイルの作成は、簡単な作業です。 まず、各ステップをガイドする詳細なドキュメントが含まれている、提供されている Figma テンプレートのコピーにデザインを実装します。 ビルディングブロック、または「プリミティブ」と呼ばれるもの、および半径、サイズなどのグローバル変数を変更することができ、その変更はすべてのコントロールコンポーネントに反映されます。
より詳細な調整が必要な場合は、主要コンポーネントをさらに深く掘り下げていくことができます。例えば、背景やインジケーターなどの要素に対してより広範囲な変更を加えることができます。スライダーの外観をホバー時のみ変更するなど、非常に特殊なニーズがある場合でも、テンプレートを使用すれば、その状態に直接移動して正確な変更を加えることができます。
レイアウト、背景、インジケーターの変更など、テンプレートのステップバイステップの指示に従うことで、プロセスを直感的に進めることができます。調整が完了したら、Figmaのプレビューセクションを使用して、さまざまな状態やシナリオにおけるデザインの見え方をテストすることができます。
テンプレートを定義したら、次にテンプレートを含むファイルの Figma ファイル ID を取得します。また、ツールがデザインにアクセスできるように、Figma アクセス トークンを生成する必要があります。これらの前提条件が完了したら、qqstylegenerator ツールを使用できます。このツールは、このリポジトリで利用可能です。構築が完了したら、コマンドラインまたはグラフィカル ユーザー インターフェイスのいずれかを使用してツールを実行できます。
ツールを使用するには、先に取得したFigmaファイルIDとアクセストークンを指定します。その他のオプションは、GUIまたはコマンドラインから直接設定できます。例えば、次のコマンドは、特定の画像フォーマットを持つ選択したコントロール用のスタイルを生成します。
qqstylegenerator --directory /path/to/output --token YOUR_FIGMA_TOKEN --generate Button --generate Slider --format png@2x --format png@3x --fallbackstyle Fusion YOUR_FIGMA_FILE_ID
ツールによる処理が完了したら、開発者は生成されたファイルと画像アセットを確認します。スタイルがアプリケーションの要件を満たしていることを確認するために、必要な修正や調整はすべてこの段階で行うことができます。ツールは反復的な工程をサポートしており、QMLファイルに変更を加えても、ツールを再実行してもその変更が上書きされることはありません。
最後に、生成されたスタイルをQtアプリケーションに統合します。スタイルはプロジェクトでさまざまな方法で使用できます。スタイルの CMake モジュールを直接 CMake プロジェクトに含めてリンクすると、コンパイル時または実行時の選択により、スタイルを通常通り設定することができます。 Qt Quick Controls スタイルの使用および設定の詳細については、「Using Styles in Qt Quick Controls（Qt Quick Controls でのスタイルの使用）」を参照してください。 また、QML_IMPORT_PATH 環境変数を設定することにより、アプリケーションはスタイル名を実行時引数（-style MyStyle）として指定することで、スタイルを動的に読み込むことができます。また、提供されている .qrc ファイルを使用してスタイルをリソースとしてアプリケーションに埋め込み、QML のリソースパスからスタイルを直接インポートすることもできます。Figma のデザインと qqstylegenerator が提供する自動化機能を活用することで、カスタムスタイルの作成と適用に関するワークフローは効率的かつシンプルになります。
実験的な状態
この作業は、当社の qt-labs による実験的なプロジェクトであり、現在はベータ版の状態です。デザイナーおよび開発者の方々には、テンプレートを探索し、ツールを実行し、ワークフローで試用し、フィードバックを提供していただくことをお勧めします。皆さまからのご意見は、ツールの改良と強化に非常に役立ちます。
