Issue during connection: TypeError: fetch failed

[EcMscS]

Trying to connect a new Xcode project to Figma design, however I'm getting the following error each time: TypeError: fetch failed

Ran the following command:

npx figma connect --token XXXXXXXX -v

┌─────────────────────────────────────────────────────────────────────────────────────┐ │ │ │ Welcome to Code Connect │ │ │ │ Follow a few simple steps to connect your Figma design system to your codebase. │ │ When you're done, you'll be able to see your component code while inspecting in │ │ Figma's Dev Mode. │ │ │ │ Learn more at https://www.figma.com/developers/code-connect. │ │ │ │ Please raise bugs or feedback at https://github.com/figma/code-connect/issues. │ │ │ │ Note: This process will create and modify Code Connect files. Make sure you've │ │ committed necessary changes in your codebase first. │ │ │ └─────────────────────────────────────────────────────────────────────────────────────┘

No config file found in /Users/XXXX/Developer/XXXX/FigmaConnect, proceeding with default options Using "swift" parser as a file matching *.xcodeproj or Package.swift was found in /Users/XXXX/Developer/XXXXX/FigmaConnect. If this is incorrect, please check you are running Code Connect from your project root, or add a parser key to your config file. See https://github.com/figma/code-connect for more information.

✔ Which top-level directory contains the code to be connected to your Figma design system? (Press enter to use current directory) …

✔ What is the URL of the Figma file containing design components you'd like to connect? … https://www.figma.com/design/XXXXXX/Mobile-App-Components

Fetching component information from https://api.figma.com/v1/code_connect/XXXXXX/cli_data

TypeError: fetch failed Please raise any bugs or feedback at https://github.com/figma/code-connect/issues.

Not sure if that is an issue in the component designs. Any help would be appreciated.

Please provide:

• Code Connect CLI version: 1.3.1
• Operating system: Sequoia 15.3.1

[CollinHerber]

I had the same issue just now and found out it was a CERT issue with my work's network security. If you have things like Zscaler going, disable the network security or fix your certificate to resolve.

[christinabannister-figma]

Apologies for the delay in getting back to you! If the above doesn't work, please let us know and we can help you investigate further.

[peimingming]

@christinabannister-figma

Hi Christina, I encountered the same issue when I was trying to Use the interactive setup to setup my SwiftUI components repo.

It said 'TypeError: fetched failed' when running figma connect in the root folder of our SwiftUI components repo.

But the difference from the issue description is - It didn't print this line log before the TypeError message - Fetching component information from https://api.figma.com/v1/code_connect/XXXXXX/cli_data

By the way, I am from HSBC, the enterprise customer of Figma.

Thank you so much in advance!!!

cc @CollinHerber Hi CollinHerber, could you please also suggest on this, thank you so much in advance?

[christinabannister-figma]

@peimingming are you successfully able to give the CLI the file URL? That looks to be the only thing that happens prior to fetching component information

It might be easier to share your full logs 😃

[peimingming]

@peimingming are you successfully able to give the CLI the file URL? That looks to be the only thing that happens prior to fetching component information

It might be easier to share your full logs 😃

@christinabannister-figma

Thank you so much for your prompt reply, see my log as below:

xxx my-design-components-ios-lib % node -v
v22.11.0
xxx my-design-components-ios-lib % figma -V 
1.3.2
xxx my-design-components-ios-lib % figma connect

   ┌─────────────────────────────────────────────────────────────────────────────────────┐
   │                                                                                     │
   │                               Welcome to Code Connect                               │
   │                                                                                     │
   │   Follow a few simple steps to connect your Figma design system to your codebase.   │
   │   When you're done, you'll be able to see your component code while inspecting in   │
   │                                  Figma's Dev Mode.                                  │
   │                                                                                     │
   │            Learn more at https://www.figma.com/developers/code-connect.             │
   │                                                                                     │
   │   Please raise bugs or feedback at https://github.com/figma/code-connect/issues.    │
   │                                                                                     │
   │   Note: This process will create and modify Code Connect files. Make sure you've    │
   │                 committed necessary changes in your codebase first.                 │
   │                                                                                     │
   └─────────────────────────────────────────────────────────────────────────────────────┘

