🚀 Figma Link MCP Server

Enable your code agents to access your Figma data. Achieve one-click design completion in any framework.

🚀 Quick Start

Let your code agents such as Cursor and Winds access Figma data to achieve seamless docking between design and code.

✨ Features

• Real-time data synchronization: Automatically obtain Figma project and component information.
• Version control: Track design changes to ensure code consistency with the design.
• Team collaboration: Support multi-person collaboration to improve development efficiency.

📦 Installation

Install via npm

npm install framelink-mcp

Configuration example

Create a framelink.config.js file in the project root directory:

module.exports = {
  host: 'your-figma-host',
  projectId: 'your-project-id',
  token: 'your-access-token'
};

💻 Usage Examples

Basic Usage

1. Initialize the configuration: After installing the plugin, run npx framelink init to initialize the configuration file.
2. Connect to your Figma account: Log in to your Figma account via the CLI and authorize access.
3. Start collaboration: Use the APIs provided by the @framelink/mcp package in your project to obtain real-time design data.

Code Example

const { getProjectData } = require('@framelink/mcp');

async function fetchFigmaData() {
  const data = await getProjectData();
  console.log('Fetched Figma data:', data);
}

fetchFigmaData();

📚 Documentation

For more details on integrating Framelink's MCP server into your project, please visit Framelink's official website.

📄 License

This project is licensed under the MIT License. For details, please refer to the LICENSE file.