Skip to main content
Example of how to prepare GUI design in Figma for a motorbike cluster

FIGMA TO Qt

Figmaデザインをそのまま製品に!

デザインの意図を損なうことなく、製品へと反映させます。Figma to Qtは、FigmaのデザインをQMLプロジェクトとして直接コード化。すべての出力はFigma上でプレビュー・検証・承認が完結するため、開発工数を大幅に削減します。最初の画面から最終製品まで、一貫したユーザー体験の品質管理を実現します。 


無料ダウンロード お問い合わせ
Live preview of GUI design at different screen resolutions in Figma's plug-in Figma to Qt.
デバイスに届く前に、動作を確認する 

Figma上でデバイス品質のプレビューを実現 

Figma to Qtは、GUIデザインをブラウザ上で実際に動作するインターフェースとしてプレビューします。単なるプロトタイプではなく、デバイス上で実行される実際のQMLコードとして確認できます。

複数の画面をプレビューし、実際のデバイス解像度での表示を確認。すべてのデザイン要素がコードにどのようにマッピングされるかを把握できます。ツールを切り替えることなく、開発者の対応を待つことなく、Figma上ですべてが完結します。

The issues tab of the Figma's plugin Figma to Qt, highlighting the issues with porting a GUI design to the device.
デザインしながら、即座に品質を確認 

デバイスで動くものを見据えながら、GUIを設計  

Figmaでの作業中、プラグインがコンポーネントを自動チェックし、QMLへの変換に問題が生じる箇所をリアルタイムでハイライト表示します。

潜在的な問題は、修正が容易な早期段階で検出されます。数時間の作業が完了した後ではなく、問題が小さいうちに対処できます。

修正が必要な箇所は、何が問題でなぜ修正が必要かを明確に表示。多くの場合、ワンクリックで解決できます。自信を持って、スケジュール通りにデザインプロセスを完結させることができます。

 

Figma to Qt converts your Figma design to code, including interactive elements and color and style choices.
Figmaのデザインをコードへ 

即戦力のコードをそのまま出力 

Figma to Qtは、GUIデザインをそのままQMLコードに変換します。出力されたコードは、Qt Creator、Visual Studio Code、Qt Design Studioで直接開くことが可能です。PDFやプロトタイプリンクのやり取りも不要です。 

インタラクティブなコンポーネントは、Qt Quick Controlsとして出力され、すぐに使える状態で提供されます。カラーやスタイルはデザイントークンとして自動的に引き継がれるため、デザインとコードの一貫性が保たれます。

次に担当するのが開発者であっても、AIツールであっても、渡されるのはあなたが確認・承認したデザインそのものです。

 

 

Figma to Qt を始めましょう

 プラグインをダウンロードして、デザインをそのまま製品へ 

無料ダウンロード お問い合わせ

プレイグラウンド
プロジェクト

 実際の医療用輸液ポンプのUIを使って、、FigmaからQtへのワークフロー全体を体験できます。.

ドキュメント

 FigmaのデザインからQMLコードへの変換まで、Figma to Qtの全ワークフローを網羅したドキュメントをご覧いただけます。 

FAQ

Figma to Qt の仕組みについて詳しく知りたい方は、よくある質問をご確認ください。

Figma to Qtとは?

Figma to Qt は、Qt によって開発された Figma 用プラグインです。
このプラグインを使うことで、デザイナーはグラフィカルユーザーインターフェース(GUI)やヒューマンマシンインターフェース(HMI)の Figma デザインを、ターゲットの組み込みデバイスで展開可能な形で作成できます。Figma to Qt を使用することで、デザイナーは自分の GUI デザインのビジョンが、最小限の変更と反復で最終製品に反映されることに自信を持てます。

Figma to QtはAIツールとどう違うのか?

Figma to Qtは、Figmaデザインをコードに変換するAIツールとは、いくつかの重要な点で異なります。

まず、Figma to QtはFigma内で動作するため、普段の作業環境を離れることなく、デザインの準備・プレビュー・検証をすべて完結できます。

