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

Preview Give feedback

1. Research & Test Basic code connect setup #16349
   area: AI4UX role: dev 🤖 +2
   
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
   area: AI4UX role: dev 🤖 +2
   
8. Figma Code Connect: Set up CI / github actions to automatically publish updates #16561
   area: AI4UX +1
   
9. Figma Code Connect: Integrate with Storybook #16429
   area: AI4UX role: dev 🤖 +2
10. Figma Code Connect: Research variety of complex components #16526
    +0
    
11. Figma Code Connect: Estimate effort to complete connecting components #16527
    area: AI4UX role: dev 🤖 +2
    
12. Code Connect: Upgrade to 1.0 and verify bugs fixed #16815
    area: AI4UX role: dev 🤖 +2
    

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

Preview 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 : Tabs
7. Code Connect : Notification
8. Code Connect : Link
9. Code Connect : Content switcher #16657
   area: AI4UX role: dev 🤖 +2
   
10. Code Connect : ListItem, OrderedList, UnorderedList #16663
    area: AI4UX role: dev 🤖 +2
    
11. Code Connect : Loading, InlineLoading #16664
    area: AI4UX role: dev 🤖 +2
    
12. Code Connect : Number input #16686
    area: AI4UX role: dev 🤖 +2
    
13. Code Connect : Progress bar #16683
    area: AI4UX role: dev 🤖 +2
    
14. Code Connect : Radio button #16682
    area: AI4UX role: dev 🤖 +2
    
15. Code Connect : Search #16681
    area: AI4UX role: dev 🤖 +2
    
16. Code Connect : Select #16680
    area: AI4UX role: dev 🤖 +2
    
17. Code Connect : Toggle #16674
    area: AI4UX role: dev 🤖 +2
    
18. Code Connect : ContainedList, ContainedListItem #16656
    area: AI4UX role: dev 🤖 +2
    
19. Code Connect : Date picker, Fluid Date picker #16658
    area: AI4UX role: dev 🤖 +2
    
20. Code Connect : Dropdown, Fluid Dropdown #16659
    area: AI4UX role: dev 🤖 +2
    
21. Code Connect : File uploader #16660
    area: AI4UX role: dev 🤖 +2
    
22. Code Connect : Form #16662
    area: AI4UX role: dev 🤖 +2
    
23. Code Connect : Menu, MenuItem #16665
    area: AI4UX role: dev 🤖 +2
    
24. Code Connect : MenuButton, OverflowMenu, ComboButton #16666
    area: AI4UX role: dev 🤖 +2
    
25. Code Connect : Modal #16687
    area: AI4UX role: dev 🤖 +2
    
26. Code Connect : Popover #16685
    area: AI4UX role: dev 🤖 +2
    
27. Code Connect : Progress indicator #16684
    area: AI4UX role: dev 🤖 +2
    
28. Code Connect : Slider #16679
    area: AI4UX role: dev 🤖 +2
    
29. Code Connect : Structured list #16678
    area: AI4UX role: dev 🤖 +2
    
30. Code Connect : Tag #16677
    area: AI4UX role: dev 🤖 +2
    
31. Code Connect : TextArea, Fluid TextArea #16676
    area: AI4UX role: dev 🤖 +2
    
32. Code Connect : Text input, Fluid Text input #16675
    area: AI4UX role: dev 🤖 +2
    
33. Code Connect : Tile #16673
    area: AI4UX role: dev 🤖 +2
    
34. Code Connect : Toggletip #16672
    area: AI4UX role: dev 🤖 +2
    
35. Code Connect : Tooltip, DefinitionTooltip #16671
    area: AI4UX role: dev 🤖 +2
    
36. Code Connect : Treeview #16670
    area: AI4UX role: dev 🤖 +2
    
37. Code Connect : UI Shell #16669
    area: AI4UX role: dev 🤖 +2
    
38. Code Connect : Data table #16667
    area: AI4UX role: dev 🤖 +2
    
39. Code Connect : Multiselect, FluidMultiSelect, FilterableMultiSelect, FluidFilterableMultiSelect #16956
    area: AI4UX role: dev 🤖 +2
    
40. Code Connect: ComboBox #16955
    area: AI4UX role: dev 🤖 +2
    
