如何将 Figma MCP 组件映射到自定义 UI 库？
2 分•作者: bqc•5 个月前
我们如何实现一个系统，让 Figma MCP（模型上下文协议）+ GitHub Copilot 自动将 Figma 设计组件映射到我们自己的自定义 React 组件库（OMNI UI），而不是生成原始代码？
我们的设置：
设计端：在 Figma 中使用一致的设计系统（间距、颜色、排版、按钮、手风琴等组件）。
开发端：我们构建了一个名为 OMNI UI 的组件库（React + TypeScript），它与设计系统相对应。
OMNI UI 在一个单独的 GitLab 仓库中维护。
我们使用 GitHub Copilot 协助代码生成。
目标：当开发人员使用 Figma MCP 为设计生成代码时，它应该导入并使用 OMNI UI 组件（例如，<Button />，<Accordion />）而不是生成原始 HTML/CSS。
类似示例：
v0.dev 自动为常见的 UI 模式使用 shadcn/ui 组件。
我们想知道：
我们如何配置 Copilot 或 Figma MCP 以识别我们的自定义组件库？
我们能否创建一个映射层或设计令牌到组件的桥梁？
有人有将 Figma 组件链接到外部组件库的经验吗？
这是否可以跨仓库实现？
我们应该使用设计令牌、命名约定、插件配置还是代码生成工具？
查看原文
How can we implement a system where Figma MCP (Model context protocol) + GitHub Copilot automatically maps Figma design components to our own custom React component library (OMNI UI), instead of generating raw code?<p>Our Setup:
Design Side: Uses a consistent design system in Figma (spacing, colors, typography, components like buttons, accordions, etc.)<p>Dev Side: We’ve built a component library called OMNI UI (React + TypeScript), which mirrors the design system.<p>OMNI UI is maintained in a separate GitLab repository.<p>We use GitHub Copilot to assist with code generation.<p>Goal: When a developer uses Figma MCP to generate code for a design, it should import and use OMNI UI components (e.g., <Button />, <Accordion />) instead of generating raw HTML/CSS.<p>Similar Example:
v0.dev uses shadcn/ui components automatically for common UI patterns.<p>What we want to know:<p>How can we configure Copilot or Figma MCP to recognize our custom component library?<p>Can we create a mapping layer or design-token-to-component bridge?<p>Does anyone have experience linking Figma components to external component libraries?<p>Is this possible across repositories?<p>Should we use design tokens, naming conventions, plugin configuration, or codegen tooling?