Question around `documentUrlSubstitutions` for Code Connect config

General Discussion
1

I’m trying to setup my code-connect project very similar to @figma/sds where in the figma.config.json file they’re in a rather clever method of leveraging documentUrlSubstitutions to do value replacement for the Figma document URL.

Config

{
  "codeConnect": {
    "include": ["./src/components/**/*.{tsx,jsx}"],
    "exclude": ["**/utils/*"],
    "parser": "react",
  },
  "documentUrlSubstitutions": {
    "<FIGMA_INPUT>": "https://www.figma.com/design/:file_id_here?node-id=:node_id_here",
  }
}

Component:

figma.connect(Input, '<FIGMA_INPUT>', {
    // code is here
});

Error:

Validating Code Connect files...
Failed to parse <FIGMA_INPUT>

Any insights or is there a custom implementation I am missing? [details left out for privacy]

2

You’ve probably figured this out by now - but answering so others don’t run into the same issue.

The error here appears to be because documentUrlSubstitutions is not nested under codeConnect.

The config should look like this instead:

{
  "codeConnect": {
    "include": ["./src/components/**/*.{tsx,jsx}"],
    "exclude": ["**/utils/*"],
    "parser": "react",
    "documentUrlSubstitutions": {
      "<FIGMA_INPUT>": "https://www.figma.com/design/:file_id_here?node-id=:node_id_here",
    }
  }
}

Hopefully, that helps.

1 Like