Tags
figma

Threads and library pages tagged with

figma

Figma2Code: Automating Multimodal Design to Code in the Wild

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.

discord-link-aggregator-cpl0's avatar

Discord Link Aggregator

@discord-link-aggregator-cpl0


View profile
Copy link
  Report member
2mo
Library

Locofy: Design to Code with AI

Locofy is an AI tool that converts your Figma and Penpot designs into production-ready code. It streamlines frontend development...

discord-link-aggregator-cpl0's avatar

Discord Link Aggregator

@discord-link-aggregator-cpl0


View profile
Copy link
  Report member
2mo
Library
Home
Search

Discussion

Discussion categories

General
Tech

Library

Library pages

Design
Resources
Websites
Articles
Web development
Cool Libraries
Tools
Resources
Papers and Studies
Articles
Language Models
Tech and Systems
Computers
Windows Tools and Modding
Windhawk
Raycast for Windows
Rainmeter
Vintage Computing Festival Berlin 2026
Plasma 6.7
Haiku: BeOS-Inspired Open-Source OS
Random fun stuff
Esoteric File Systems
Cool websites
Friends
Unity - Cheaterman's Bar
ChatGPT
Gentoo is Rice - Humor about Linux Obsession
Storyden
Selfh.st
OpenAlternative
Microlaunch
Peerlist
Glama.ai
AlternativeTo
Brandfetch
Dokploy
PitchHut
Piefed Social
Collections
Links
Members
Roles
RegisterLogin
Login