Installing MCP in Different IDEs

Locofy MCP is set up from the Locofy Dashboard. The dashboard walks you through four steps—connect Figma, create a project, install MCP, and generate your first screen.

Step 1: Connect to Figma

1. Open the How to use Locofy MCP guide from your Locofy Dashboard.
2. Under Start with Locofy CLI or MCP, select Locofy MCP.

3. Under Connect to Figma, click Connect.

4. Log in to your Figma account and allow access to Locofy when prompted.

Once connected, the step shows You're Connected. You no longer need to manually share Figma files with Locofy.

Step 2: Create a Locofy project

1. Click + Create project in the setup guide.
2. Follow the prompts to create a project for your MCP workflow.

When the project is created, the step shows Project Created. MCP configuration is tied to this project.

Step 3: Install Locofy MCP

After your project is created, open MCP Configuration from the setup guide. Here you can copy your credentials and follow editor-specific instructions.

Copy your MCP credentials

1. Copy your Personal Access Token — this authenticates your AI editor with Locofy.
2. Copy your Project ID — this links MCP tools to the correct Locofy project.
3. Select your preferred code editor: Claude Code, Cursor, GitHub Copilot, or Windsurf.
4. Follow the How to setup MCP instructions shown for your editor.
5. Run the terminal command provided under Run in Terminal from your project directory.
6. Click Continue when setup is complete.

Note: If you regenerate your token, the existing token is deactivated immediately. Update the configuration in your editor with the new token.

Regenerate your token

If your token expires or you need a new one, click Regenerate Token in the setup guide or MCP Configuration screen. Copy the updated token and project ID, then update your editor configuration.

Step 4: Generate code from a Figma URL

When all setup steps are complete, use this prompt in your AI editor:

generate code using locofy mcp for [figma screen url]

Replace [figma screen url] with your Figma file or frame URL. Locofy automatically optimizes assets, tagging, responsiveness, and components, and merges the output into your codebase.

See Quickstart for the full generation and refinement workflow.

Set up Locofy MCP in your editor

If you need manual setup steps for your environment, follow the instructions below after copying your token and project ID from MCP Configuration.

Troubleshooting

If Locofy MCP fails to start or shows connection errors clear your npm cache and npx cache:

npm cache clean
rm -rf ~/.npm/_npx

After running these commands, restart your editor and restar the Locofy MCP server.

If the issue persists, please reach out to us on Discord.

What's next

• Quickstart — generate code from a Figma URL and refine with AI
• Design System — map Figma components to your codebase (coordinate with your designer for Figma-side setup)
• Improve code quality — prepare designs and refine generated code with prompts