Designer’s Guide

Videos

Here is a list of the possible options to embed a video into your webpages with figma.to.website.

Youtube & Vimeo

figma.to.website comes with pre-built components for popular video players. You can find them in the “Components” tab of the plugin.
image 16
Drag-and-drop the component from the plugin into the Figma canvas to add the corresponding video player to your pages.

This will create a Figma component with properties already set up so all you need to do is fill out your preferences:
image 17
You can embed any other video player by embedding the HTML of the player. If you need any help, please contact us.

GIF animations

GIF files are natively supported by Figma. Simply drag-and-drop them into your Figma canvas and place them in your webpage.

Keep in mind that GIF videos are very large and limited to 256 colors.
GIF files consume storage space in your figma.to.website plan.

MP4 videos

MP4 files are natively supported by Figma for anyone with a Professional plan. Just drag and drop your videos into Figma to use them in your designs.
figma.to.website only supports MP4 videos in public Figma files, for now, as we don’t currently have access to an API to download MP4 videos from private Figma files. See below for a workaround.
MP4 videos in private Figma files To publish MP4 videos from private Figma files, use the custom code embed option under ‘Advanced components’ and name the layer using the following HTML <video> tag:
<video controls src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" width="320">
Demo Inspect in Figma and on the web
This option requires that you host the MP4 files on another server as we don’t currently offer custom file hosting. It’s coming soon!
Made
with