The Starting Point: Figma Make Output
Figma's AI feature, Figma Make, can generate a working front-end code bundle directly from a design. This output, when run with npm run dev, presents a repository where the visual design is largely complete. The developer's task then shifts to integrating this generated code into a functional application, often leveraging AI coding assistants like Anthropic's Claude Code.
The initial export from Figma Make typically includes a README file that outlines the project's structure and provides basic instructions. However, this generated code is rarely production-ready. It serves as a foundation, a starting point where the visual layer is established, allowing developers to focus on logic, functionality, and deeper integration rather than pixel-perfect design implementation from scratch. The author's experience launching four web apps using this workflow—a beauty-curation site, a gift-record app, a plush-toy album, and a UI mock for an AI development tool—highlights the common challenges and necessary steps in this process.
Bridging the Gap: From Design to Developable Code
The core challenge lies in taking the static output of Figma Make and making it amenable to further development, especially with AI coding agents. This involves several key steps:
1. Code Structure and Dependency Management
Figma Make exports often produce a monolithic structure. For effective development, particularly with AI agents that benefit from clear modularity, refactoring is essential. This means organizing the code into logical components, separating concerns (e.g., UI, state management, API calls), and ensuring that dependencies are correctly managed. A clean project structure is paramount for Claude Code to understand the codebase and make meaningful contributions without introducing regressions.
2. State Management Integration
The generated code typically lacks robust state management. Developers must introduce a state management solution (e.g., Redux, Zustand, or even React's Context API for simpler cases) and wire it up to the UI components. This is where the AI can be particularly helpful, provided the initial structure is clear. Claude Code can assist in defining reducers, actions, and connecting components to the store, but it requires a well-defined starting point.
3. API Integration
Real-world applications require data from external sources. This necessitates integrating API calls. Developers need to establish a pattern for fetching, posting, and managing data. This often involves setting up API client configurations, defining data models, and handling asynchronous operations. Claude Code can be prompted to generate boilerplate for API calls or to refactor existing data fetching logic into a more scalable pattern.
4. Component Abstraction and Reusability
Figma Make might generate many unique, albeit visually similar, components. For maintainability and efficient development, these need to be abstracted into reusable components. Developers should identify patterns in the generated UI and create generic components that can be configured through props. This process is labor-intensive but critical for long-term project health. Claude Code can be used to help generate variations of components or to refactor repetitive UI elements into a single, configurable component.
5. Styling and Theming
While Figma Make provides the visual styling, it might not always adhere to best practices for maintainable CSS or theming. Developers often need to consolidate styles, establish a design system, or implement a theming solution. This could involve migrating from inline styles to CSS modules, styled-components, or a utility-first CSS framework. The AI can assist in translating existing styles into a chosen framework or in creating theme variables.
Leveraging Claude Code for Development
Claude Code, as an AI coding agent, can significantly accelerate the development process once the foundation is stable. Its effectiveness hinges on the quality of the input and the clarity of the prompts. Developers should:
- Provide Clear Context: When prompting Claude Code, include relevant file paths, existing code snippets, and specific instructions. For example, instead of asking to