次に、FigmaのGUIデザインをQMLに変換するために特化して開発された、完全サポート付きの製品です。

そして、Figma to Qtは汎用的な生成ツールではなく、専用の変換ツールであるため、出力結果は予測可能で信頼性が高く、エクスポート前にプレビュー・検証・承認したプロジェクトがそのまま出力されます。

例えば、Figma to QtはコンポーネントをQt Quick Controlsにマッピングします。これは開発者がQtプロジェクトの本番環境で実際に使用する、安定性とテスト済みの品質を持つビルディングブロックです。このマッピングは変わりません。プロジェクト、デザイナー、リリースをまたいで、チーム全体が一貫して活用できます。

Figma to Qt を入手するには?

Figma to Qt は、Figma コミュニティからダウンロードできます。無料でお試しいただけます。

Figma to Qt は無料ですか?

はい、Figma to Qt は現在パブリックベータ版で、完全に無料でご利用いただけます。ダウンロードと使用には Figma のライセンスのみが必要です。ただし、Figma でデザインした GUI をエクスポートして開発・展開に使用する場合は、Qt のオープンソースまたは商用の開発者ライセンスが必要になります。

Figma to Qt を使うには、どの Figma ライセンスが必要ですか?

Figma to Qt を含む Figma プラグインは、どの種類の Figma ライセンスでも使用できます。Figma コミュニティに登録されているプラグインを使用するために、有料ライセンスは必要ありません。

Figma to Qt は Qt Bridge for Figma と同じものですか?

Figma to Qt は、Qt Bridge for Figma の次世代版です。
新しく改良された機能を備えた別のプラグインであり、GUI デザインを組み込みデバイス向けに準備するためのツールです。Qt Bridge for Figma は 2028 年末までサポートされますが、最終的には Figma to Qt に置き換えられる予定です。

Qt Bridge for Figma を使用していますが、Figma to Qt は自動的に利用できますか?

Figma to Qt と Qt Bridge for Figma は別々のプラグインです。
Figma to Qt は、GUI デザインを組み込みデバイス向けに準備するための新しく改良された機能を備えており、Figma コミュニティからダウンロードして使用できます。現在のワークフローで Qt Bridge for Figma を引き続き使用することも可能です。Qt Bridge for Figma は 2028 年末までサポートされます。

Figma to Qt は QML 以外の言語での自動コード生成に対応していますか?

Figma to Qt は、Figma で作成した GUI デザインから QML コードを生成します。
現在のところ QML のみがサポートされていますが、今後のリリース後に他の言語への対応も検討されています。

Figma to Qt を使うのに Qt Design Studio は必要ですか?

必要ありません。Figma to Qt で生成された QML コードは、Qt Design Studio のほか、Qt Creator や Visual Studio Code など、任意の統合開発環境(IDE)で使用できます。Qt Design Studio はあくまで選択肢のひとつです。

Figma to Qt を使用するには、どの Qt バージョンが必要ですか?

Figma to Qt のダウンロードと使用には Qt ライセンスは不要ですが、Figma でデザインした GUI プロジェクトを開発や展開に使用する場合は、Qt のオープンソースまたは商用の開発者ライセンスが必要です。その場合、Figma to Qt は Qt 6.10 以降でサポートされます。

デザインツールの最新情報

Qt Design Studio 4.8.2 リリース

このブログは「Qt Design Studio 4.8.2 Released」の抄訳です。 Qt Design Studio 4.8.2 が...

詳しく見る

Figma to Qt 1.0 リリース:デザインをFigmaからデバイスへ確実に届ける

このブログは「Figma to Qt 1.0 Is Here: The Most Reliable Way to Bring Your De...

詳しく見る

Qt Design Studio 4.8.1 リリース

このブログは「Qt Design Studio 4.8.1 Released」の抄訳です。

詳しく見る

 Figma to Qt をはじめましょう 

今すぐ試す お問い合わせ