開発者が実装を始める前に、Live Preview 上でデザインをクリックし、ドラッグし、調整できます。さらに、同じワークフローをフラッグシップ向けタッチスクリーンからマイクロコントローラーまで展開できます。そして、Figma で描いた内容のより多くを、ネイティブな QML として取得できるようになります。
あなたが作り上げたデザインは、実際の製品にもそのままの形で反映されるべきです。デザイナーと開発者の間のやり取りに費やす時間を減らし、本当に重要なユーザー体験の設計により多くの時間を使えるようにすること。それが Figma to Qt の目的です。Figma to Qt は Figma に組み込まれたアシスタントであり、キャンバスから離れることなく Qt アプリケーションをデザインできるよう支援します。今回の 1.1 では、その機能がさらに強化されました。
このリリースでは、Live Preview を実際にデザインを試して操作できる環境へ進化させる、Figma to Qt をマイクロコントローラープロジェクトにも対応させる、デザインの自由度を高める、といった改善が行われています。その結果はシンプルです。Figma でデザインしたものを、思い描いたとおりの形でより多くデバイスへ届けられるようになります。
それでは、新機能を見ていきましょう。
Version 1.1の新機能
開発者に渡す前にデザインを検証
Live Preview は、デザインから生成された実際の QML をブラウザ上でレンダリングします。これは、実際にビルドを行うことなく、デバイス上でどのように画面が表示されるかを確認するための、最も実機に近い方法です。
Version 1.1 では、Live Preview がインタラクティブに動作するようになりました。ボタンはクリックに反応し、スライダーはドラッグでき、スイッチはオン/オフを切り替えられます。そのため、インタラクションを設計している段階で、その動作を実際に試すことができます。Figma 上にいるまま、インタラクションがどのように機能するかを体感できるようになり、開発者が実装に何日も費やす前に、使いづらい箇所や不自然な操作を見つけることができます。
より大きな変更点は、編集可能な QML コードビューの追加です。これまでは読み取り専用だったため、生成されたコードを確認することはできても、実際に試すことはできませんでした。現在では、色を変更したり、サイズを調整したり、別の値を試したりすると、その結果がリアルタイムでプレビューに反映されます。これは、一種のスケッチパッドのようなものだと考えてください。実装の詳細を素早く試せるため、「もしこうしたら?」というアイデアを試すたびに開発者へ依頼する必要がなくなります。
Live Preview 上での編集内容は、そのセッション内にのみ保持されます。それらの変更が Figma ファイルへ書き戻されることはありません。Figma ファイルは引き続き唯一の正しい情報源(Single Source of Truth)のままです。好きなだけ試行錯誤してください。あなたのデザインは、最後に保存した状態のまま維持されます。
高性能ハードウェアからマイクロコントローラーまで、ひとつのワークフローで対応可能
ほとんどの製品チームは、単一のデバイス向けだけにデザインしているわけではありません。製品ラインアップ全体を対象にデザインしています。フル性能のハードウェアを搭載したフラッグシップモデルから、低コストなハードウェアを採用したエントリーモデルまでが含まれます。そして、それらは多くの場合、同じデザインチームによって、同じ Figma ライブラリを基に設計されています。Figma to Qt 1.1 は、その両端をカバーする一貫したワークフローを提供します。

高性能ハードウェア向けでは、Version 1.1 で Qt 6.10 に加えて Qt 6.12 LTS(Long-Term Support) のサポートが追加されました。MPU を搭載したフラッグシップ製品を開発している場合は、Qt 6.12 LTS をターゲットとして安心して開発できます。Figma to Qt は、Qt において初めて Cyber Resilience Act(CRA) に準拠した Qt 6.12 をターゲットにできるようになりました。これにより、コンプライアンス対応に向けたより強固な基盤をチームに提供します。
また、デザインから生成されるコードは、チームが実運用で利用している Qt バージョンを対象とするようになりました。それは、Cyber Resilience Act(CRA) の既知の要件を満たす Qt バージョンでもあります。

エントリーレベルの製品向けには、Figma to Qt が Qt for MCUs をサポートするようになりました。家電製品、産業用制御機器、車載メータークラスターなどは、しばしばマイクロコントローラー上で動作します。しかし、これまでそのようなプロジェクトは Figma to Qt のワークフローの対象外でした。Figma to Qt 1.1 では、このワークフローがマイクロコントローラー向け開発にも拡張され、Qt for MCUs 2.12 LTS からサポートが開始されます。
Qt for MCUs 向けのコードを生成するには、Figma to Qt プラグインの Settings > Code を開き、画像のように Use Qt for MCUs compatible types を有効にしてください。
画面の対象が高性能なタッチスクリーンであっても、エントリーレベルのディスプレイであっても、デザイン作業は同じです。Figma 上で同じようにデザインできます。
思いどおりにデザインし、ネイティブな QML を取得
Figma では、ほとんどあらゆるものを描くことができます。しかし、そのすべてに対応する QML の直接的な表現が存在するわけではありません。また、そのすべてが組み込みデバイス上で適切というわけでもありません。それでも、Figma オブジェクトをネイティブな QML としてサポートする範囲が広がるほど、デザイナーはより自由にデザインできるようになり、Figma to Qt が生成するコードのパフォーマンスも向上します。

このリリースでは、そのギャップをさらに縮めています。Figma の Constraints は、QML の anchors へ変換されるようになりました。Figma 上で設定したレスポンシブなレイアウト動作は、実装時に手作業で再構築する必要はなく、そのまま実装へ引き継がれます。

楕円や円弧(Arc) は、画像として変換されるのではなく、ネイティブな QML 型 に変換されるようになりました。これにより、ゲージやバッジをネイティブな QML として利用できるようになり、Live Preview 上でもそのまま確認できます。

さらに、アセットは PNG や JPG に加えて、SVG 形式でもエクスポートできるようになりました。ベクター向けのアートワークでは、SVG を使用することで、異なる解像度でも鮮明さを維持できるスケーラブルなアセットを利用できます。
この取り組みは Version 1.1 で終わるものではありません。私たちは今後も、Figma が可能にする表現と、QML がサポートする表現との間のギャップを縮め続けていきます。
今後の展望
Figma to Qt のすべてのリリースは、同じ目標に向かって進化しています。それは、デザインしたものを、描いたとおりの形で、途中の手戻りを減らしながらデバイスへ届けることです。今回のリリースでは、デザインの自由度が向上、製品が採用するより多くのハードウェアへの対応、コードを書き始める前のデザイン検証が可能になりました。
今すぐ Figma to Qt 1.1 を使い始めてください。そして、皆さんの作業を妨げていることを引き続き私たちに教えてください。私たちは、それをどのように支援できるかを調査し続けます。
