Figma のデザイン、Qt、そして最終プロダクトの間にあるギャップを埋めるプラグインについて紹介します。9月に初のパブリックベータを公開して以降、さらに強力なアップデートを携えて戻ってきました。ここでは、現時点でこのプラグインでできることをご紹介します。

すべての優れたプロダクトはデザインから始まります。しかし、その多くは当初思い描かれたとおりの形でデバイス上に実現されないのが現実です。

Figma 上では完璧に見えるデザインも、開発工程に入り、実際の画面に表示される段階で妥協を余儀なくされることが少なくありません。その理由は、デザインとプロダクトの間に、実装の詳細、ツール、ハードウェアといった複数のレイヤーが存在し、それぞれが異なる“言語”で語っているからです。

一方、開発者は、レイアウトの解釈、デザイン意図に基づいたコンポーネントの手作業による構築、インタラクションやデータバインディングの追加など、QML でデザインを一から実装し直す必要に迫られることが多くあります。

この分断により、デザイナーはフィードバックを待ち、問題を修正し、本来不要だった手戻り作業に時間を費やすという、受動的なループに陥ります。チーム全体では、このサイクルが何度も繰り返される修正や長いレビュー工程へと拡大していきます。業界の推計では、プロジェクト全体の時間の最大半分が、こうした手戻り作業だけで失われているとも言われています。

Figma to Qt は、こうした課題を変えるために生まれました。このプラグインは、Figma の GUI デザインと Qtの両方の言語を理解し、チームが足並みをそろえたまま、より速く前進できるようにします。
デザイナーは、Figma から Qt、そして最終的なプロダクトに至るまで、デザインの意図を損なうことなく一貫して届けられるため、自信を持って成果物を引き渡すことができます。

Qt と Figma を近づける取り組みは、これが初めてではありません。Qt Bridge for Figma は、デザインを QML に変換することで、その基盤を築きました。Figma to Qt はその進化形です。単にコードを生成するだけでなく、デザイン ワークフロー全体を変革します。デザイナーは、自分のデザインが Qt でどのように表現されるのかをより早い段階で把握でき、デザインから実装までの流れを、チームやツールをまたいでスムーズにします。将来的には Figma to Qt が Qt Bridge for Figma に取って代わる予定であり、詳細については今後数か月のうちに改めて共有される予定です。

それでは、このプラグインがデザイナーと Qt 開発者の間のワークフローをどのように再構築するのかを見ていきましょう。

デザインに命を吹き込む

このプラグインは、Figma のデザインから、開発にそのまま使えるクリーンな QML コードを生成します。これこそが、このプラグインの中核となる機能です。推測や解釈の余地、過剰なドキュメント作成、不要な試行錯誤を取り除き、デザイナーは自分の成果物に自信を持って引き渡すことができ、開発者はUI を一から作り直す必要がなくなります。

レイヤーとプロパティ

フレーム、グループ、テキスト、塗り、ボーダーなどの基本的な Figma のレイヤーやプロパティについてその構造・階層・スタイルを保ったまま QML に変換されます。これにより、GUI デザインのビジュアルの基盤が、コード上でも正確に再現されます。

レイアウト

Figmaのオートレイアウト はレスポンシブかつスケーラブルな GUIを構築するうえで不可欠です。
この仕組みを確実にサポートするため、Auto Layout を Qt の新しい FlexboxLayout に変換し、余白、整列、パディング、リサイズ時の挙動をそのまま保持しています。つまり、デザイナーが設計した構造が、そのまま開発者に渡る構造になります。

このベータ版では、Qt の新しい Flexbox Layout を使った Auto Layout サポートの初期バージョンを導入しています。設定で有効にして、ぜひお試しください。皆さまからのフィードバックが、互換性や挙動の改善につながります。

コントロール

ボタン、スライダー、スイッチ、トグルをデザインしても、それが静的で装飾的なアセットにとどまってしまうべきではありません。当社の目標は、Figma 上で表現されたインタラクティブな GUI コンポーネントを、単なる矩形の集合ではなく、実際に機能するQt Quick Control に変換することです。

このベータ版では、新しい Qt Quick Control Library を導入しています。これは、あらかじめ定義され、かつカスタマイズ可能なネイティブ GUI コントロールのセットです。まずは、ボタン、スイッチ、チェックボックスの 3 つのサンプルコントロールを用意しました。エクスポートすると、ボタンはボタンとして、スイッチはスイッチとして動作します。これにより、開発者は GUI を一から作り直すのではなく、最初から機能する GUI をベースに開発を始めることができます。

このベータ版では、Qt Quick Controls の最初のイテレーションを体験できます。ぜひ実際に試してみて、フィードバックをお寄せください。

すでに既存のボタンデザインをお持ちですか？ご安心ください。今後さらに多くの機能を追加予定です。近い将来、既存のデザインをネイティブコントロールへ変換できるようになります。

デザインシステム

