Installing MCP in Different IDEs

Locofy MCP is set up from the Locofy Dashboard. The How to use Locofy MCP guide 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 Connect to Figma, click Connect.
3. 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. Copy your credentials and follow the 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.

Set up your code editor

1. Select your preferred code editor: Claude Code, Cursor, GitHub Copilot, or Windsurf.
2. Follow the How to setup MCP instructions shown for your editor.
3. Run the command under Run in Terminal from your project directory.
4. 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, the guide shows a ready-to-use prompt. Run it in your AI editor—customize it with more specific instructions if needed.

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.

Note: When you generate code from a Figma URL via MCP, Locofy uses your account's Figma connection. If access is needed, your browser opens so you can log in to Locofy and allow Figma access—no manual file sharing required.

See Quickstart for the full generation and refinement workflow.

Manual setup by editor

If you need additional 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 restart 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