<?xml version="1.0" encoding="UTF-8"?>
<modsCollection xmlns="http://www.loc.gov/mods/v3">
<mods ID="wang-etal-2026-figmabench">
    <titleInfo>
        <title>FigmaBench: Evaluating Design-to-Code Generation in Real-World Handoff Scenarios</title>
    </titleInfo>
    <name type="personal">
        <namePart type="given">Ziyang</namePart>
        <namePart type="family">Wang</namePart>
        <role>
            <roleTerm authority="marcrelator" type="text">author</roleTerm>
        </role>
    </name>
    <name type="personal">
        <namePart type="given">Ziyang</namePart>
        <namePart type="family">Liu</namePart>
        <role>
            <roleTerm authority="marcrelator" type="text">author</roleTerm>
        </role>
    </name>
    <name type="personal">
        <namePart type="given">Xin</namePart>
        <namePart type="family">Yin</namePart>
        <role>
            <roleTerm authority="marcrelator" type="text">author</roleTerm>
        </role>
    </name>
    <name type="personal">
        <namePart type="given">Chao</namePart>
        <namePart type="family">Zhang</namePart>
        <role>
            <roleTerm authority="marcrelator" type="text">author</roleTerm>
        </role>
    </name>
    <name type="personal">
        <namePart type="given">Zhe</namePart>
        <namePart type="family">Cui</namePart>
        <role>
            <roleTerm authority="marcrelator" type="text">author</roleTerm>
        </role>
    </name>
    <name type="personal">
        <namePart type="given">Yue</namePart>
        <namePart type="family">Lu</namePart>
        <role>
            <roleTerm authority="marcrelator" type="text">author</roleTerm>
        </role>
    </name>
    <originInfo>
        <dateIssued>2026-10</dateIssued>
    </originInfo>
    <typeOfResource>text</typeOfResource>
    <relatedItem type="host">
        <titleInfo>
            <title>Findings of the Association for Computational Linguistics: EMNLP 2026</title>
        </titleInfo>
        <name type="personal">
            <namePart type="given">Hung-Yi</namePart>
            <namePart type="family">Lee</namePart>
            <role>
                <roleTerm authority="marcrelator" type="text">editor</roleTerm>
            </role>
        </name>
        <name type="personal">
            <namePart type="given">Sunipa</namePart>
            <namePart type="family">Dev</namePart>
            <role>
                <roleTerm authority="marcrelator" type="text">editor</roleTerm>
            </role>
        </name>
        <name type="personal">
            <namePart type="given">Jessy</namePart>
            <namePart type="family">Li</namePart>
            <role>
                <roleTerm authority="marcrelator" type="text">editor</roleTerm>
            </role>
        </name>
        <name type="personal">
            <namePart type="given">Desmond</namePart>
            <namePart type="family">Elliott</namePart>
            <role>
                <roleTerm authority="marcrelator" type="text">editor</roleTerm>
            </role>
        </name>
        <originInfo>
            <publisher>Association for Computational Linguistics</publisher>
            <place>
                <placeTerm type="text">Budapest, Hungary</placeTerm>
            </place>
        </originInfo>
        <genre authority="marcgt">conference publication</genre>
        <identifier type="isbn">979-8-89176-462-0</identifier>
    </relatedItem>
    <abstract>Automating design-to-code translation remains a longstanding goal in software engineering. While Multimodal Large Language Models (MLLMs) have shown promise in design-to-code tasks, existing benchmarks rely solely on screenshots, discarding the structured metadata indispensable in real-world design handoff workflows. Furthermore, current evaluation paradigms are deficient, as code-level metrics fail to account for implementation variability and visual metrics overlook fine-grained defects, while standardized assessments for responsive behaviors remain absent. To address these limitations, we introduce FigmaBench, an industrial-grade benchmark for multimodal design-to-code generation. We collect raw design files from the Figma Community and apply a multi-stage pipeline to curate 1,234 high-quality samples, each comprising high-resolution screenshots and complete JSON metadata. We further propose a comprehensive evaluation framework with four complementary metrics: visual consistency (VCS), structural layout alignment (SLA), textual and stylistic fidelity (TSF), and responsive quality score (RQS). Through extensive evaluation of state-of-the-art MLLMs, we uncover a critical fidelity-responsiveness paradox: models achieving high visual fidelity tend to generate rigid, non-responsive code. We trace this phenomenon to a metadata trap, where models shortcut layout reasoning by directly transcribing absolute coordinates rather than generating fluid structures. Our data and code are available at https://anonymous.4open.science/r/FigmaBench-6C84/.</abstract>
    <identifier type="citekey">wang-etal-2026-figmabench</identifier>
    <location>
        <url>https://aclanthology.org/2026.findings-emnlp.2342/</url>
    </location>
    <part>
        <date>2026-10</date>
        <extent unit="page">
            <start>50344</start>
            <end>50363</end>
        </extent>
    </part>
