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?
No comments yet