Subnavigation

FIGMA TO Qt

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

Figmaで完璧に見えるデザインも、実際の製品上ではうまく再現できないことがあります。その理由は、デバイスの制約や、デザイナーと開発者が別々に作業することが多いためです。Figma to Qtは、そんな課題を解決するためのプラグインです。繰り返しの修正を減らし、デザインを忠実に製品へと反映させることができます。

パブリックベータ版をダウンロードする

Figmaから開発へ、スムーズなGUI連携

Figmaデザインをターゲットハードで忠実に再現

FigmaでGUI要素やコンポーネントを設計しながら、ターゲットデバイスの画面に合わせて体験を最適化するための推奨を得られます。

QMLの機能的なGUIコンポーネントに合わせてデザインを調整し、サポートされているプロパティや必要なステートを確認することで、デザインビジョンが最終製品に忠実に反映されるようにしましょう。

製品向けGUIをスマートに設計

Figmaから即戦力のQMLコードを生成

「Figma to Qt」は、Figmaで設計したGUIからQMLコードを自動生成。静的なファイルではなく、実際に動作するアプリとしてデザインを共有できます。

開発者は、色・サイズ・比率などのデザイン意図を推測する必要はありません。Qt Design Studio、Qt Creator、Visual Studioなど、好みのツールでコードを直接開いて、すぐに開発に取りかかれます。

デザインから製品化まで、GUIを一貫管理

自信を持ってコラボレーションしよう

デザインとコードを並べて表示しながら、開発者やエンジニアと改善点や変更案をスムーズに議論できます。専門用語や複雑な仕様に迷うことはありません。

GUIのどの部分が最適化できるか、そしてその理由を明確に把握し、チームで最適な方向性を決定しましょう。コードの知識も、大量のドキュメントも不要です。

Figma to Qt を始めましょう

パブリックベータにアクセスして
Figmaのデザインを実際に動く形にしてみましょう。

Figma to Qt を試す

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

実際の洗濯機の操作インターフェースを使って、FigmaからQtへのワークフロー全体を体験できます。.

Figmaで起動する

ユーザーガイド

Figma to Qt プラグインの使用に関する包括的なガイドです。
このガイドでは、デザインから開発への効率的な引き継ぎを実現するためのベストプラクティスを紹介しています。

Figma コミュニティへ

ドキュメント

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 を入手するには？

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.1 リリース

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

現代のデバイス設計における2D、2.5D、3Dインターフェースの比較

このブログは「2D vs 2.5D vs 3D User Interfaces for Modern Device Design」の抄訳です...

Qt Design Studio 4.8 リリース

このブログは「Qt Design Studio 4.8 Released」の抄訳です。 Qt Design Studio 4.8 がリリース...