プロローグ。
Qt Design Studio が誕生したばかりの頃、私たちはデザイナーが他のツールから Qt Design Studio（以下、QtDS）に作品をインポートできる必要性を感じていました。当時はまだ Figma が存在する前で、原子的なコンポーネントを持つデザインシステムというコンセプトはあまり知られていませんでした。当時、私たちは業界で多くのユーザーベースを持ち、UI および UX デザインの業界標準と考えられていた Photoshop をターゲットにしました。当初は、アセットインポーターとして、あるツールから別のツールにグラフィックアセットを移動させ、位置や構成を保持することで、「デザイナーが画面デザインをエクスポートして一枚一枚作り直すという面倒な作業を省けるようにする」という考えで、「ブリッジ」と呼んでいました。
しかし、これでは不十分であることはすぐに明らかになりました。デザイナーは、アプリケーションの構造をモデル化し、コンポーネントを作成、インスタンスを使用することを望んでいました。バリアント、ライブラリ、アンカー、レイアウト、コントロールが欲しかったのです。要するに、Figma が登場するまでは、多くのものが欠けていて、それを本当にサポートできるツールもなかったのです。
Figma は、多くのデザイナーにとってゲームチェンジャーとなりました。デザイン・プロセスを開発プロセスに近づけるようにしました。私たちは設計構造をキャプチャし、それを Qt Design Studio で使用されている qml に変換する機会が生まれました。この qml は、この種の設計システムを記述するのに理想的な言語です。
それ以来、Qt Bridge for Figma の各バージョンでは、Figma の矩形を qml の矩形に変換するというシンプルなステップから始まり、バリアントをステートにし制約をアンカーに変換します。レスポンシブ デザインのサポート、チームの設計システムを可能にするライブラリ サポート、最近では Figma のオートレイアウトを QtDS で使用するクイックレイアウトに変換するなど、機能が追加されています。
新しい機能が追加されるたびに、複雑さが増した分、デザイナーができることが増えました。これによりデザインの結果をよりコントロールできるようになりました。しかし、この複雑さのコストとしてデザイナーは開発プロセスについてより深く理解する必要があり、デザインの方法も変わってきます。構造、命名法、インタラクション、コンポーネント化が最優先され、デザイナーはもはや見た目の美しさだけでなくデザインはルールにも気を配る必要がでてきました。
新しいユーザーがスピードアップできるように、Qt Bridge for Figma の主要なコンセプトを説明するための導入プロジェクトを作成しました。Qt Bridge for Figma プラグインを試すことで、このプロジェクトを確認することができます：
https://www.figma.com/community/plugin/1167809465162924409
コンポーネント内の Figma バリアントは、QtDS にインポートする際に qml のステートに変換されます。Figmaのバリアント機能を使用することでQtDSのステイトに登録され、エクスポートされたデザインに状態を表示します。
レイアウトは、コンテンツをレスポンシブにするという点では制約と似ていますが、レイアウトでは、動的にアイテムを追加したり削除したりすることができ、レイアウトがその中のすべてのコンテンツの配置を担当する点が異なります。Qt Bridgeは、FigmaオートレイアウトをQtクイックレイアウトに自動的に変換し、Qt Design Studioで複雑な動的UIを構築できるようにします。
このティップスは、有料版を使用しているデザイナーにのみ関連しますが、プロフェッショナルまたはエンタープライズプランを使用している場合は、ライブラリを本当に使用する必要があります。テストされたコンポーネントのセットを公開することで、デザインの単一の真実のソースを維持し、常に QtDS に正しくエクスポートされる素材を管理できます。Figma のパブリッシング・ツールでは、ライブラリの一部とそうでないものを簡単に管理できるため、複数のチームやプロジェクトにまたがる膨大な量のコンポーネントを持つ大規模で複雑なプロジェクトを簡単に管理することができます。Qt Bridge がすべての依存関係を処理するため、必要なコンポーネントのみをエクスポートすることができます。
これは簡単なティップスですが便利です。どんなに整理しても、UIコード自体には入れたくないデザインプロジェクトの部分があるのがあったりします、スケッチや実験的なデザインなど、後で見返したくなるものがあるかもしれません。デザイナーはキャンバス上でこれらを選択し、Qt Bridgeがエクスポート時に自動的にスキップするセクションに置くことができます。
Figmaファイルのすべてがpngやsvgなどのアセットになるわけではなく、Figmaで作成できる「モノの種類」の多くは、インポート時にネイティブのqmlタイプに変換されます。例えば、Figma の長方形は、Qt Design Studio の Qt Quick Rectangle になり、楕円や円弧は、qml の同等のタイプになります。ベクトルはSVGのパスになり、もちろんテキストアイテムはテキストアイテムになります。つまり、QtDSでは、このアイテムの様々なプロパティを変更したり、状態を作成したり、アニメートしたり、バインディングで別の値にリンクしたりすることができます。色やフォント、弧の端の位置などのプロパティは、生成された画像アセットにあるような静的なものではありません。 ネイティブアイテムに変換する適切なものが見つからなければ、素材を制限をするなどの工夫が必要なこともあります。
コントロール・テンプレートを使用することで、Figma と Qt Quick Controls の長所を併せ持つことができます。これにより、Figma でコントロール・セットを直接デザインしたり、再設計したりすることができ、Qt Quick Controls の強力な機能を、コードを書くことなく利用することができます。コントロール・テンプレートについては、以前のブログ記事で詳しく説明しています：
https://www.qt.io/blog/qt-quick-control-templates-for-figma
https://www.figma.com/community/plugin/1167809465162924409