Skip to main content

Network Connections

Due to the security restrictions of the Figma plugin environment, it is necessary to implement a CDN through CloudFront. This allows for content distribution and caching of files or responses in different parts of the world. In this case, CloudFront is used specifically to manage and cache the headers required for communication between the Plugin and the Web App.

During the testing phase, all plugin connections will be made through the following endpoint:

https://d5fggkn3swebd.cloudfront.net/

The purpose of this service is to provide the necessary headers in the request's response to avoid CORS-related issues.

Additionally, it is important to understand how to enable access for external requests from the plugin. To do this, you must specify which domains are allowed to make requests in the plugin's manifest file.

{
  "name": "MyPlugin",
  "id": "737805260747778092",
  "api": "1.0.0",
  "main": "code.js",
  "ui": "ui.html",
  "networkAccess": {
    "allowedDomains": [],
    "reasoning": "",
    "devAllowedDomains": []
  }
}

Limitations​

Being in a controlled environment and lacking access to most Web APIs means that libraries like axios cannot be used for network connections. However, Figma provides a limited fetch API that allows us to make requests. Therefore, to make requests from the sandbox, it is necessary to use Figma's fetch API.

References​