How to map Figma MCP components to a custom UI library?
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?