Figma Plugin

The Cloudinary Figma plugin streamlines your workflow and enhances team collaboration by integrating Cloudinary’s media management capabilities directly into the Figma environment. Using Cloudinary as the central source of truth for media files within your organization enables efficient management of large volumes of media.

Easily upload images from a Figma layer or artboard to Cloudinary, where they can be accessed by others through the Cloudinary Media Library, even outside of Figma. You can also insert images and videos shared with you from the Media Library, all without leaving the Figma interface. The plugin helps keep media assets organized and easily accessible within your design workflow.

In addition to facilitating collaboration, the plugin offers a rich set of media management capabilities and AI-powered tools, including auto-tagging, advanced search, editing, optimization, and fast delivery for images used on websites or apps. By optimizing media, you can enhance performance, improving loading times and user experience in your designs.

Get started

Before you install the extension, make sure you have a Cloudinary account. You can start by signing up for a Free plan. When your requirements grow, you can upgrade to a plan that best fits your needs.

Once you have your Cloudinary account, download and install the extension from the Figma marketplace.

Restart Figma and you should see Cloudinary listed in the Plugins menu.

Log in

Select Cloudinary from your Plugins menu. Click Login from the dialog box.

A browser window will open to begin the authentication process. Click ACCEPT ACCESS.

Once you're successfully authenticated in the browser, you'll see an indication in the browser. Close the browser window and return to Figma.

Connect using your Cloud name

After logging in, the Cloudinary panel in Figma will prompt you to enter your Cloud name to establish the connection.

The Cloud name identifies your product environment, which is the entity within your account that contains your asset repository, environment-specific settings, and other essential elements for managing your assets. To access your product environment, you’ll need to specify the Cloud name.

To connect using your Cloud name:

1. Go to the Cloudinary Programmable Media Dashboard.
   Important

   Only Cloudinary account administrators can access the Cloudinary Dashboard. If you're not an administrator, please ask your administrator for assistance with this step.
2. Copy the Cloud name.
3. Paste the Cloud name into the Cloudinary panel in Figma.
4. Click Next.

Once connected, you'll be able to start using the plugin. The Library tab will display the Media Library of the product environment associated with the Cloud name you entered. In the Upload and Settings tabs, you'll see an indicator showing the Cloud name of the product environment you're connected to:

Multiple Product Environments

Free accounts are limited to one product environment, while paid accounts can have multiple. A product environment can represent different setups, such as production or staging, separate organizations, distinct products, or geographic locations that you wish to manage independently within the same Cloudinary account.

If you have multiple product environments and need to switch between them, from the Upload or Settings tab, hover over the logout icon and click on the button that appears. Re-open the plugin, log in again, and then connect using a different Cloud name. Administrators can find the cloud names for all their product environments on the Product Environments page of the Console Settings.

Using the plugin

To begin, select Cloudinary from your Plugins menu. Each time you start the plugin, you'll need to log in and enter your Cloud name.

Once logged in, the Cloudinary Figma plugin enables you to seamlessly upload images from Figma to Cloudinary and insert images and videos from Cloudinary into Figma.

Upload to Cloudinary

To upload an image to Cloudinary, select the layer or artboard you want to upload and navigate to the Upload tab in the plugin. Here, you can adjust the image format, and export size. The display name (not relevant for legacy fixed folder mode) uses the layer name by default, and the public ID is randomly generated, unless a Media Library upload preset default has been configured.

Once the upload is complete, the image will be accessible in the Cloudinary Media Library, which you can access via the Library tab in the plugin.

Insert to Figma

To enable web optimization for images inserted into Figma, go to the Settings tab of the plugin:

To insert an image or video, select a frame or artboard where you want the asset to appear. Then, in the Library, select the asset you'd like to insert and click Insert.

Managing media

The Cloudinary Figma plugin allows you to make use of a number of advanced media management features provided as part of the plugin. By using Cloudinary as your principle media source, you'll get all benefits that come with a dedicated media platform.

Cloudinary DAM

You can access a compact version of the Cloudinary Media Library which provides almost all of the same functionality that is available in the full Media Library in your Cloudinary Console. You can access the Media Library when you select the Library tab from Cloudinary plugin panel.

With the Cloudinary Media Library you can take advantage of all the features listed below.

Advanced Search

The Advanced Search feature lets you search by filters such as tags, metadata, format, orientation, resolution, or (if supported for your account), even by image analysis characteristics, such as prominent colors, presence of faces, or image location.

For more details, see Advanced Search in the Digital Asset Management guide.

Collections

Collections are ad-hoc groupings of assets. Assets can be added to and from collections without affecting or moving the asset itself, and assets can be included in multiple collections. You can create your own collections (assuming you have the required permissions) or other Cloudinary users can share collections with you. You can also share collections with external stakeholders by sending a URL to a dedicated collection webpage, which is available to those with a link during an optionally specified date range.

Collections can often be a convenient way to group all assets that you might want to use on a particular project or campaign.

For more details, see Collection management in the Digital Asset Management guide.

Tagging and metadata

Assets that have tags and other metadata enable all Media Library users to better organize and search for assets in the Media Library.

In addition to the option to specify tags when you upload an image or video, you can also add or edit tags and other metadata after images and videos are uploaded via the embedded Media Library, and even set the same tags or metadata on multiple images and videos at once.

You can view and set this data using the Asset toolbar or in the Asset management page.

Asset toolbar

You can set tags and metadata for several selected assets at once from the Media Library using the Tag or Edit Structured Metadata options in the asset toolbar. You can Edit Contextual Metadata via the (3-dot) options menu. The type of metadata available for editing (contextual or structured) depends on the setup for your organization's account.

Asset management page

You can view or edit tags and metadata as well as view embedded image metadata for a specific asset from the Summary and Metadata tabs of the Asset management page.

To open the Asset management page either double-click the asset or select Open from the asset's context (right-click) menu.

Media editors

The Media Editor is only applicable to images and is accessible from the Asset management page, by clicking the Edit Image button.

In the Media Editor, you can crop and resize your image to suit your design. If you save the modified image, your current asset will be overwritten. You can retrieve the original if you have backups enabled. Otherwise, you may prefer to download the modified image and upload it as a new asset.

Transformation editor

The transformation editor is accessible from the Asset management page. To open it, select Edit Transformation from the kebab menu next to the original asset or the transformation you want to edit further.

In the transformation editor you can apply and preview various transformations. Once you are satisfied with the adjustments, click Insert to use this transformed asset as your media item. Unlike the Media Editor, your original asset remains unmodified.

For more details, see Asset and transformation editing in the Digital Asset Management guide.