MCP 教程：将 Figma 设计稿转化为前端代码

MCP：将 Figma 设计稿转化为前端代码

概述

手动从设计稿提取样式、编写基础代码效率较低。通过 MCP Server - Figma AI Bridge，可自动将 Figma 设计稿转换为整洁的前端代码并生成相应的网页。无需复杂配置，即可体验智能化的设计交付。

效果展示

使用 Figma AI Bridge MCP Server 将设计稿转换为前端代码的效果包括：

• 设计稿到代码的自动转换： 无需手动编写 HTML、CSS 代码
• 响应式布局： 自动生成适配不同屏幕尺寸的响应式代码
• 组件化结构： 智能识别设计中的组件，生成可复用的组件代码
• 样式精确还原： 精确提取设计稿中的颜色、字体、间距等样式信息
• 代码整洁规范： 生成符合最佳实践的干净代码结构

演示环境

本教程使用的系统环境如下：

• 操作系统： macOS 14.7
• Node.js 版本： 20.19.1
• npm 版本： 10.9.2
• Figma 账号： 需要有访问设计稿的权限

准备工作

1. 安装必要的依赖

首先，确保你的系统已经安装了 Node.js 和 npm。然后，在项目目录中执行以下命令：

npm init -y
npm install -D @figma-ai-bridge/mcp-server

2. 配置 Figma 访问权限

1. 访问 Figma 开发者平台
2. 创建一个新的开发者应用
3. 生成访问令牌（Access Token）
4. 确保你的令牌具有读取设计稿的权限

3. 配置 MCP Server

创建 figma-mcp-config.json 文件，配置 MCP Server 连接信息：

{
  "figma": {
    "accessToken": "你的 Figma 访问令牌",
    "fileId": "设计稿文件 ID",
    "pageId": "页面 ID（可选）"
  },
  "output": {
    "format": "react",
    "framework": "vite",
    "outputDir": "./src/components"
  },
  "options": {
    "generateTypes": true,
    "useTailwind": true,
    "responsive": true
  }
}

实现步骤

步骤 1：创建项目结构

mkdir -p src/components
mkdir -p src/styles
mkdir -p src/assets

步骤 2：初始化 MCP Server

创建 start-mcp.js 文件，启动 MCP Server：

// start-mcp.js
const { startServer } = require('@figma-ai-bridge/mcp-server');
const config = require('./figma-mcp-config.json');

async function start() {
  try {
    const server = await startServer(config);
    console.log('MCP Server 已启动在端口:', server.port);
    console.log('访问 http://localhost:', server.port, '查看生成的代码');
  } catch (error) {
    console.error('启动 MCP Server 失败:', error);
  }
}

start();

步骤 3：连接 Figma 设计稿

1. 在 IDE 中打开项目
2. 点击左侧的 MCP Server 图标
3. 选择 'Figma AI Bridge'
4. 输入你的 Figma 访问令牌
5. 选择要转换的设计稿文件和页面

步骤 4：配置代码生成选项

在 MCP Server 面板中，配置代码生成选项：

• 框架选择： React、Vue、HTML、Svelte 等
• 样式方案： Tailwind CSS、普通 CSS、Styled Components 等
• 响应式设置： 启用/禁用响应式布局
• 组件命名规则： PascalCase、camelCase 等
• 代码风格： 缩进、分号等偏好设置

步骤 5：生成前端代码

1. 点击 'Generate Code' 按钮
2. MCP Server 会分析 Figma 设计稿
3. 自动生成对应的前端代码
4. 代码会保存到配置的输出目录中

步骤 6：集成到项目中

生成代码后，将其集成到你的前端项目中：

// App.jsx
import React from 'react';
import Header from './components/Header';
import Hero from './components/Hero';
import Features from './components/Features';
import Footer from './components/Footer';
import './App.css';

function App() {
  return (
    <div className="App">
      <Header />
      <Hero />
      <Features />
      <Footer />
    </div>
  );
}

export default App;

功能特性

核心功能

• 智能设计分析： 自动识别设计稿中的组件、布局和样式
• 多框架支持： 支持 React、Vue、HTML、Svelte 等多种前端框架
• 样式方案选择： 提供 Tailwind CSS、普通 CSS、Styled Components 等多种样式方案
• 响应式设计： 自动生成适配不同屏幕尺寸的响应式代码
• 组件化结构： 智能拆分设计为可复用的组件
• 代码质量保证： 生成符合最佳实践的整洁代码

技术特点

• 实时同步： 支持设计稿变更后的实时代码更新
• 类型生成： 自动生成 TypeScript 类型定义
• 性能优化： 生成的代码注重性能和加载速度
• 可扩展性： 支持自定义生成规则和模板
• 多语言支持： 支持生成不同语言的代码注释

使用示例

基本用法

# 启动 MCP Server
node start-mcp.js
# 或者使用 npx
npx @figma-ai-bridge/mcp-server --config figma-mcp-config.json

命令行选项

# 查看帮助信息
npx @figma-ai-bridge/mcp-server --help
# 指定配置文件
npx @figma-ai-bridge/mcp-server --config custom-config.json
# 指定输出目录
npx @figma-ai-bridge/mcp-server --output ./custom-output
# 选择特定页面
npx @figma-ai-bridge/mcp-server --page-id "页面 ID"

高级配置

{
  "figma": {
    "accessToken": "你的 Figma 访问令牌",
    "fileId": "设计稿文件 ID",
    "pageId": "页面 ID",
    "branchId": "分支 ID（可选）",
    "versionId": "版本 ID（可选）"
  },
  "output": {
    "format": "react",
    "framework": "nextjs",
    "outputDir": "./src/components",
    "componentPrefix": "Figma",
    "useIndexFiles": true
  },
  "options": {
    "generateTypes": true,
     
     
     
     
     
  
   
     
     
  

注意事项

1. Figma 访问权限： 确保你的访问令牌具有读取设计稿的权限
2. 设计稿结构： 保持设计稿结构清晰，组件命名规范，有助于生成更好的代码
3. 样式一致性： 设计稿中使用一致的颜色、字体和间距系统，生成的代码会更整洁
4. 响应式设计： 在设计稿中考虑不同屏幕尺寸的布局，生成的响应式代码会更准确
5. 组件拆分： 合理拆分设计为组件，避免生成过大的单一文件
6. 性能考虑： 对于复杂的设计稿，可能需要调整生成选项以优化性能
7. 代码审查： 生成代码后，建议进行代码审查，根据实际需求进行必要的调整

相关资源

• Figma 官方文档： https://www.figma.com/resources/learn-design/
• MCP Server 文档： https://mcp-server-docs.example.com
• 前端框架文档：
  • React: https://reactjs.org/docs/
  • Vue: https://vuejs.org/guide/
  • Svelte: https://svelte.dev/docs/
• 样式方案文档：
  • Tailwind CSS: https://tailwindcss.com/docs/
  • Styled Components: https://styled-components.com/docs