How to map Figma MCP components to a custom UI library? 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? Our Setup: Design Side: Uses a consistent design system in Figma (spacing, colors, typography, components like buttons, accordions, etc.) Dev Side: We’ve built a component library called OMNI UI (React + TypeScript), which mirrors the design system. OMNI UI is maintained in a separate GitLab repository. We use GitHub Copilot to assist with code generation. 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. Similar Example: v0.dev uses shadcn/ui components automatically for common UI patterns. What we want to know: How can we configure Copilot or Figma MCP to recognize our custom component library? Can we create a mapping layer or design-token-to-component bridge? Does anyone have experience linking Figma components to external component libraries? Is this possible across repositories? Should we use design tokens, naming conventions, plugin configuration, or codegen tooling? |