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

Connecting multiple stories in one file to multiple Figma components

Open efoken opened this issue 1 year ago • 1 comments

It would be super helpful, when it would be possible to connect multiple stories in one Storybook file, to different Figma components. Because we do not always have one component that maps to one Figma component, sometimes there are different Figma components but only one component in code, like in this example:

// TextInput.stories.tsx

export const Base: Story = {
  render: (args) => <TextInput {...args} />,
  args: {
    helperText: 'Helper Text',
    label: 'Label',
    placeholder: 'Placeholder',
  },
  parameters: {
    design: {
      type: 'figma',
      url: 'https://...',
      // ...
    },
  },
};

export const Multiline: Story = {
  render: (args) => <TextInput {...args} />,
  args: {
    helperText: 'Helper Text',
    label: 'Label',
    maxRows: 4,
    minRows: 2,
    multiline: true,
  },
  parameters: {
    design: {
      type: 'figma',
      url: 'https://...',
      // ...
    },
  },
};

In Figma we have a TextInput component and a TextArea component, but in React Native code both are the same component.

efoken avatar Apr 26 '24 13:04 efoken

Any news on this? @karlpetersson

efoken avatar Jun 27 '24 05:06 efoken