Code Snippets without Code Connect

[timbomckay]

Describe the feature you'd like:

Code snippets without Code Connect

I'm still getting familiar with Figma, Dev Mode, and Code Connect, but from my exploration it seems like a lot of the functionality should already be within Figma's UI.

Designers are already able to create components in the UI, as well as define component properties.

For instance, in the Component Properties playground we already get the Button component's properties in dev mode:

But we don't get any code snippet unless Code Connect is linked:

So a developer would have to link Code Connect and provide something like:

figma.connect('https://...', {
  props: {
    label: figma.string('Text Content'),
    disabled: figma.boolean('Disabled'),
    type: figma.enum('Type', {
      Primary: 'primary',
      Secondary: 'secondary',
    }),
    ...
  },
  example: ...

Which is essentially the same as the props a designer has already defined in the UI, just without the example.

As far as I can tell nothing is kept in sync automatically from the component's source code and the Figma snippet. If props are updated in the developer's component file they have to remember to go to the <component-name>.figma.ts file to add the new props, or update the example for new child layers/content/slots, etc. And in our minimal POC with React it seems like Code Connect is expecting a components directory and dictating codebase structure.

Instead of a developer having to use Code Connect (dealing with potential Enterprise firewall concerns), to altering their codebase to match Code Connect's requirements, to manually update a component's properties in a separate file (that has already been done in the UI, and the actual source code), to manually publish to Figma...enhance the UI to allow a developer (or even a savvy designer) to update directly.

Code Connect is already posting to something in the background, this would just be a UI in Figma to adjust what's already there. It'd be more streamlined, more immediate, fewer network concerns, and less redundancy to do everything Figma related within Figma. The properties functionality is already there, just need an option to provide examples for each framework and (perhaps optionally) the relevant import/package details.

Essentially, Code Connect appears to be a manual & static process with some extra steps outside of Figma that could be easily done with fewer steps inside of Figma. The info that Figma uses doesn't change enough to need constant publishing for every release.

Maybe there's stronger use cases that would warrant direct codebase integration, but I think the flexibility in the solutions would be ideal. If someone uses Code Connect it'd lock the UI to prevent changes, possibly allowing someone to unlock for manual updates in the event that someone forgot to update the snippet in the codebase or no longer uses Code Connect.

This might be a feature for Figma itself, but I figured posting here was a good starting point.

Alternatively, provide a build plugin to publish the desired output format from the source code for a more automated process or accept something like a Custom Elements Manifest. Anything to reduce what currently feels like duplicated effort.

[tomduncalf-figma]

Hey @timbomckay, thanks for the interesting feedback. We'll definitely keep this in mind as we continue to develop Code Connect, I can see an argument for enabling some editing within the UI. At the same time, we think there are a lot of benefits to the source of truth being your codebase, for example type-checking and autocompletion when writing examples.

I wanted to ask about this:

it seems like Code Connect is expecting a components directory and dictating codebase structure

This should not be the case, can you expand on the issue you're having? Thanks!