Possible to connect component libraries like Mantine or Mui?

[Arcade1080]

Is there a way to connect component libraries like Mantine or Mui?

[ptomas-figma]

Hi, thanks for the question! You should be able to annotate components from those libraries using the current React API.

For example to annotate a Button component from the MUI Material library and assuming you have a copy of their community file as your design system library in Figma. you could run npx figma create "https://..." using the the link to the component in that library file. This will generate a Button.figma.tsx file in your codebase that you can modify and publish.

The file could look something like this

import figma from "@figma/code-connect";
import Button from "@mui/material/Button";
import React from "react";

figma.connect(
  Button,
  "https://www.figma.com/...",
  {
    props: {
      size: figma.enum("Size", {
        Large: "large",
        Medium: "medium",
        Small: "small",
      }),
      // ... other prop mapping here
    },
    example: (props) => <Button size={props.size} />,
  }
);

once published with npx figma publish it'd look like this in Figma

Let us know if you have any questions!

[Arcade1080]

Hey! Thank you!