From Design to Code: Exploring LLM-Supported Workflows in Figma Dev Mode

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.