Figma Code Connect ☂️

[alisonjoseph]

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

Beta Give feedback

1. Research & Test Basic code connect setup #16349
   role: dev 🤖 +1
   
2. Figma Code Connect: Research Storybook integration
3. Research/Connect simple component (Button)
4. Research/Connect (Dropdown)
5. Research/Connect nested component (Accordion)
6. Research/Connect nested component (Tabs)
7. Figma Code Connect: Research/Connect complex components #16560
   +0
   
8. Figma Code Connect: Audit/Connect all components
9. Figma Code Connect: Set up CI / github actions to automatically publish updates #16561
   +0
   
10. Figma Code Connect: Integrate with Storybook #16429
    role: dev 🤖 +1
11. Figma Code Connect: Connect Icon library https://github.com/figma/code-connect/blob/main/react/scripts/README.md
12. Figma Code Connect: Testing plan #16562
    +0
13. Figma Code Connect: Research connecting Grid (layouts in Figma?) #16563
    +0
14. Figma Code Connect: Research variety of complex components #16526
    +0
    
15. Figma Code Connect: Estimate effort to complete connecting components #16527
    role: dev 🤖 +1
    

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

Beta Give feedback

1. Code Connect : Accordion #16661
   +0
2. Code Connect : Breadcrumb
3. Code Connect : Button
4. Code Connect : Checkbox
5. Code Connect : Code snippet
6. Code Connect : ContainedList, ContainedListItem #16656
   area: code connect role: dev 🤖 +2
7. Code Connect : Content switcher #16657
   area: code connect role: dev 🤖 +2
8. Code Connect : Date picker #16658
   area: code connect role: dev 🤖 +2
9. Code Connect : Dropdown #16659
   area: code connect role: dev 🤖 +2
10. Code Connect : File uploader #16660
    area: code connect role: dev 🤖 +2
11. Code Connect : Form #16662
    area: code connect role: dev 🤖 +2
12. Code Connect : Link
13. Code Connect : ListItem, OrderedList, UnorderedList #16663
    area: code connect role: dev 🤖 +2
14. Code Connect : Loading, InlineLoading #16664
    area: code connect role: dev 🤖 +2
15. Code Connect : Menu, MenuItem #16665
    area: code connect role: dev 🤖 +2
16. Code Connect : MenuButton #16666
    area: code connect role: dev 🤖 +2
17. Code Connect : Modal #16687
    area: code connect role: dev 🤖 +2
18. Code Connect : Notification
19. Code Connect : Number input #16686
    area: code connect role: dev 🤖 +2
    
20. Code Connect : Popover #16685
    area: code connect role: dev 🤖 +2
21. Code Connect : Progress bar #16683
    area: code connect role: dev 🤖 +2
22. Code Connect : Progress indicator #16684
    area: code connect role: dev 🤖 +2
23. Code Connect : Radio button #16682
    area: code connect role: dev 🤖 +2
    
24. Code Connect : Search #16681
    area: code connect role: dev 🤖 +2
    
25. Code Connect : Select #16680
    area: code connect role: dev 🤖 +2
    
26. Code Connect : Slider #16679
    area: code connect role: dev 🤖 +2
27. Code Connect : Structured list #16678
    area: code connect role: dev 🤖 +2
28. Code Connect : Tabs
29. Code Connect : Tag #16677
    area: code connect role: dev 🤖 +2
30. Code Connect : Textarea #16676
    area: code connect role: dev 🤖 +2
31. Code Connect : Text input #16675
    area: code connect role: dev 🤖 +2
32. Code Connect : Tile #16673
    area: code connect role: dev 🤖 +2
33. Code Connect : Toggle #16674
    area: code connect role: dev 🤖 +2
    
34. Code Connect : Toggletip #16672
    area: code connect role: dev 🤖 +2
35. Code Connect : Tooltip #16671
    area: code connect role: dev 🤖 +2
36. Code Connect : Treeview #16670
    area: code connect role: dev 🤖 +2
37. Code Connect : UI Shell #16669
    area: code connect role: dev 🤖 +2
38. Code Connect : AI slug #16668
    area: code connect role: dev 🤖 status: blocked 🙅‍♀️ +3
39. Code Connect : Data table #16667
    area: code connect role: dev 🤖 +2

[alisonjoseph]

Need to be able to access nested component properties - figma/code-connect#11

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

Components with no issues 🥳

• Button
• Link

Components tested with issues/bugs 🐞

Dropdown / DropdownSkeleton

• DropdownSkeleton doesn't support helper text in code [Bug]: DropdownSkeleton missing helper text and caret #16430

Accordion / AccordionItem / AccordionSkeleton

• Size, flush and alignment props are set on Accordion in code and Accordion item in Figma. Combine properties from nested instances figma/code-connect#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 Can you target "Text" layers as "children"? figma/code-connect#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
  • Missing notification status icons in Figma kit carbon-design-kit#812
• Figma doesn't allow you to hide the close button on a toast notification, code does. Not sure which is correct?
• Notification is missing inline long variant  #16431
• possible variant restriction bug
  • variant restriction boolean bug figma/code-connect#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.
  • Combine properties from nested instances figma/code-connect#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
  • Nested component variant restriction bug figma/code-connect#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.
• CheckboxGroup missing horizontal variant #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.

CodeSnippet

• Disabled state missing from all variants
  • [CodeSnippet]: Disabled state missing carbon-design-kit#821

Inline

• [CodeSnippet - inline]: Code snippet item is nested inside of Tooltip carbon-design-kit#820
• Unable to pull tooltip text into component

Single

• Can't hide copy button in Figma
• Can't bring code snippet text into code due to it being a text layer
  • Can you target "Text" layers as "children"? figma/code-connect#30

Multiline

• Line numbers missing in code
  • [code snippet] add line number modifier #6519
• Can't target show more button text, in Figma it is a nested button component, in React it is a prop.

Skeleton

• Singleline skeleton not available in Figma

Toggle

• Variant restriction bug variant restriction boolean bug figma/code-connect#45

[alisonjoseph]

@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]

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]

@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]

@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]

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.