No config file found in ~/my-design-components-ios-lib, proceeding with default options
Using "swift" parser as a file matching *.xcodeproj or Package.swift was found in ~/my-design-components-ios-lib. If this is incorrect, please check you are running Code Connect from your project root, or add a `parser` key to your config file. See https://github.com/figma/code-connect for more information.

✔ Which top-level directory contains the code to be connected to your Figma design system? (Press enter to use current directory) … ./MyComponentsFolder

✔ What is the URL of the Figma file containing design components you'd like to connect? … https://www.figma.com/design/{my-file-key}

TypeError: fetch failed
Please raise any bugs or feedback at https://github.com/figma/code-connect/issues.
xxx my-design-components-ios-lib % 

But when I turned on the verbose log by running - figma connect --verbose, then it'd print one more log before the TypeError: fetch failed: Fetching component information from https:/api.figma.com/v1/code_connect/{my-file-key}/cli_data

it displayed 403 status code, when I open the above cli link: {"status": 403, "error": true, "message": "Invalid token"}

Hit the same error even though when I duplicated the Figma design file to my own drafts and used the new file key.

[christinabannister-figma]

Hey @peimingming thanks for the info! Just to verify, did you attempt the following?

I had the same issue just now and found out it was a CERT issue with my work's network security. If you have things like Zscaler going, disable the network security or fix your certificate to resolve.

I'll investigate on our end as well!

[peimingming]

Hey @peimingming thanks for the info! Just to verify, did you attempt the following?

I had the same issue just now and found out it was a CERT issue with my work's network security. If you have things like Zscaler going, disable the network security or fix your certificate to resolve.

I'll investigate on our end as well!

@christinabannister-figma To be honest, I have no idea how to disable the network security or fix my certificate, @CollinHerber could you please share more info on the solution?

Also, @christinabannister-figma I was wondering if we have a sample project for SwiftUI pretty much like the sds sample does?

[christinabannister-figma]

@peimingming I did ask my team about this and it seems we do not - however, I will see what we can do about this!

[peimingming]

@christinabannister-figma

I was wondering if we have a guide or some samples to follow to implement the Swift UI connect code in the code component lib, for we could not proceed at the interactive setup step.

Looking forward to your suggestions on this, thank you so much in advance.

[mmanikandan123]

I am facing the same issue while publishing the component to figma using VPN Enabled Network. Getting Type Error: fetch failed. If I disabled the VPN and was able to publish.

I need a solution to fix this issue. Is it possible to publish components to figma with a security enabled network?

Figma version 1.3.2 Parser: react Issue: unable to publish when VPN enabled.

@christinabannister-figma

[guzmaniglesias]

Same problem here

[christinabannister-figma]

Hey all, apologies, I was OOO. I'll follow up on this with the team and see what we can do. Definitely seems like less than ideal behavior.

@peimingming I'm unaware of any guides. So I'll also see what we can do to help with this.

[christinabannister-figma]

@peimingming have you seen this? https://www.figma.com/code-connect-docs/swiftui/

[peimingming]

@peimingming have you seen this? https://www.figma.com/code-connect-docs/swiftui/

@christinabannister-figma Yes, I did follow the SwiftUI guide, but I got stuck at the interactive setup, not able to generate the config file, while the SwiftUI doc is actually for the properties or macros we could use in the connect swift file, but I have no idea how I can proceed without a config file. 😮‍💨

[slees-figma]

Hey @peimingming! For setting up the config file you can follow this guide, which outlines all the available options: https://www.figma.com/code-connect-docs/api/config-file/

[DKirbi]

I had the same issue just now and found out it was a CERT issue with my work's network security. If you have things like Zscaler going, disable the network security or fix your certificate to resolve.

Thank you for your comment, it saved me from losing my mind. Disabling Network Security solved the issue for me.

[AugustoSandim]

I had the same problem using the CLI in my terminal, and I found a solution for me, it's: NODE_TLS_REJECT_UNAUTHORIZED=0 npx figma connect --token=YOUR_TOKEN -v

This command worked for me