3 ms·
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?
- arym2020 1y agoBuilder.io has a feature that claims to solve this.. they have a cli that generates mappings (70% accuracy) https://www.builder.io/c/docs/figma-to-code-map-components https://www.builder.io/c/docs/figma-to-code-map-components