論文の概要: Figma2Code: Automating Multimodal Design to Code in the Wild

• arxiv url: http://arxiv.org/abs/2604.13648v1
• Date: Wed, 15 Apr 2026 09:17:09 GMT
• ステータス: 翻訳完了
• システム内更新日: 2026-04-16 20:38:32.465031
• Title: Figma2Code: Automating Multimodal Design to Code in the Wild
• Title（参考訳）: Figma2Code: 野生でコードにマルチモーダル設計を自動化する
• Authors: Yi Gui, Jiawan Zhang, Yina Wang, Tianran Ma, Yao Wan, Shilin He, Dongping Chen, Zhou Zhao, Wenbin Jiang, Xuanhua Shi, Hai Jin, Philip S Yu,
• Abstract要約: 我々はFigma2Codeを紹介した。Figma2Codeは、デザインからコードへ、マルチモーダルな設定に進化させる新しいタスクである。 我々はFigmaコミュニティからペアデザインイメージとそのメタデータファイルを収集する。 このプロセスは3,055個のサンプルを生成し、そこからデザイナーは213の高品質なケースのバランスのとれたデータセットをキュレートする。
• 参考スコア（独自算出の注目度）: 85.29510079067464
• License: http://arxiv.org/licenses/nonexclusive-distrib/1.0/
• Abstract: Front-end development constitutes a substantial portion of software engineering, yet converting design mockups into production-ready User Interface (UI) code remains tedious and costly. While recent work has explored automating this process with Multimodal Large Language Models (MLLMs), existing approaches typically rely solely on design images. As a result, they must infer complex UI details from images alone, often leading to degraded results. In real-world development workflows, however, design mockups are usually delivered as Figma files, a widely used tool for front-end design, that embed rich multimodal information (e.g., metadata and assets) essential for generating high-quality UI. To bridge this gap, we introduce Figma2Code, a new task that advances design-to-code into a multimodal setting and aims to automate design-to-code in the wild. Specifically, we collect paired design images and their corresponding metadata files from the Figma community. We then apply a series of processing operations, including rule-based filtering, human- and MLLM-based annotation and screening, and metadata refinement. This process yields 3,055 samples, from which designers curate a balanced dataset of 213 high-quality cases. Using this dataset, we benchmark ten state-of-the-art open-source and proprietary MLLMs. Our results show that while proprietary models achieve superior visual fidelity, they remain limited in layout responsiveness and code maintainability. Further experiments across modalities and ablation studies corroborate this limitation, partly due to models' tendency to directly map primitive visual attributes from Figma metadata.
• Abstract（参考訳）: フロントエンド開発はソフトウェアエンジニアリングのかなりの部分を占めますが、設計モックアップをプロダクション対応のユーザインターフェース(UI)コードに変換するのは面倒でコストがかかります。 最近の研究では、このプロセスをMLLM(Multimodal Large Language Models)で自動化することを検討しているが、既存のアプローチは通常、デザインイメージに頼っている。 結果として、画像だけで複雑なUIの詳細を推測しなければなりません。 しかし、実際の開発ワークフローでは、設計モックアップは通常、高品質なUIを生成するのに不可欠なリッチなマルチモーダル情報(メタデータやアセットなど)を組み込む、フロントエンド設計のための広く使われているツールであるFigmaファイルとして提供される。 このギャップを埋めるために、Figma2Codeを紹介します。これは、デザインからコードへ、マルチモーダルな設定に進化させ、ワイルドな設計からコードへの自動化を目指している新しいタスクです。 具体的には、Figmaコミュニティからペアデザインイメージとそのメタデータファイルを収集する。 次に、ルールベースのフィルタリング、ヒューマンおよびMLLMベースのアノテーションとスクリーニング、メタデータの精細化など、一連の処理操作を適用する。 このプロセスは3,055個のサンプルを生成し、そこからデザイナーは213の高品質なケースのバランスのとれたデータセットをキュレートする。 このデータセットを用いて、10の最先端のオープンソースおよびプロプライエタリMLLMをベンチマークする。 その結果、プロプライエタリなモデルは優れた視覚的忠実度を達成できるが、レイアウトの応答性とコードの保守性には制限があることがわかった。 モダリティとアブレーション研究のさらなる実験は、モデルがフィグマメタデータから直接原始的な視覚属性をマッピングする傾向のために、この制限を裏付ける。

関連論文リスト

• VisCodex: Unified Multimodal Code Generation via Merging Vision and Coding Models [82.05514464090172]
  マルチモーダルな大言語モデル(MLLM)は、視覚的およびテキスト的理解の統合を著しく進歩させてきた。 しかし、マルチモーダル入力からコードを生成する能力は依然として限られている。 視覚とコーディング言語モデルをシームレスにマージする統合フレームワークであるVisCodexを紹介します。
  論文  参考訳（メタデータ） (2025-08-13T17:00:44Z)
• ScreenCoder: Advancing Visual-to-Code Generation for Front-End Automation via Modular Multimodal Agents [40.697759330690815]
  ScreenCoderはモジュール型のマルチエージェントフレームワークで、タスクを3つの解釈可能なステージ(グラウンド、プランニング、生成)に分解する。 特殊エージェントにこれらの異なる責任を割り当てることで、我々のフレームワークはエンド・ツー・エンドのアプローチよりもはるかに高い堅牢性と忠実性を達成する。 提案手法は, レイアウト精度, 構造コヒーレンス, コード正確性において, 最先端の性能を実現する。
  論文  参考訳（メタデータ） (2025-07-30T16:41:21Z)
• PosterLLaVa: Constructing a Unified Multi-modal Layout Generator with LLM [58.67882997399021]
  本研究では,グラフィックレイアウトの自動生成のための統合フレームワークを提案する。 データ駆動方式では、レイアウトを生成するために構造化テキスト(JSONフォーマット)とビジュアルインストラクションチューニングを用いる。 我々は,ユーザのデザイン意図に基づいて編集可能なポスターを生成する自動テキスト投稿システムを開発した。
  論文  参考訳（メタデータ） (2024-06-05T03:05:52Z)
• WebCode2M: A Real-World Dataset for Code Generation from Webpage Designs [49.91550773480978]
  本稿では256万のインスタンスからなる新しいデータセットであるWebCode2Mを紹介する。 WebCode2Mの有効性を検証するため,WebCoderという名称のVision Transformer(ViT)に基づくベースラインモデルを導入し,公正比較のためのベンチマークを確立する。 ベンチマークの結果、我々のデータセットは、Webページの設計からコードを生成するMLLMの能力を大幅に改善することを示した。
  論文  参考訳（メタデータ） (2024-04-09T15:05:48Z)
• LayoutDETR: Detection Transformer Is a Good Multimodal Layout Designer [80.61492265221817]
  グラフィックレイアウトデザインは視覚コミュニケーションにおいて重要な役割を担っている。 しかし、手作りのレイアウトデザインは、スキルを要求し、時間がかかり、バッチプロダクションではスケールできない。 ジェネレーティブモデルは、設計自動化をスケーラブルにするために出現するが、デザイナの欲求に沿うデザインを作成することは、未だに容易ではない。
  論文  参考訳（メタデータ） (2022-12-19T21:57:35Z)

関連論文リストは本サイト内にある論文のタイトル・アブストラクトから自動的に作成しています。

指定された論文の情報です。
本サイトの運営者は本サイト（すべての情報・翻訳含む）の品質を保証せず、本サイト（すべての情報・翻訳含む）を使用して発生したあらゆる結果について一切の責任を負いません。