Locofy
Overview
Locofy is an AI-assisted frontend development platform that converts Figma and Penpot designs into structured frontend code and supports plugin, browser, CLI and MCP workflows. Generated projects can be refined in Builder with Visual Mode and Agent Mode, pulled into local development environments, exported as code, or integrated with supported team workflows.
Locofy is a design-to-code and frontend-development platform from Locofy Pte Ltd. Designers can convert selected Figma or Penpot content, builders can paste a Figma URL into the web dashboard, developers can run the Locofy CLI, and AI-assisted development environments can call Locofy through MCP. Generated frontend code can then be reviewed in Builder, refined with Agent Mode, synchronized or pulled into development tools, and iterated as the source design changes.
Key Capabilities
14 verified capabilities
Figma-to-code conversion from plugin, shareable design URL, CLI, or MCP workflows
AvailablePenpot-to-code conversion through the Locofy plugin
AvailableLarge Design Model-based design interpretation and frontend code generation
AvailableWeb output for React, Next.js, HTML/CSS, Gatsby, Vue and Angular
AvailableMobile output for Flutter, React Native, Swift and Jetpack Compose in supported workflows
AvailableBuilder Visual Mode for components, props, configuration, export and deployment controls
AvailableAgent Mode for natural-language refinement of generated frontend code with live preview
AvailableAgent Mode support for accessibility, theming, responsiveness, localisation, validation and interaction refinement
AvailableLocofy MCP for design-aware code generation inside compatible AI coding tools
AvailableLocofy CLI for conversion and local codebase merge workflows
AvailableVS Code extension for project and file sync with conflict handling
AvailableCustom component and design-system mapping on eligible plans
AvailableGitHub synchronization on eligible plans
AvailableIterative design updates through MCP without full regeneration
AvailableSpecifications
Structured fields adapt to this product type.
Access & Platforms
- Web access
- Yes
Modalities
- Text input
- Yes
- Image input
- Yes
Files & Tools
- File uploads
- Yes
Pricing Details
LDMtoken-based self-service and enterprise subscription model.
Free
- Price
- See official pricing
- Billing / Notes
- Self-service tier; current documentation distinguishes it from paid Hobby and Pro plans.
Hobby
- Price
- See official pricing
- Billing / Notes
- Monthly self-service plan.
Pro
- Price
- See official pricing
- Billing / Notes
- Monthly self-service plan.
Enterprise
- Price
- Custom / contact sales
- Billing / Notes
- Supports plan-gated capabilities such as GitHub sync, custom-component mapping and multi-frame conversion.
Compatibility & Workflow
Integrations & Limits
- Integrations
- Figma, Penpot, Locofy Builder, Locofy CLI, Locofy MCP, VS Code, GitHub, Storybook, custom component libraries, Cursor, Claude Code, Windsurf, Gemini CLI, GitHub Copilot and other MCP-compatible development tools.
- Usage limits
- Locofy uses LDMtokens as a credit system for design-to-code generation. Current official documentation distinguishes monthly self-service Free, Hobby and Pro plans from Enterprise; GitHub sync, custom-component mapping and multi-frame conversion are plan-gated.