Figma Code Connect ☂️

alisonjoseph commented 3 weeks ago

Research and test feasibility of using Figma Code Connect to link Carbon Figma and Carbon React for AI readiness.

Demo video https://www.youtube.com/watch?v=5GVNfbltrQg Demo repo https://github.com/jake-figma/code-connect-demo

### Tasks
- [x] https://github.com/carbon-design-system/carbon/issues/16349
- [x] Figma Code Connect: Research Storybook integration
- [x] Research/Connect simple component (Button)
- [x] Research/Connect (Dropdown)
- [x] Research/Connect nested component (Accordion)
- [x] Research/Connect nested component (Tabs)
- [ ] Figma Code Connect: Research/Connect complex component (Notifications)
- [ ] Figma Code Connect: Audit/Connect all components
- [ ] Figma Code Connect: Set up CI / github actions to automatically publish updates carbon-design-system/carbon#16348
- [ ] https://github.com/carbon-design-system/carbon/issues/16429
- [ ] Figma Code Connect: Connect Icon library https://github.com/figma/code-connect/blob/main/react/scripts/README.md
- [ ] Figma Code Connect: Testing plan
- [ ] Research connecting Grid

Audit/connect all components

Connect / attempt to connect all components. Document mismatch between Figma / code & create issues where appropriate. Followup with Figma / create issues on needed functionality.

### Components
- [x] Accordion
- [x] Breadcrumb
- [x] Button
- [x] Checkbox
- [ ] Code snippet
- [ ] Contained list
- [ ] Content switcher
- [ ] Date picker
- [x] Dropdown
- [ ] File uploaded
- [ ] Form
- [x] Link
- [ ] List
- [ ] Loading
- [ ] Menu
- [ ] Menu buttons
- [ ] Modal
- [x] Notification
- [ ] Number input
- [ ] Popover
- [ ] Progress bar
- [ ] Progress indicator
- [ ] Radio button
- [ ] Search
- [ ] Select
- [ ] Slider
- [ ] Structured list
- [x] Tabs
- [ ] Tag
- [ ] Textarea
- [ ] Text input
- [ ] Tile
- [ ] Toggle
- [ ] Toggletip
- [ ] Tooltip
- [ ] Treeview
- [ ] UI Shell
- [ ] AI slug
- [ ] Data table

alisonjoseph commented 2 weeks ago

Need to be able to access nested component properties - https://github.com/figma/code-connect/issues/11

Variable modes aren't currently supported. (we aren't using them in Figma currently, something to keep in mind) https://github.com/figma/code-connect/issues/6

Components with no issues 🥳

Button
Link

Components tested with issues/bugs 🐞

Dropdown / DropdownSkeleton

DropdownSkeleton doesn't support helper text in code https://github.com/carbon-design-system/carbon/issues/16430

Accordion / AccordionItem / AccordionSkeleton

Size, flush and alignment props are set on Accordion in code and Accordion item in Figma. https://github.com/figma/code-connect/issues/11
AccordionSkeleton in code refers to an entire component, in Figma it is a state on one of the AccordionItems so can't be mapped.

Tabs

TabPanel doesn't exist in Figma
Similar to above, many props in Figma exist on Tabs items when in code they are set on Tabs.
secondaryLabel isn't a property in Figma, just text. - on roadmap https://github.com/figma/code-connect/issues/30
TabsSkeleton in code refers to an entire component, in Figma it is a state on Tabs items so can't be mapped.
IconTab nesting bugs in dev mode in Figma

Notification

Figma is missing info-square and warning-alt Status that are available in React
- https://github.com/carbon-design-system/carbon-design-kit/issues/812
Figma doesn't allow you to hide the close button on a toast notification, code does. Not sure which is correct?
https://github.com/carbon-design-system/carbon/issues/16431
possible variant restriction bug
- https://github.com/figma/code-connect/issues/45
no static notifications in Figma (experimental in code)
Something to note, there may be cases where visually notifications look the same, but use a different component in React depending on a11y and focus requirements (static vs. actionable vs. inline).
ActionableNotification buttons in Figma are child Button components, however in code they are a prop - actionButtonLabel- need to see if we can pull properties from a child component in Figma into code sample.
- https://github.com/figma/code-connect/issues/11

