精巧に作られたデザインがFigmaを離れ、開発パイプラインに入ると、多くの場合、品質が損なわれます。間隔がずれ、色が変わり、複数の解釈や予期せぬ制約を経てディテールが変わってしまいます。スケジュールは遅れ、デザインの意図が曖昧になり、ユーザー体験が後回しになります。
Figma to Qtは、GUIデザインをFigmaからデバイスへ確実に届けるために作られています。
バージョン1.0は、Figma Communityで無料ダウンロードいただけます。
デザインからコードを生成するツールの多くは、最新のAIツールも含め、Figmaをデータ抽出のソースとして扱います。状況によっては有効ですが、コンテキストスイッチングをなくし、デザイナーが新たなツールを習得しなくて済むよう、ワークフローをシンプルかつ効率的に保つことにビジネス上の価値があると考えています。
だからこそ、Figma to QtはデザイナーがすでにいるFigmaの中で動作します。Figma内で、GUIデザインの準備、プレビュー、確認がすべて完結します。これにより、デザイナーがデザインプロセスの主体であり続け、開発者の解釈や実現可能性を確認するための長いやり取りが生じる余地をなくします。
さらに、出力はFigmaのプロパティをQMLにマッピングする際の予測可能な確立されたルールに従います。Figma to Qtはジェネレーティブツールではなく専用の変換ツールであるため、同じデザインから常に同じコードが生成されます。プレビューして承認した内容がそのままエクスポートされます。チームはプロジェクトやリリースをまたいで一貫して活用できます。何がリリースされるかを正確に把握することが不可欠な、組み込みおよびHMI製品を開発するチームにとって、この一貫性は重要です。
私たちは一つの問いから始めました。デザインがそのままデバイスに届くためには、実際に何が必要なのか？
ベータ版でその答えを探りました。複数回の詳細なユーザーインタビューと多くのフィードバックセッションを通じて、デザイナーと開発者がワークフローのどこで行き詰まり、どこで時間を浪費し、このようなツールに何を求めているかを詳しく教えてくれました。1.0 のすべての判断は、その調査に基づいています。
ご参加いただいた皆様へ：このリリースは皆様のフィードバックによって形作られています。改善にご協力いただきありがとうございました。新しいアップデートをお楽しみいただければ幸いです。
Figma to Qtは、最初の画面から最終製品まで、デザイナーが体験を主導し続けられるプラグインです。
デザインすれば、製品に届く。
このプラグインはデザイン作業の実際の流れに沿って機能します。ループはFigmaの中で完結します。その仕組みをご紹介します。
いつも通りに作業します。最初からQtネイティブなコンポーネントを使いたい場合は、プラグインのライブラリにアノテーション済みのQt Quick Controlsが含まれています。ボタン、スイッチ、チェックボックス、スライダー、テキストフィールドが利用できます。
これらはキャンバスにそのまま配置できます。既存のコンポーネントデザインをQt Quick Controlsに直接マッピングすることもできます。
Figma to Qtは、ボタンやスライダーなど、デザイン内のインタラクティブな要素をQt Quick Controlsにマッチングします。
Live Previewを開くと、デザインがブラウザ上でリアルなQtインターフェースとしてレンダリングされます。Figmaを離れることなく、また開発者が関わる前に、コードへのマッピングや異なるデバイス解像度での見え方を確認できます。
FigmaからGUIのライブプレビューを起動でき、ブラウザ上で実際に動作するインターフェースを確認できます。
Issuesタブはデザインをスキャンし、QMLにきれいに変換されない箇所を検出して、それぞれに説明と修正案を提示します。これまでコードレビューや実装の数週間後に発覚していた問題が、今ではFigmaの段階で検出され、数分で修正できます。
Figma to QtのIssuesタブは、デバイス上で正しくレンダリングされない箇所をハイライトし、修正案を提示します。
Figmaで調整し、プレビューを再確認します。このループは十分に高速で、デザインの決定を気軽に見直せます。
プレビューが意図通りになり、問題が解決されたら、完全なQMLプロジェクトをzipとしてエクスポートします。
開発者はQt Creator 、Visual Studio Code、またはQt Design Studioで開き、仕様から組み立てるのではなく、動作するインターフェースからすぐに開発を始められます。
プラグインはデザイントークンをQMLまで引き継ぎ、オートレイアウトのレスポンシブ動作を保持し、インタラクティブなコンポーネントを機能的なQtネイティブのコントロールにマッピングします。生成されるコードはクリーンかつ効率的にコンパイルできるように書かれています。開発者はエクスポートされたファイルをそのままQt Quick Compilerで実行できます。
Figma to Qtの真の強みは、エクスポート後にデザインの変換結果を確認するという工程がなくなることです。すべてのステップでレンダリングを確認しているため、結果はすでに把握できています。
開発者がプロジェクトを開く時点で、主要なデザインの決定はすでにQtで検証済みです。
ベータ版でFigma to Qtをご利用いただいた方へ、新機能をご紹介します。
Qt Quick Controlsライブラリに、既存のButton、Checkbox、Switchに加えて、SliderとTextfieldが追加されました。また、ライブラリを使わずに独自のボタンデザインをネイティブコントロールにマッピングすることもできます。詳細はこちらをご覧ください。
グローバル共有Figmaライブラリがサポートされました。チームがファイルをまたいで共有コンポーネントライブラリやトークンを管理している場合、プラグインがそれらを読み込んで変換します。詳細はこちらをご覧ください。
Figma to QtはFigmaライブラリに対応しており、共有コンポーネントやトークンがQMLに変換されます。
Figma to QtはQt Bridge for Figmaの公式後継ツールであり、その違いは重要です。
Qt Bridge for FigmaはデザインとIDEの間にQt Design Studioを中間ステップとして必要とします。Figma to Qtはその依存関係を完全に排除し、QMLを直接生成することで、選択した開発環境への一直線のパスを提供します。
Qt Bridge for FigmaはQt Design Studioにインポートした後でのみプレビューを表示していました。Figma to Qtは、イテレーション中にFigma内のブラウザでプレビューを表示します。何かを手放す前に、デザインがリアルなQtインターフェースとして動作する様子を確認できます。
またFigma to QtはFigma専用に構築されているため、Photoshop、Sketch、Adobe XD向けの姉妹ツールを持つQt Bridge for Figmaとは異なり、生成されるコードはよりクリーンで元のデザインに忠実です。
新規プロジェクトにはFigma to Qtをご使用ください。
Qt Bridge for Figmaの既存プロジェクトをお持ちの場合、2030年10月までサポートが継続されます。サポートが必要な場合は、qt-design-tools.support@qt.ioまたはQt Account Support Centerにお問い合わせください。
1.0以降も、より多くのFigmaアーティファクトをネイティブ要素に変換できるようQMLのカバレッジを拡張し続け、デザイナーがデザインをより正確に確認・ハンドオフできるようにしていきます。デザイナーと開発者の間でよりイテレーティブなワークフローを構築する方法も模索しています。デザインと実装間のコミュニケーションとコラボレーションを改善し、より迅速かつ効率的にすることを目指しています。
さらに、この領域におけるAIの動向を注視しており、デザインおよび開発ワークフローに自信を持って統合できるよう準備を進めています。今後の情報にご注目ください。
優れたユーザー体験は、そのまま製品に届くべきです。Figma to Qtはそれを実現するために作られています。
ぜひFigma Communityで今すぐお試しいただき、デザインがQtで動き出す様子をご覧ください！