Support for Custom Logic and Feedback Mechanisms in Code Connect Dev Mode

[siddharthkul]

👋 Hi Figma team,

We’ve recently released Code Connect for our components, and they are now visible in Figma Dev Mode, which has been a great addition to our workflow. I’m now looking to extend the functionality and would like to propose a couple of features that would greatly benefit library maintainers like us.

Feature 1: Ability to Add Custom React Logic in Dev Mode

I’d like to request the ability to inject custom logic into the Dev Mode interface via the Code Connect configuration. Specifically, I’m envisioning a feedback mechanism (e.g., thumbs up/down) that would allow us to gather insights from developers interacting with the components directly within Dev Mode.

Here is what our current config looks like:

{
  "codeConnect": {
    "parser": "react",
    "label": "React",
    "include": [
      "**/*.tsx"
    ],
  }
}

Would it be possible to extend this configuration to support custom logic that can render within Dev Mode? This would allow us to add interactive elements like feedback mechanisms and gather real-time data from developers using the components.

It would be even better if Figma team can support this natively for us and expose the data via some analytics dashboard!

---

Feature 2: Callback Function for Interactions in Code Connect

In addition to adding custom logic, we’d love to have a way to trigger callback functions when actions are performed within Code Connect, such as selecting or copying a snippet of code. This would be beneficial for tracking component usage and developer engagement within Figma.

Is there any existing functionality or workaround to implement this, or could it be considered for a future update?

---

Thank you for your consideration, and I’m happy to provide further details or examples if needed.

Best regards,
Siddharth