Figma Code Connect

[calebnance]

hey @HenriqueLimas

i think Stephen has already talked to you about this coming down the pipeline. please add anyone else to this PR that might need to be on here.

this is the first go at it, but i have mapped most if not all components to our DS library on figma. i wanted to get this in front of y'all so we can talk around it, and let me know of any changes needed. you can test this right now on designs that use our ds components, just make sure you're in dev mode.

also the more i looked at it; there are definitely different namings + how DS has structured their components vs how the React components are structured, so i did the best i could where things are not 1:1.

example when in dev mode:

i have also hooked up variant handling where i could:

checkbox with no label	checkbox with label

[HenriqueLimas]

Thank you for the PR. In the @figma/code-connect documentation, they suggest to use storybook instead. Isn't possible to use our stories instead?

[HenriqueLimas]

I think we need to also add a new script that we will need to use to make the connection

"scripts": {
   ...,
   "figma:connect": "figma connect publish \"https://...\" --token $FIGMA_TOKEN"
}

[calebnance]

@HenriqueLimas this has been added, thanks!

[darkwebdev]

https://help.figma.com/hc/en-us/articles/360045003494-Storybook-and-Figma

[shpandian]

@calebnance did we also go through SAFE review? if so can you attach a SAFE ticket in the PR description as well?

[darkwebdev]

@HenriqueLimas
So is this for storybook or for figma? Looks like developers who look at designs in figma can use the generated code easily, right?

[calebnance]

@darkwebdev @HenriqueLimas

Basically it creates dynamic code snippets, taking the properties data available and injects where it should be in the code.

So as a designer, i set the title to: "Hello, this is a title"

Then as a developer, in Dev Mode, the code snippet has "Hello, this is a title" in the <EbayDialogHeader />