複雑なプロダクトや、複数プロダクトを横断して開発を行うチームにとって、スケーラブルなデザインシステムは不可欠です。多くの組織では、共有トークンや再利用可能なコンポーネントが活用されています。このプラグインは、それらのプロパティがデザインと生成される QML の間で一貫して保たれることを保証します。

このベータ版では、デザインシステムを完全にサポートするための重要な一歩として、ローカル Variable（変数）への対応を導入しました。プラグインは、カラー、タイポグラフィ、スペーシングに関するローカル変数を読み取り、デザイントークンとして QML に変換します。これにより、デザインと開発のプロセス全体を通じてビジュアルの一貫性が維持されます。設定で有効にして、ぜひ実際に動作を確認してみてください。

共有されたリモートコンポーネントのグローバルライブラリをお使いですか？ご安心ください。まもなく対応予定です。複雑なデザインシステムへの対応はすでに進行中で、今後のリリースでは Figma の共有ライブラリを解釈・サポートする予定です

より賢くデザイン

Figma 上では完璧に見えるデザインでも、実装段階で課題に直面することがあります。このプラグインの Issues （イシュー）タブ は、問題のあるデザインをスキャンし、開発者に渡る前の段階で、サポートされていないデザインプロパティを検出することで、そうした課題を早期に特定します。検出された各問題には、その内容の説明と解決方法のガイダンスが付いており、デザイナーは 事前に対処することで、後工程での想定外のトラブルを防ぐことができます。

動くデザインを確認

Figma to Qt にはLive Preview （ライブプレビュー） が含まれており、デザインを 実際の Qt GUI としてブラウザ上で動作させて表示します。見たものが、そのままプロダクトになる、それが Live Preview（ライブプレビュー） です。実装やハードウェアの準備が整うずっと前の段階で、ビジュアルの再現性やインタラクションの挙動を検証することができます。

スクリーンプレビュー

Live Preview（ライブプレビュー） では、選択した Figma の画面が Qt でレンダリングされて表示されます。Qt Quick Controls Library を使ってデザインしている場合、プレビューもインタラクティブに動作します。

以前のベータ版をお使いでしたか？今回のアップデートでは、新たな改善点に気づくはずです。複数のフレームを同時に選択・プレビューできるようになり、ブラウザと Figma を行き来することなく、複数画面にまたがる体験を検証できるようになりました。

Code View と Inspect

​​Live Preview（ライブプレビュー） には Code View （コードビュー）と Inspect （インスペクト）モードが搭載されており、プレビュー上の任意の要素を選択すると、対応する生成済み QML が即座にハイライト表示されます。この機能により、デザイナーと開発者の間に共通言語が生まれ、認識のズレを減らし、コミュニケーションの質を向上させることができます。

ファイル ナビゲーター

Live Preview の Files（ファイル）タブでは、開発者にそのまま渡される QML プロジェクトの完全な構造を確認できます。ファイル、フォルダ、アセットまで含め、実際のプロジェクト構成が正確に反映されます。これにより、デザイナーは可視性（透明性）を得られ、開発者は明確で予測可能なプロジェクト構成を把握できます。

画面解像度オーバーレイ

組み込み HMI プロダクトは、さまざまな画面サイズで提供されることが多くあります。Live Preview では、異なる画面解像度のビジュアルオーバーレイを表示でき、実装前の段階で スケーリングの挙動を検証することができます。

フォント管理

このプラグインは、デザイン内で使用されているフォントを自動的に検出し、その利用可否を表示します。不足している カスタムフォントを追加することで、正確なレンダリングが可能になります。

デザインを正確に実装

準備が整ったら、体験全体を ZIP 化された QML プロジェクトとしてエクスポートできます。
開発者はそれを Qt Creator や Visual Studio Code (Qt Extension for Visual Studio Code 使用) で直接開き、すぐに開発を始められます。PDF、スクリーンショット、静的なプロトタイプとはもうお別れです。
これは すぐに着手できる、完全に動作するプロジェクトです。

多くの組み込みプロダクトは、設計どおりの形でリリースされることがほとんどありません。それはチームの能力不足ではなく、デザインと実装の間で使われるツールや言語が噛み合っていないことが原因です。

Figma to Qt は、そのギャップを埋めます。

デザイナーは実際のプロダクトにより近い形で作業でき、開発者はより強固な基盤から開発を始められます。チームはプロセスの早い段階から、同じ 「Single Source of Truth」（唯一の正しいソース） を共有して協働でき、HMI の制作は より速く、より明確で、はるかに予測可能になります。

この新しいベータ版により、機能拡張と体験全体のブラッシュアップを進めながら、2026年初頭の 1.0 リリースに向けて順調に進んでいます。

Figma to Qt は、単なるプラグインではありません。それは、すべてのデザイナーが、自分の創造物が思い描いたとおりに命を吹き込まれる姿を見るべきだという意思表明です。

ぜひ Figma Community から今すぐ試して、デザインが Qt 上で生き生きと動き出す瞬間を体験してください！