</mods>
</modsCollection>

%0 Conference Proceedings
%T FigmaBench: Evaluating Design-to-Code Generation in Real-World Handoff Scenarios
%A Wang, Ziyang
%A Liu, Ziyang
%A Yin, Xin
%A Zhang, Chao
%A Cui, Zhe
%A Lu, Yue
%Y Lee, Hung-Yi
%Y Dev, Sunipa
%Y Li, Jessy
%Y Elliott, Desmond
%S Findings of the Association for Computational Linguistics: EMNLP 2026
%D 2026
%8 October
%I Association for Computational Linguistics
%C Budapest, Hungary
%@ 979-8-89176-462-0
%F wang-etal-2026-figmabench
%X Automating design-to-code translation remains a longstanding goal in software engineering. While Multimodal Large Language Models (MLLMs) have shown promise in design-to-code tasks, existing benchmarks rely solely on screenshots, discarding the structured metadata indispensable in real-world design handoff workflows. Furthermore, current evaluation paradigms are deficient, as code-level metrics fail to account for implementation variability and visual metrics overlook fine-grained defects, while standardized assessments for responsive behaviors remain absent. To address these limitations, we introduce FigmaBench, an industrial-grade benchmark for multimodal design-to-code generation. We collect raw design files from the Figma Community and apply a multi-stage pipeline to curate 1,234 high-quality samples, each comprising high-resolution screenshots and complete JSON metadata. We further propose a comprehensive evaluation framework with four complementary metrics: visual consistency (VCS), structural layout alignment (SLA), textual and stylistic fidelity (TSF), and responsive quality score (RQS). Through extensive evaluation of state-of-the-art MLLMs, we uncover a critical fidelity-responsiveness paradox: models achieving high visual fidelity tend to generate rigid, non-responsive code. We trace this phenomenon to a metadata trap, where models shortcut layout reasoning by directly transcribing absolute coordinates rather than generating fluid structures. Our data and code are available at https://anonymous.4open.science/r/FigmaBench-6C84/.
%U https://aclanthology.org/2026.findings-emnlp.2342/
%P 50344-50363

Markdown (Informal)

[FigmaBench: Evaluating Design-to-Code Generation in Real-World Handoff Scenarios](https://aclanthology.org/2026.findings-emnlp.2342/) (Wang et al., Findings 2026)

• FigmaBench: Evaluating Design-to-Code Generation in Real-World Handoff Scenarios (Wang et al., Findings 2026)

ACL

• Ziyang Wang, Ziyang Liu, Xin Yin, Chao Zhang, Zhe Cui, and Yue Lu. 2026. FigmaBench: Evaluating Design-to-Code Generation in Real-World Handoff Scenarios. In Findings of the Association for Computational Linguistics: EMNLP 2026, pages 50344–50363, Budapest, Hungary. Association for Computational Linguistics.