code-connect icon indicating copy to clipboard operation
code-connect copied to clipboard

How can we share props across multiple files?

Open cadamsdev opened this issue 11 months ago • 1 comments

figma cli version: 1.3.1

How can we share props across multiple files?

example

props.ts

import figma from "@figma/code-connect/html";

export const sharedProps = {
  type: figma.enum("Type", {
    Primary: "primary",
    Secondary: "secondary",
    Tertiary: "tertiary",
    Destructive: "destructive",
  }),
}

ds-button.html.connect.ts

import figma from "@figma/code-connect/html";
import { sharedProps } from './props';

figma.connect("<DS_BUTTON>", {
  props: {
    ...sharedProps,
  },
  example: ({ type }) =>
    html`
      <ds-button
        type=${type}
      >
      </ds-button> `,
});

ds-button.react.connect.tsx

import figma from "@figma/code-connect";
import { sharedProps } from './props';

figma.connect(
  "<DS_BUTTON>",
  {
    props: {
      ...sharedProps,
    },
    example: ({ type }) => (
      <DSButton
        type={type}
        onClick={() => {
          console.log('clicked')
        }}
      />
    ),
  },
)

error running figma connect publish

InternalError
undefined: TypeError: Cannot read properties of undefined (reading 'initializer')

Works fine if we share props between variants in the same file. Once we move the props out of the file we get the above error.

cadamsdev avatar Mar 04 '25 02:03 cadamsdev

Any update or workaround??

stivaugoin avatar Aug 19 '25 15:08 stivaugoin