如何将 Figma MCP 组件映射到自定义 UI 库？
我们如何实现一个系统，使得 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 自动使用 shadcn/ui 组件来处理常见的 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?