Figma は、画面デザインの作成やレビュー、関係者間での共有に広く使われています。一方で、組込み機器の GUI 開発では、Figma で作成したデザインが確認用の資料にとどまり、実装段階でエンジニアが座標やサイズ、画像、テキストなどを手作業で再現しているケースもあります。その結果、デザインと実装の間に細かなズレが生じ、仕様変更や画面差し替えのたびに修正・確認の手間が増えることがあります。
本記事では、組込み GUI 開発で起きやすいデザインと実装のギャップを整理しながら、Figma デザインデータを開発に活用する際の考え方と、開発環境を選ぶときに確認したいポイントを解説します。
1.組込み GUI 開発で起きやすいデザインと実装のズレ
組込み機器のGUI開発では、デザイン段階で合意した画面と、実機上で表示される画面との間にギャップが生じることがあります。たとえば、次のような場面です。
・デザイナーが作成した画面と、実機での表示が微妙に異なる
・仕様変更のたびに、エンジニアがGUIを手作業で修正している
・デザイナーが次の画面検討に進みたいのに、実装後の確認に時間を取られてしまう
こうしたズレが起きる背景には、デザインと実装が別々の工程として進んでいることがあります。
デザイナーは Figma 上で画面を作成し、エンジニアはその画面を見ながら、開発環境側でレイアウトを再現します。しかし、画面を見ながら手作業で再現する方法では、座標、サイズ、余白、配色、フォントなどにズレが生じやすくなります。
特に組込み機器では、画面サイズ、表示デバイス、メモリ容量、OS、ミドルウェア、操作デバイスなど、Web やスマートフォンアプリとは異なる制約があります。そのため、デザイン通りの見た目や操作感を実機上で再現するには、より慎重な確認が必要です。
2.Figma デザインデータを開発に活用するという考え方
Figma のデザインデータを開発に活用するとは、Figma で作成した画面を単なる確認資料として扱うのではなく、GUI 開発の出発点となるデータとして利用することです。たとえば、画面要素の位置やサイズ、画像、テキストなどの情報を開発環境に取り込めれば、エンジニアが画面を見ながら一から作り直す作業を減らせます。
これにより、次のような効果が期待できます。
| 開発上の課題 | Figma データ活用で期待できること |
| 画面を手作業で再現している | 座標やサイズなどの情報をもとに、初期レイアウトを作成しやすくなる |
| デザインと実装にズレが出る | デザインデータを基準にできるため、見た目の差異を抑えやすくなる |
| 仕様変更時の修正が多い | 更新されたデザインをもとに、変更内容を反映しやすくなる |
| 確認作業が何度も発生する | デザイナーとエンジニアが同じデータを基準に確認しやすくなる |
3.Figma連携を選ぶときに見るべきこと
Figma 連携と聞くと、Figma のデザインをコードに変換する機能をイメージするかもしれません。もちろん、コード生成は有効な方法の一つです。しかし、組込み GUI 開発では、コードが生成できるかどうかだけで判断するのは十分ではありません。
組込み機器では、既存の C/C++ 資産、OS、ミドルウェア、表示デバイス、メモリ制約、量産後の保守なども考慮する必要があります。そのため、開発環境を選ぶ際は、次のような観点も重要になります。
・既存の開発フローに無理なく組み込めるか
・ターゲット環境で表示確認や調整がしやすいか
・取り込んだ後に画面要素を編集しやすいか
・仕様変更や画面差し替えに対応しやすいか
・デザイナーとエンジニアの役割分担に合っているか
Figma 連携は、デザインと実装を近づけるための手段です。開発環境を選ぶ際は、「取り込めるか」だけでなく、「取り込んだ後に開発で使いやすいか」を確認することが大切です。
4.組込み GUI 開発でFigma デザインデータ活用が特に重要な理由
Figma デザインデータの活用は、一般的な画面開発でも有効ですが、組込み GUI 開発では特に大きな効果が期待できます。組込み機器では、ハードウェア、表示デバイス、OS、ミドルウェアなどの制約を考慮しながら開発を進める必要があるため、デザインデータを開発工程で活用できるかどうかが、後工程の効率にも関わります。
ハードウェア完成前から開発可能
組込み機器の開発では、ハードウェアの完成を待たずにソフトウェア開発を進めたいケースがあります。Figma のデザインデータを開発環境に取り込んで画面作成を始められれば、実機が完成する前の段階から GUI の検討や確認を進めやすくなります。
仕様変更・画面差し替えに柔軟対応
開発途中で、ボタン配置の変更、配色の修正、表示言語の追加、画面差し替えなどが発生することは少なくありません。デザインデータを開発環境で活用できる仕組みがあれば、毎回すべてを手作業で修正する場合に比べて、変更対応の負担を抑えやすくなります。
チームの共通言語化
Figma のデザインデータを開発の基準として扱えるようになると、デザイナー、エンジニア、PM が同じデータをもとに会話できます。これにより、「どの画面が最新なのか」「どこまで実装済みなのか」「どの要素を修正すべきか」といった確認がしやすくなります
実装後の保守性向上
組込み機器は、リリース後も画面修正、機種展開、表示言語の追加などが発生することがあります。初期開発の段階からデザインデータと開発環境を連携させておくことで、後から変更が入った場合にも修正箇所を把握しやすくなり、保守や展開にも対応しやすくなります。
5.導入前に確認しておきたいポイント
Figma のデザインデータを開発に活用する際は、事前に確認しておきたいポイントがあります。
| 確認項目 | 内容 |
| 取り込める情報 | レイアウト、座標、サイズ、画像、テキスト、配色、フォント、レイヤー構造など、どこまで取り込めるか |
| 取り込み後の編集性 | 開発環境上で配置変更や修正がしやすいか |
| 既存フローとの相性 | 既存の C/C++ 資産、OS、ミドルウェア、ターゲット機器と接続しやすいか |
| 変更時の運用 | Figma 側で修正が入った場合、どのように反映・確認するか |
| 共有データの扱い | PNG 画像だけでなく、開発で使えるデータとして共有されているか |
特に注意したいのは、Figma の画面が共有されていても、実際には PNG 画像として書き出されたデータだけが渡されているケースです。この場合、座標やレイヤー構造などの情報が失われ、開発環境で再利用しにくくなることがあります。
デザインデータを「見るための資料」として共有するのか、「開発で使うデータ」として連携するのかは、事前に関係者間で明確にしておくことが重要です。
6.よくある質問
Q：Figmaのどんな情報を取り込めますか？
開発環境やツールの仕様によって異なりますが、一般的にはレイアウト、座標、サイズ、画像、テキスト、配色など、画面デザインを構成する基本的な情報を取り込める場合があります。フォント情報やレイヤー構造、コンポーネント情報まで扱えるかは、事前に確認しておく必要があります。
Q：デザインデータを取り込めば、プログラミングは不要になりますか？
すべてのプログラミングが不要になるわけではありません。画面配置や素材反映の作業を効率化できる場合はありますが、機器固有の制御処理、外部デバイスとの連携、状態管理などは個別に実装が必要になることがあります。
Q：Figma 以外のデザインツールを使っている場合はどうなりますか？
開発環境によっては、Photoshop や Illustrator など、Figma 以外のデザインデータに対応している場合もあります。自社で使用しているデザインツールやデータ形式に対応しているかを確認しておくことが大切です。
7.設計データを“活かす”GUI 開発環境の一例：GENWARE
ここまで見てきたように、Figma のデザインデータを組込み GUI 開発に活用するうえでは、単にデータを取り込めるだけでなく、取り込んだ後に開発環境上で扱いやすいことが重要です。こうした考え方を取り入れた開発環境の一例として、ILC が提供する組込み GUI 統合開発環境「GENWARE3/4」があります。
GENWARE3/4 では、Figma で作成した画像やテキストを、レイアウトを保ったまま開発環境に取り込むことができます。これにより、エンジニアが座標やサイズを一つひとつ手入力して画面を再現する作業を減らし、デザイナーが作成した設計データを GUI 開発の出発点として活用しやすくなります。
また、Figma だけでなく Photoshop や Illustrator のデザインデータにも対応しているため、既存のデザイン制作フローを大きく変えずに、組込み GUI 開発へ接続しやすい点も特徴です。
Figma 連携を検討する際は、「コードを生成できるか」だけでなく、「自社の組込み開発フローに無理なく組み込めるか」「取り込んだ設計データを継続的に活用できるか」という観点で開発環境を選ぶことが重要です。
8.まとめ
Figma は、画面デザインの作成や共有に便利なツールですが、組込み GUI 開発では、実装段階で画面を手作業で再現しているケースもあり、デザインと実装のズレや確認工数が課題になりやすくなります。
Figma のデザインデータを開発環境で活用できれば、座標やサイズ、画像、テキストなどを実装作業の出発点として扱いやすくなり、画面再現や確認の負担を減らせます。組込み GUI 開発の効率化や手戻り削減を検討する際は、「Figma から取り込めるか」だけでなく、「取り込んだ後に既存の開発フローやターゲット環境で使いやすいか」という観点で、開発環境を見直すことが大切です。
9.関連ページ
GENWARE関連ページ
Figma のデザインデータを、組込み GUI 開発にそのまま活かしたい方へ。
組込みGUI統合開発環境「GENWARE3/4」は、Figma や Photoshop のデザインデータを取り込み、画面データ作成や GUI 開発の効率化を支援します。デザインと実装のズレを抑えたい、画面作成や座標調整の手作業を減らしたい、ハードウェア完成前から GUI 開発を進めたい場合に適した開発環境です。
より詳しい仕様や機能、技術的な情報を確認したい方は、以下の GENWARE3製品ページをご覧ください。
