Mapping to a Custom Component Library using the Figma to HTML Plugin

Technical Questions
1

Builder public api key
07fe7a8ccb914a1bbef9d998b7b3f010

What are you trying to accomplish
We would like to explore a process where we can design pages in Figma using the PrimeNG Figma component library, then use the Builder.io Figma to HTML plugin convert these to their corresponding PrimeNG angular components, which are registered in the Builder. These can then be exported to code, effectively creating a direct pipeline from a Figma design to Angular code using PrimeNG.

For example, I was able to map this PrimeNG button with the following properties
image

image
image298×621 17.2 KB

Which was mapped with the following Mapping Function

// Customize this to map Figma properties and layers to your React props
// https://www.builder.io/c/docs/vcp-mapping-functions
function getIconByFigmaID(figma: FigmaButtonProps, figmaId: string): string | undefined {
  //@ts-ignore
  const name = figma.$children.find((child) =>
    child?.$type === "INSTANCE" ?
      child?.$rawNode?.mainComponent?.id === figmaId
      : child?.$rawNode?.id === figmaId
  )?.$name;
  return !!name ? `pi pi-${name}` : undefined
}

function Mapper(figma: FigmaButtonProps) {

  return (
    <Button
      label={figma.Button ?? figma.$children[1]?.$textContent}
      icon={
        figma["Show Left Icon"]
          ? getIconByFigmaID(figma, figma?.["Left Icon"]?.props?.figmaId)
          : figma["Show Right Icon"]
            ? getIconByFigmaID(figma, figma?.["Right Icon"]?.props?.figmaId)
            : undefined}
      iconPos={figma["Show Left Icon"] ? "left" : figma["Show Right Icon"] ? "right" : undefined}
      severity={figma.Severity?.toLowerCase()}
      disabled={figma.Disabled === "True"}
      raised={figma.Raised === "True"}
      rounded={figma.Rounded === "True"}
      text={figma.Text === "True"}
      outlined={figma.Outlined === "True"}
      link={figma.Link === "True"}
      plain={figma.Severity === "Plain"}
    />
  );
}

This appeared great in the builder, and created the following code export using the “High Quality” setting

    <section class="box-border flex relative flex-col shrink-0 mt-5 h-[200px]">
      <p-button
        label="Add new product"
        icon="pi pi-plus"
        iconPos="right"
        severity="danger"
        (click)="addNewProduct()"
      ></p-button>
    </section>

This is great! However, I ran into problems trying to export this Search input:

image
image708×99 1.12 KB

image
image299×646 18.5 KB

image

The code I would like generated should look something akin to

<p-iconField iconPosition="left">
    <p-inputIcon styleClass="pi pi-search" />
    <input type="text" pInputText placeholder="Search" />
</p-iconField>

The problem arises when trying to map this. The Figma plugin lets me map from the input component and the _input-content component.

In a mapping function, I would have to map the input Figma component to the <p-iconField> with the nested <p-inputIcon>. Then, the _input-content could be mapped to an <input pInputText> tag (notice the angular directive here to make it work).

This is starting to get complicated very fast, and I can’t quite get a mapping function working. Is this use case pushing the plugin beyond its limits, or is there a better way to achieve a mapping to PrimeNG components?

Thanks!

Code stack you are integrating Builder with
Angular, using PrimeNG and Figma.