Skip to main content

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": e"./src/components/**/*.{tsx,jsx}"],

    "exclude": e"**/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? ndetails left out for privacy]

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": e"./src/components/**/*.{tsx,jsx}"],

    "exclude": e"**/utils/*"],

    "parser": "react",

    "documentUrlSubstitutions": {

      "<FIGMA_INPUT>": "https://www.figma.com/design/:file_id_here?node-id=:node_id_here",

    }

  }

}

Hopefully, that helps.

Reply


Terms & ConditionsCookie settings