Skip to main content

Hi there, Can someone provide an example of the [createVideoAsync](https://www.figma.com/plugin-docs/api/properties/figma-createvideoasync) function, and some clearer examples and use cases for when you would use this?


I’m hoping to create a plugin that can filter video and found this createVideoAsync function in the api. It’s unclear to me what the intended purpose of this function is, since it’s not possible to pull in a video directly from a node’s fill at the moment.


My best guess is that it will allow you to take an external mp4 and create a video object from it, which could then be set to a layer’s fill. But then how would you upload that video with the plugin, and how would you convert it to a Uint8Array?


Thanks!

I’m trying to track down an example of filling a node with a video. Hope they provide more documentation on createVideoAsync too!

Okay, after playing with it some more I got it working. My use case involves getting a video in the plugin UI and passing that to the plugin code to set the video as a fill. See UI and plugin code below.


Here is the UI code that gets the video form a URL and passes it to the plugin code:


fetch(url).then(res => res.arrayBuffer()).then(buffer => {

	parent.postMessage({ pluginMessage: { 

		type: "setVideo",

		video: new Uint8Array(buffer), 

	}}, "*")

})

And in the plugin code, I use the data passed with createVideoAsync and set the video as the fill on the currently selected layers. Note: In my case I have multiple messages I receive in the plugin code, hence the switch statement, but I’ve omitted the others. Plugin code:


figma.ui.onmessage = msg => {

	const selection = figma.currentPage.selection

	switch(msg.type) {

		case "setVideo":



			figma.createVideoAsync(msg.video).then(async (video: Video) => {

				selection.forEach((node: RectangleNode|PolygonNode|EllipseNode|VectorNode|FrameNode|InstanceNode) => {

					if (/RECTANGLE|POLYGON|ELLIPSE|VECTOR|FRAME|INSTANCE/.test(node.type)) {

						node.fills = ={ type: 'VIDEO', videoHash: video.hash, scaleMode: "FILL" }]

					}

				})

				figma.closePlugin()

			})



		break

	}

}

Hope this helps other people looking for an example!

Reply


Terms & ConditionsCookie settings