Figma MCP集成工具

一个Next.js应用程序,展示如何将Figma模型上下文协议(MCP)集成到代码库中,并使用原子设计原则从Figma设计到生产就绪的React组件。

  • by Datayolk
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 Datayolk/app-figma-mcp

使用说明

Figma MCP与原子设计的集成

Next.js应用程序演示如何集成 Figma模型上下文协议(MCP) 使用 原子设计原理该项目展示了从Figma设计到生产就绪的React组件的无缝工作流程。

🎯 项目概述

该项目通过利用Figma MCP直接从Figma文件中提取设计规范,并按照原子设计方法将其转换为结构化、可维护的组件库,从而弥合了设计和开发之间的差距。

Figma文件: Positivus登录页面设计

🧩 什么是原子设计?

原子设计是一种通过将接口分解为基本构建块来创建设计系统的方法:

  1. 原子 -基本构建块(按钮、输入、标签)
  2. 分子 -原子的简单组合(形成字段、搜索栏)
  3. 生物体 -复杂组件(标题、表单、导航)
  4. 模板 -页面级布局
  5. 页面 -模板的具体实例

原子设计