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? Builder.io has a feature that claims to solve this.. they have a cli that generates mappings (70% accuracy)