Welcome to Locofy.ai Documentation
Locofy.ai turns your designs into developer-friendly frontend code for mobile apps and web. It enables builders to ship products faster without leaving their existing design tools, tech stacks, and workflows.
Locofy offers a plugin for Figma, Penpot, and Adobe XD, allowing you to convert designs into responsive, clean, and modular frontend code for both web and mobile. With the Lightning flow trained on millions of real-world designs, Locofy understands layout intent, component structure, and responsiveness to generate high-quality code in minutes.
After generating code with Locofy Lightning, you can refine and improve your UI using Agent Mode. Agent Mode provides a prompt-based interface that lets you enhance your generated UI, such as adding accessibility, theming, responsiveness, and internationalisation, without manually editing code.
Once you’re satisfied with the live, responsive prototype in the plugin, you can sync your project to Locofy.ai Builder. In Builder, you can continue using Agent Mode on live, running code, create reusable components, configure code settings, and prepare your project for production.
From Locofy Builder, you can sync your code to GitHub, pull it into VS Code, extend it using Locofy MCP, deploy your application, or export it as a ZIP file, giving you full flexibility over how you ship.
Below is an overview of the steps you need to take to go from design to developer-friendly, extensible code with Locofy.ai.