DataTable

Data table header doesn't exist in code
Size properties don't match. Figma has 'XL / LG / MD' or 'SM / XS' where code has xs ,sm, md, lg, xl. Figma requires you set the size properties on different components vs. code.
WIP....
.. coming back to this one later

Breadcrumb / BreadcrumbItem

noTrailingSlash is set on parent Breadcrumb in code, in Figma it is set as current property on individual breadcrumb item component(s).
Skeleton state in Figma is set on individual Breadcrumb items vs. in code it is the entire Breadcrumb component.
OverflowMenu doesn't appear to be a child of BreadcrumbItem in Figma, so can't directly pull into dev mode code.
Variant restriction nesting bug
- https://github.com/figma/code-connect/issues/54

Checkbox / CheckboxGroup

indented in Figma doesn't exist in code, has to be added via custom styles by a dev in code.
label in Figma can be added to any Checkbox, although would only ever be added to the first item, in code it can only be added to a Checkbox group as legendText.
https://github.com/carbon-design-system/carbon/issues/16486
In Figma you can set the component state to warn or invalid and then hide the message, this is impossible in code, if the state is warn or invalid the icon for the message always shows up.

juanencalada commented 2 weeks ago

Hey @alisonjoseph regarding this comment above

DropdownSkeleton doesn't support helper text

Is that in Figma we are missing it, or it's not supported in code but we're showing it in Figma?

alisonjoseph commented 2 weeks ago

DropdownSkeleton doesn't support helper text

Is that in Figma we are missing it, or it's not supported in code but we're showing it in Figma?

@juanencalada its missing from code, I updated my comment above. Something we can definitely add, I just wanted to make a note of it.

alisonjoseph commented 2 weeks ago

@juanencalada I'm still pretty new to Figma, but was looking at seeing if there was a way to bring nested properties from children into their parent and found this. https://forum.figma.com/t/add-a-forward-props-property-on-parent-component-inherit-props-from-a-selected-child-component/27875/2 Would this work with the way things are built in Carbon?

juanencalada commented 2 weeks ago

Hey @alisonjoseph, yes this is possible and something we do in several components already. However, it happens for each nested component, so we don't do it in cases where we have lots of nested components like in an accordion or dropdown because it would make the properties panel really long and harder to navigate. Unfortunately, there's currently also no control over which nested props we want to surface, so it's all or nothing. Meaning, we might expose properties we don't want to expose. If for example we have an accordion with left aligned, and we exposed the props of all accordion items, the right align prop would be visible there too which would just be noise.

alisonjoseph commented 2 weeks ago

@juanencalada hmm, for Accordion specifically I think we would want most of the properties exposed. I suppose the ones that would be weird/confusing would be the state or titleText since those need to be set on the individual item. There should never be an instance where someone is right and left aligning items within the same Accordion.

alisonjoseph commented 1 week ago

@juanencalada another thing to keep in mind is that anything that changes or gets renamed in Figma will break Code Connect. It looks like sometime in the last few days Dropdown changed "Label text" to "Label" and that completely broke publishing. I was able to fix the error, however my sample Figma file with dropdown didn't update and code connect stopped working with an error that Label didn't exist when swapping to dev mode. Not sure how often changes like this happen?

juanencalada commented 1 week ago

Hey Alison, that makes sense and thanks for highlighting this! I don't think this happens too often. Most common would be around times when there are new feature releases or a component is getting updated for some reason.

This one in particular I had noticed the other day that the naming of the props wasn't matching how we name similar props in other components so that's probably what changed here.

I think something we could do is a full audit of the component props to ensure we have the consistency we want at least within Figma to minimize any breaking changes, as well communicate around release schedules to ensure component props are aligned across design and dev.

Something that comes to mind is I wonder if good feedback for Figma might be having some alias associated with the props so that if a prop name changes it's not entirely dependent on that to make a connection from the Figma side. Just a thought but might not be much there.

carbon-design-system / carbon