Making Network Requests
Making network requests with widgets is very similar to making network requests with plugins.
It's mostly the same as in normal JavaScript running directly inside of a web browser: the only caveat is that the APIs for making network requests are provided by the browser, not by the Figma sandbox itself. As a result, you will need to create an <iframe>
to access these browser APIs.
The widget below demonstrates this. It creates an invisible <iframe>
as a worker, then uses that to make a network request. When it gets the result of that network request, it sets and updates the state of the widget.
const { widget } = figma
const { Text, useSyncedState, useEffect, waitForTask } = widget
function NetworkWidget() {
const [text, setText] = useSyncedState("text", "initial")
useEffect(() => {
waitForTask(new Promise(resolve => {
figma.showUI(__html__, { visible: false })
figma.ui.postMessage({ type: 'networkRequest' })
figma.ui.onmessage = async (msg) => {
// Update the widget state!
setText(msg)
// Resolve the task since we are done!
resolve()
}
}))
})
}
widget.register(NetworkWidget)
The worker (the invisible "UI" which is the content of the <iframe>
) is implemented in a separate file referred to by the ui
section of manifest.json
. Here, the worker simply makes a standard XMLHttpRequest
and sends the results back to the main thread.
<script>
window.onmessage = async (event) => {
if (event.data.pluginMessage.type === 'networkRequest') {
var request = new XMLHttpRequest()
// This link has random lorem ipsum text
request.open('GET', 'https://cors-anywhere.herokuapp.com/http://www.randomtext.me/download/text/lorem/ul-8/5-15')
request.responseType = 'text'
request.onload = () => {
window.parent.postMessage({pluginMessage: request.response}, '*')
};
request.send()
}
}
</script>
Because widgets run inside a browser environment, Cross-Origin Resource Sharing policies apply. Widget iframes have a null origin, which means that they will only be able to call APIs with
Access-Control-Allow-Origin: *
(i.e., those that allow access from any origin). In the example above, we use a CORS proxy for simplicity, but it's not something you generally need to or should use.