Dynamic props are not getting added with Storybook Integration

[JagdishThavasi]

I am exploring Storybook integration with Code Connect for React components. When I create a .figma.tsx file using figma connect create, all required dynamic props are correctly updated in the Code Connect snippet. However, when I integrate it with Storybook, I only see the component without the respective props. I have provided the working Figma Connect code and the Storybook file that is not displaying the props correctly. Additionally, I have attached a screenshot for reference.

*.figma.tsx

import React from 'react';
import ButtonPrimary from './ButtonPrimary';
import figma from '@figma/code-connect';

/**
 * -- This file was auto-generated by Code Connect --
 * `props` includes a mapping from Figma properties and variants to
 * suggested values. You should update this to match the props of your
 * code component, and update the `example` function to return the
 * code example you'd like to see in Figma
 */

figma.connect(
  ButtonPrimary,
  '##### figma url ######',
  {
    props: {
      text: figma.string('Text'),
      state: figma.enum('state', {
        Default: 'default',
        Hover: 'hover',
        Active: 'active',
      }),
      size: figma.enum('size', {
        Large: 'large',
        Medium: 'medium',
        Small: 'small',
      }),
    },
    example: (props) => (
      <ButtonPrimary text={props.text} state={props.state} size={props.size} />
    ),
  }
);

*.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import ButtonPrimary from './ButtonPrimary';
import figma from '@figma/code-connect';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';

const meta: Meta<typeof ButtonPrimary> = {
  component: ButtonPrimary,
  title: 'ButtonPrimary',
  parameters: {
    design: {
      type: 'figma',
      url: '##### figma url ######',
    },
    props: {
      text: figma.string('Text'),
      state: figma.enum('state', {
        Default: 'default',
        Hover: 'hover',
        Active: 'active',
      }),
      size: figma.enum('size', {
        Large: 'large',
        Medium: 'medium',
        Small: 'small',
      }),
    },
    example: (props) => (
      &lt;ButtonPrimary text={props.text} state={props.state} size={props.size} /&gt;
    ),
  },
};
export default meta;
type Story = StoryObj<typeof ButtonPrimary>;

export function ButtonExample({
  text,
  state,
  size,
}: {
  text: string;
  state: 'default' | 'hover' | 'active';
  size: 'small' | 'medium' | 'large';
}) {
  return &lt;ButtonPrimary text={text} state={state} size={size} /&gt;
}

export const Primary = {
  parameters: {
    design: {
      type: 'figma',
      url: '##### figma url ######',
      props: {
        text: figma.string('Text'),
        state: figma.enum('state', {
          Default: 'default',
          Hover: 'hover',
          Active: 'active',
        }),
        size: figma.enum('size', {
          Large: 'large',
          Medium: 'medium',
          Small: 'small',
        }),
      },
      example: (props) => (
        &lt;ButtonPrimary
          text={props.text}
          state={props.state}
          size={props.size}
        /&gt;
      ),
    },
  },
  args: {
    state: '',
    size: '',
    text: '',
    onClick: '',
  },
};

export const Heading: Story = {
  args: {
    state: '',
    size: '',
    text: '',
    onClick: '',
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    expect(canvas.getByText(/Welcome to ButtonPrimary!/gi)).toBeTruthy();
  },
};

Additionally, when I try to integrate Figma Code Connect via Storybook for Lit components, it does not recognize Figma Code Connect and throws an error: "No Code Connect files." However, it works fine if I integrate it by creating a .figma.tsx file.

[tomduncalf-figma]

Hey @JagdishThavasi, that's strange, it looks like your example should work. Could you please raise a ticket with our support, mentioning that you were sent there from Github Issues? This way we can securely get temporary access to your Figma file and debug what is going on.

Our Storybook implementation currently only supports React, so it's expected that you can't document Lit components. You can do this via our new HTML API however, docs here