Figma Code Connect: Integrate with Storybook

[alisonjoseph]

Integrate Code Connect with Storybook

https://github.com/figma/code-connect/blob/main/cli/README.md#integrating-with-storybook Do we want this? Or do we want to keep config files separate? Requires:

• https://help.figma.com/hc/en-us/articles/360045003494-Storybook-and-Figma
• Storybook Figma plugin into Figma
• Storybook design addon in storybook

Pro

• Could be a good way to keep changes in sync
• Less extra files, won't need additional code connect files per component
• Would give us additional integration from Storybook -> Figma

  Con

• Will be additional work possibly updating stories to work
• Will add complexity to storybook

Example integrated storybook code

import React from 'react';
import figma from '@figma/code-connect';
import { ArrowRight } from '@carbon/icons-react';
import Link from './Link';
import mdx from './Link.mdx';

export default {
  title: 'Components/Link',
  component: Link,
  parameters: {
    docs: {
      page: mdx,
    },
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=50111-991&mode=design&t=kyFCPK0tCeufcNP2-4',
      examples: [FigmaTest],
      props: {
        inline: figma.boolean('Inline'),
        children: figma.string('Link text'),
        renderIcon: figma.instance('Swap icon'),
        size: figma.enum('Size', {
          Large: 'lg',
          Medium: 'md',
          Small: 'sm',
        }),
        disabled: figma.enum('State', {
          Disabled: true,
        }),
      },
    },
  },
  args: {
    disabled: false,
    inline: false,
    visited: false,
    children: 'Link',
  },
  argTypes: {
    children: {
      table: {
        disable: true,
      },
    },
    as: {
      control: false,
    },
    renderIcon: {
      table: {
        disable: true,
      },
    },
  },
};

export const FigmaTest = ({ size, disabled, inline, renderIcon, children }) => (
  <Link
    inline={inline}
    disabled={disabled}
    renderIcon={renderIcon}
    size={size}
    href="#">
    {children}
  </Link>
);

[tay1orjones]

I'm down to try it out. Not sure if it'll require doing #16468 first