41. Code Connect: TimePicker, FluidTimePicker #16954
    area: AI4UX role: dev 🤖 +2
    
42. Code Connect: PasswordInput #17044
    area: AI4UX role: dev 🤖 +2
    
43. Code Connect: Pagination, PaginationNav #17050
    area: AI4UX role: dev 🤖 +2
    
44. Code Connect : AI label #16668
    area: AI4UX role: dev 🤖 +2
    
45. Code Connect: Vertical tabs #17073
    area: AI4UX role: dev 🤖 +2
    

[alisonjoseph]

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

Variable modes aren't currently supported. (we are using them for AI presence) figma/code-connect#6

Components with no issues 🥳

• Button
• Link
• Select
• Search
• Accordion, AccordionItem
• Toggle
• ContentSwitcher
• Loading
• InlineLoading
• TextInput, TextInputSkeleton
• TextArea
• Dropdown
• Slider
• Tooltip, DefinitionTooltip
• Modal
• Popover
• Menu
• OverflowMenu (parent component only)
• ComboButton
• MenuButton
• MultiSelect
• FilterableMultiSelect
• StructuredList
• Tag
• ComboBox

Components tested with issues/bugs 🐞

FluidComboBox

• "Show tooltip" missing from code Can I combine string and children values and map them to one property? figma/code-connect#92

FluidMultiSelect

• "Show tooltip" missing from code Can I combine string and children values and map them to one property? figma/code-connect#92

Treeview

• Figma component isn't built with nesting
• Icon within the tree node is just a child component, not a swap icon

OverflowMenuItem

• Figma has one Menu item component that maps to two different React components depending on the context. So we aren't able to map this.

MenuItem

• Nested menus aren't able to be fully connected

Form

• 2 column form isn't connected, need to figure out layouts/grid
• form modal isn't connected

Time picker

• [Time picker]: missing error, warning states and show/hide label  carbon-design-kit#853

Date picker

• Simple
  • "Show label " should be "Show label" Extra space causing error with code connect
  • Show label missing from skeleton state
• Single
  • "Show label" missing from Figma component & skeleton state
• Fluid single
• "Show tooltip" missing from code Can I combine string and children values and map them to one property? figma/code-connect#92

ProgressIndicator

• Skeleton state is the entire component in React, but individual steps in Figma. Variant restriction from nestedProps figma/code-connect#91

Fluid components

• [FluidComponents]: missing readOnly state  #16939

FluidTextInput

• [FluidTextInput]: missing enableCounter #16938

ContainedList

• Need to be able to combine values (label+tooltip)
  • Can I combine string and children values and map them to one property? figma/code-connect#92
• Need to be able to either create a variant restriction from a nested property or combine boolean from nestedProps
  • Variant restriction from nestedProps figma/code-connect#91, combine figma.boolean with figma.nestedProps figma/code-connect#89

UnorderedList/OrderedList

• Nested lists are built differently in code vs. Figma.

FluidSearch, FluidSearchSkeleton

• FluidSearch and FluidSearchSkeleton aren't being exported #16809
• [FluidSearch]: Skeleton state missing from Figma carbon-design-kit#839

RadioButton

• Props in Figma can be set on individual radio buttons vs. code where they are set on the group
• labeltext, warningtext, helpermessage, warningmessage, errormessage, helpertext, errortext, label
• Use case for ever having only one radio button? Arguable that should always use RadioButtonGroup.

FluidSelect

• Ignoring component name in import when using an alias figma/code-connect#62
• showtooltip not supported in code

NumberInput / NumberInputSkeleton

• [Bug]: NumberInputSkeleton doesn't support helper text or sizes #16717
• value prop is a text layer Can you target "Text" layers as "children"? figma/code-connect#30

Dropdown / DropdownSkeleton

• [Bug]: DropdownSkeleton missing helper text and caret #16430

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.
• fixed 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
• variant restriction bug variant restriction boolean bug figma/code-connect#45
• no static notifications in Figma (experimental in code)
• ActionableNotification buttons in Figma are child Button components, however in code they are a prop - actionButtonLabel- nested two components deep in Figma is causing an error.
  • Combine properties from nested instances figma/code-connect#11 (comment)

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
• fixed 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 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.

[alisonjoseph]

Closing, remaining work being tracked here #17606