From Design to Code: Exploring LLM-Supported Workflows in Figma Dev Mode
TL;DR
It is suggested that AI-supported workflows can improve developer experience by reducing ambiguity in design interpretation while maintaining the need for human validation and documentation support.
Abstract
Design systems are widely used to ensure consistency and scalability in modern UI development, yet translating design artifacts into system-aligned code remains challenging. Developers must interpret visual designs and map them to appropriate components and implementation details, often relying on external documentation. While AI-assisted coding tools can accelerate development, they often lack structured design-system context, limiting their effectiveness in design-to-code workflows. In this paper, we investigate how a structured design context can influence developer experience. We present an empirical within-subject study with N=30 frontend developers comparing a traditional documentation-driven workflow to an MCP-supported workflow integrating Figma Dev Mode, Code Connect, and AI-assisted coding tools. The results show significant improvements in implementation accuracy, task efficiency, and perceived usability when a structured design context is available. Our findings suggest that AI-supported workflows can improve developer experience by reducing ambiguity in design interpretation while maintaining the need for human validation and documentation support.