[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"detail-sidebar-cat-0-en-105":3,"doc-seo-665435-105":59,"doc-detail-665435-en":130},{"code":4,"msg":5,"data":6},0,"success",[7,13,18,23,28,33,38,43,48,51,55],{"id":8,"doc_module":4,"doc_module_name":9,"category_name":10,"show_sort_weight":11,"slug":12},1,"Document","Story & Novel",90,"story-novel",{"id":14,"doc_module":4,"doc_module_name":9,"category_name":15,"show_sort_weight":16,"slug":17},2,"Literature",80,"literature",{"id":19,"doc_module":4,"doc_module_name":9,"category_name":20,"show_sort_weight":21,"slug":22},4,"Exam",70,"exam",{"id":24,"doc_module":4,"doc_module_name":9,"category_name":25,"show_sort_weight":26,"slug":27},5,"Comic",60,"comic",{"id":29,"doc_module":4,"doc_module_name":9,"category_name":30,"show_sort_weight":31,"slug":32},6,"Technology",50,"technology",{"id":34,"doc_module":4,"doc_module_name":9,"category_name":35,"show_sort_weight":36,"slug":37},7,"Healthcare",40,"healthcare",{"id":39,"doc_module":4,"doc_module_name":9,"category_name":40,"show_sort_weight":41,"slug":42},8,"Research & Report",30,"research-report",{"id":44,"doc_module":4,"doc_module_name":9,"category_name":45,"show_sort_weight":46,"slug":47},9,"Religion & Spirituality",20,"religion-spirituality",{"id":46,"doc_module":4,"doc_module_name":9,"category_name":49,"show_sort_weight":46,"slug":50},"World Cup","world-cup",{"id":52,"doc_module":4,"doc_module_name":9,"category_name":53,"show_sort_weight":52,"slug":54},10,"Lifestyle","lifestyle",{"id":56,"doc_module":4,"doc_module_name":9,"category_name":57,"show_sort_weight":24,"slug":58},19,"General","general",{"code":4,"msg":60,"data":61},"ok",{"site_id":62,"language":63,"slug":64,"title":65,"keywords":66,"description":67,"schema_data":68,"social_meta":123,"head_meta":125,"extra_data":127,"updated_unix":129},105,"en","figma2code-automating-multimodal-design-to-code-in-the-wild","FIGMA2CODE - Automating Multimodal Design to Code in the Wild","","Front-end development requires costly manual conversion of design mockups into production-ready UI code. Existing multimodal LLM approaches often depend only on design images, forcing models to infer UI details from visuals and frequently degrading results. Real workflows deliver Figma files that include metadata and assets missing in image-only inputs. FIGMA2CODE introduces this setting by building a multimodal dataset, refining Figma metadata via filtering, annotation, and abstraction. Benchmarks on curated cases evaluate state-of-the-art models and reveal trade-offs in fidelity versus layout responsiveness and maintainability.",{"@graph":69,"@context":122},[70,84,105],{"@type":71,"itemListElement":72},"BreadcrumbList",[73,77,79,82],{"item":74,"name":75,"@type":76,"position":8},"https://docshare.wps.com","Home","ListItem",{"item":78,"name":9,"@type":76,"position":14},"https://docshare.wps.com/document/",{"item":80,"name":40,"@type":76,"position":81},"https://docshare.wps.com/document/research-report/",3,{"item":83,"name":65,"@type":76,"position":19},"https://docshare.wps.com/document/figma2code-automating-multimodal-design-to-code-in-the-wild/665435/",{"url":83,"name":65,"@type":85,"image":86,"author":91,"headline":65,"publisher":94,"fileFormat":97,"inLanguage":63,"description":67,"dateModified":98,"datePublished":99,"encodingFormat":97,"isAccessibleForFree":100,"interactionStatistic":101},"DigitalDocument",{"url":87,"@type":88,"width":89,"height":90},"https://docshare.wps.com/thumbnails/figma2code-automating-multimodal-design-to-code-in-the-wild/665435.png","ImageObject",300,407,{"name":92,"@type":93},"Logic","Person",{"url":74,"name":95,"@type":96},"DocShare","Organization","application/pdf","2026-10-30","2026-10-29",true,{"@type":102,"interactionType":103,"userInteractionCount":14},"InteractionCounter",{"@type":104},"ViewAction",{"@type":106,"mainEntity":107},"FAQPage",[108,114,118],{"name":109,"@type":110,"acceptedAnswer":111},"What problem does FIGMA2CODE target?","Question",{"text":112,"@type":113},"It targets the gap between labor-intensive, manual conversion of Figma-based design mockups into production UI code and prior approaches that mainly rely on image-only inputs, which often lose important UI details.","Answer",{"name":115,"@type":110,"acceptedAnswer":116},"How does the method use multimodal information from Figma?",{"text":117,"@type":113},"It pairs design images with Figma metadata JSON files, then refines the metadata through heuristic filtering, human/MLLM annotation and screening, structure pruning, and abstraction to improve code generation quality.",{"name":119,"@type":110,"acceptedAnswer":120},"What do experiments show about different model types?",{"text":121,"@type":113},"Proprietary models achieve better visual fidelity, but they are limited in layout responsiveness and code maintainability. The paper attributes part of this to models directly mapping primitive visual attributes from Figma metadata.","https://schema.org",{"og:url":83,"og:type":124,"og:title":65,"og:site_name":95,"og:description":67},"article",{"robots":126,"canonical":83},"index,follow",{"doc_id":128,"site_id":62},665435,1793303079,{"code":4,"msg":5,"data":131},{"doc_id":128,"user_id":132,"nickname":92,"user_avatar":133,"doc_module":4,"category_id":39,"category_name":40,"doc_title":65,"doc_description":67,"doc_content":134,"file_id":135,"file_url":136,"file_type":137,"file_size":138,"view_count":14,"is_deleted":4,"is_public":8,"is_downloadable":8,"audit_status":8,"page_count":139,"language":140,"language_code":63,"site_id":62,"html_lang":63,"table_of_contents":141,"faqs":142,"seo_title":143,"seo_description":67,"update_tm":129,"read_time":144},1099513958762,"https://ap-avatar.wpscdn.com/avatar/1000023916a998db790?x-image-process=image/resize,m_fixed,w_180,h_180&k=1784791008015729253","FIGMA2CODE: AUTOMATING MULTIMODAL DESIGN TO CODE IN THE WILD  \nYi Gui 1 ∗, Jiawan Zhang 1 ∗, Yina Wang 1 , Tianran Ma 1 , Yao Wan 1†, Shilin He2 ,  \nDongping Chen3 , Zhou Zhao4 , Wenbin Jiang 1 , Xuanhua Shi 1 , Hai Jin 1 , Philip S. Yu5  \n1Huazhong University of Science and Technology, 2Independent Researcher  \n3University of Maryland, 4Zhejiang University, 5University of Illinois Chicago [wanyao@hust.edu.cn](wanyao@hust.edu.cn)  \nABSTRACT  \nFront-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 amultimodal 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 rulebased 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.1  \n1 INTRODUCTION  \nFront-end development is a cornerstone of modern software engineering, often consuming a substantial share of the overall workload (Wu et al., 2024b) . In practice, designers deliver design mockups, while developers translate them into UI code that reflects the intended visual appearance—a workflow that remains costly and labor-intensive. This has long motivated the pursuit of fully automated designto-code, a vision with enduring academic and practical significance. With the recent emergence of powerful MLLMs, this long-standing vision is no longer merely conceptual but is now on the horizon.  \nInspired by earlier machine learning–based approaches (Beltramelli, 2017 ; Robinson, 2019), a flurry of recent studies has advanced the design-to-code task by leveraging MLLMs. Some works introduce large-scale synthetic (Laurenc¸on et al., 2024) or real-world datasets (Gui et al., 2025a) to train or finetune MLLMs (Yun et al., 2024), enabling them to convert design images into UI code. Others contribute benchmarks that aim at systematically evaluating and pushing the boundaries of MLLMs on the design-to-code task. Among them, Design2Code Si et al. (2024) presents the first real-world evaluation dataset together with dedicated metrics for assessing UI code generation, and explores different approaches to this task, such as direct prompting and text-augmented prompting. In parallel,  \n∗Equal Contribution,†Corresponding Author  \n1The codebase and dataset are available at 􀂇 GitHub and  Hugging Face.  \nFigure 1: Comparison of UI generation from image-only and multimodal (Figma) design.  \nseveral studies have also investigated related challenges, including UI code repair and editing (Xiao et al., 2025), as well as code generation from complex layouts (Gui et al., 2025b) .  \nDespite the promising performance reported in previous studies, there remains a substantial","cbCainoa4VACcf5h","https://ap.wps.com/l/cbCainoa4VACcf5h","pdf",9436197,47,"English","# Abstract\n# Introduction","[{\"question\":\"What problem does FIGMA2CODE target?\",\"answer\":\"It targets the gap between labor-intensive, manual conversion of Figma-based design mockups into production UI code and prior approaches that mainly rely on image-only inputs, which often lose important UI details.\"},{\"question\":\"How does the method use multimodal information from Figma?\",\"answer\":\"It pairs design images with Figma metadata JSON files, then refines the metadata through heuristic filtering, human/MLLM annotation and screening, structure pruning, and abstraction to improve code generation quality.\"},{\"question\":\"What do experiments show about different model types?\",\"answer\":\"Proprietary models achieve better visual fidelity, but they are limited in layout responsiveness and code maintainability. The paper attributes part of this to models directly mapping primitive visual attributes from Figma metadata.\"}]","FIGMA2CODE - Automating Multimodal Design to Code in the Wild | PDF",118]