Skip to main content

Uploading and managing files (images, videos, and PDFs)

Upload images, videos, and PDFs to use in your web page designs and layouts. Files are uploaded to the Assets panel, where you can manage them. Here's how to upload, organize, and delete your files.

About file uploads


Uploading files

Uploaded files are stored in the Assets panel, which is shared between the Editor and the CMS dashboard. You can upload files to the Assets panel in either of the following ways.

Ways to upload files

  • Drag and drop files directly onto the Editor screen or the CMS editing screen

  • Add them from the upload panel in the Editor or CMS

Note: You can't upload video files through Figma to Studio.

Adding files by drag and drop

  1. Open the Design Editor and go to any page.

  2. Drag and drop the file onto the screen.

Adding files from the upload panel

  1. In the left-hand navigation, click the [Uploads] icon to open the upload panel.

  2. Click [+] at the top of the panel, select [Upload file], and choose the file you want to add.


Renaming a file

  1. In the left-hand navigation, click the [Uploads] icon to open the upload panel.

  2. Double-click the file name to edit it.


Deleting files

How file deletion works

  • When you delete a file, it's moved to the Trash first.

  • To remove it from the project completely, delete it from the Trash as well.

  • Files deleted from the Trash can't be restored, even with Version History.

Deleting a single file

  1. In the left-hand navigation, click the [Uploads] icon to open the upload panel.

  2. Hover over the thumbnail of the file you want to delete.

  3. Click the trash icon that appears to delete it.

Tip: The delete button doesn't appear in the panel that opens when you double-click a box already placed on a page.

Deleting multiple files at once

  1. In the left-hand navigation, click the [Uploads] icon to open the upload panel.

  2. Select the files you want to delete.

  3. In the blue bar that appears at the bottom of the panel, click the trash icon to delete them all at once.

Deleting files from the Trash

  1. In the left-hand navigation, click the [Uploads] icon to open the upload panel.

  2. In the folder menu at the top left of the panel, select [Trash].

  3. Select the file (or folder) you want to delete.

  4. Click the blue bar at the bottom of the panel.

  5. Click [Delete permanently] to remove the file from the Trash.


If you can't rename or delete a file

If you can't rename or delete an image or file, the panel you're working in may be the reason. Studio.Design has two types of panels for handling images and videos.

Panel

How to open it

What you can do

Upload panel

Click the [Uploads] icon on the left side of the screen

Add and delete files, and rename folders

Upload & Replace panel

Double-click an image box or video box that's already placed on the page

Always use the upload panel to rename or delete files and folders.


Viewing, sorting, and searching files

Use the search bar in the upload panel and the icons to its right to change how files are displayed, sort them, or search for them.

Searching with the search bar

Type a file or folder name into the search bar to quickly find what you're looking for.

Changing the display style

You can switch between grid view and list view.

Sorting files

You can sort files by oldest or newest upload date.

Filtering by file type

You can narrow down the file types shown in the panel. Choose from "All," "Images," "Videos," or "PDF."

Tip: You can also filter by file type using the [All][Images][Videos][PDF] icons at the top of the panel.


Managing and moving folders

Creating a folder

  1. In the left-hand navigation, click the [Uploads] icon to open the upload panel.

  2. Click [+] at the top of the panel and select [Create folder].

  3. A new folder named [NewFolder] is created.

    You can store any type of file in the same folder.

    Screenshot: Selecting [Create folder] in the upload panel.

Renaming a folder

  1. In the left-hand navigation, click the [Uploads] icon to open the upload panel.

  2. Select and open the folder you want to rename.

  3. Click the folder name at the top of the panel ([NewFolder] for newly created folders) to enable the input field.

Deleting a folder

  • When you delete a folder, it's moved to the Trash first.

  • Deleting it from the Trash removes it from the project permanently.

Tip: Double-clicking a box already placed on a page opens the Upload & Replace panel. This panel doesn't include a delete button.

Deleting a single folder

  1. In the left-hand navigation, click the [Uploads] icon to open the upload panel.

  2. Hover over the folder's thumbnail.

  3. Click the trash icon that appears to delete it.

Deleting multiple folders at once

  1. In the left-hand navigation, click the [Uploads] icon to open the upload panel.

  2. Select the folders you want to delete.

  3. In the blue bar that appears at the bottom of the panel, click the trash icon to delete them all at once.

Adding files to a folder

You can upload files using the [Upload file] button or the [+] at the top of the panel.

To move files you've already uploaded into a folder, just drag and drop them.

Changing where a file is stored

Tip: You can drag and drop a single file to move it within the same level. Drag and drop isn't available when multiple files are selected.

  1. In the left-hand navigation, click the [Uploads] icon to open the upload panel.

  2. Hover over the file and select the checkbox at the top left of its thumbnail.

  3. In the blue bar that appears at the bottom of the panel, click the move-to-folder icon and choose the destination folder.

    Screenshot: Changing the folder where a file is stored. A blue bar appears at the bottom of the upload panel, with a move-to-folder icon and a trash icon on the right side. The bar reads [1 selected].

Using uploaded files and related links

To learn how to use the images, videos, and PDF files you've uploaded, see the articles below.

image picture

イメージ 写真 素材

Did this answer your question?