Figma Plugin (Beta)

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 and connect

1. Select Cloudinary from your Plugins menu.
2. Click Login from the dialog box.
3. In the OAuth Application Login page, enter your Cloudinary email and password, and click LOG IN.

   

4. From the drop-down list in the An application requests access to your data! page, select the cloud name for the product environment you want to connect.

   

   Tip

   Find your product environment's Cloud Name on the Dashboard.
5. Once you're successfully authenticated, you'll see an indication in the browser. Close the browser window, return to Figma, and start the plugin.

Using the plugin

Once you've successfully logged in, you can use the Cloudinary Figma plugin to seamlessly upload images from Figma to Cloudinary and insert images and videos from Cloudinary into Figma.

Export to Cloudinary

You can export one or more layers and artboards at a time from Figma directly to Cloudinary using the Cloudinary plugin.

To export a layer or artboard to Cloudinary:

1. Make sure your Cloudinary plugin is open and connected.
2. Select the layers or artboards you want to export.
3. Navigate to the Export tab in the plugin to preview your selections.
4. (Optional) Adjust the image format, and export size. By default, the name of the image in Cloudinary matches the Figma layer name.
5. (Optional) Adjust the display names.
6. (Optional) Specify the folder in Cloudinary you want to export it to.

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

The following images show the Media Library Widget within the Library tab of the Cloudinary Figma plugin and the full Media Library within the Cloudinary Console:

Media Library Widget
tab in the plugin Media Library in the
Cloudinary Console

Insert in Figma

Enable web optimization

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

Insert original images

To insert an original image:

1. Select a frame or artboard where you want the asset to appear.
2. In the plugin, click the Library tab.
3. Browse and search for the asset you'd like to insert.
4. Click Insert.

Insert images with templates applied

Transformation templates are preset configurations that let you adjust things like format, size, aspect ratio, and effects before inserting an image. Using a transformation template is a quick way to customize how an image or video looks or behaves without manually editing or coding transformations later.

To insert transformed images:

1. Select a frame or artboard where you want the asset to appear.
2. In the plugin, click the Library tab.
3. Browse and search for the asset you'd like to insert.
4. Double-click the asset to open the Download Options tab of its manage page.
5. In this view, explore the available transformation templates.
   Note

   If you want to create transformation templates for images, see Studio for instructions. Administrators can also create transformation templates for both images and videos. See Named transformations for more details.
6. Choose the template you want to use and click Insert next to it to add the transformed version to your entry.

Using the plugin in Figma Buzz templates

Figma Buzz is a collaboration tool within Figma that enables designers to create templates and make specific layers locked or editable. Designers can control which content editors can modify, making it easy to maintain design consistency while enabling non-designers to update content.

When working with Buzz templates, content editors can use the Cloudinary plugin to insert and manage media assets.

To insert a Cloudinary image into a Buzz template:

1. Open a Buzz template.
2. Select an editable image placeholder in your template.
3. From the Plugins menu, select Cloudinary.
4. By default, the plugin opens in a vertical panel view. For a better experience, click the expand icon to open the plugin in a modal window.
   Tip

   The modal view provides the full Cloudinary interface optimized for media browsing and selection.
5. In the plugin, click the Library tab.
6. Browse and search for the asset you'd like to insert.
7. Click Insert to replace the placeholder with your selected asset.

Convert layers to transformations with variables (Early Access)

The Convert feature bridges the gap between designers and developers by translating Figma designs into Cloudinary transformation URLs. This enables creative automation workflows where developers can programmatically generate variations of designs by changing variables in the URL.

For more information about using variables in Cloudinary transformations, see User-defined variables.

How it works

The conversion process:

1. Analyzes your Figma design layers and identifies text, images, and fonts
2. Uploads necessary assets (fonts and images) to a transformations folder in your Cloudinary account
3. Generates a Cloudinary transformation URL that recreates your design
4. Marks layers with variable names using the # naming convention

Variable naming convention

To make layers dynamic (replaceable via URL variables), prefix layer names with # in Figma, for example:

• #heroImage - Marks an image layer as replaceable
• #headline - Marks a text layer as replaceable
  
• #button - Marks any layer as a variable

Converting a design

To convert a Figma design to a Cloudinary transformation:

1. Create your design in Figma and name layers you want to make dynamic with the # prefix (e.g., #heroImage, #headline).
2. Select the frame or artboard you want to convert.
3. Open the Cloudinary plugin and navigate to the Convert tab.
4. Review the layer analysis showing:
   • Layer names and their corresponding variable names
   • Font types used in the design
   • Preview images for each layer
   • Background preview

     

5. Click Export. The plugin processes your design. It:

   • Analyzes and uploads custom fonts to Cloudinary
   • Exports image layers to Cloudinary
   • Generates a transformation URL with all layers positioned correctly

6. The transformation opens in a new browser window on the sample cloud, showing your design as a Cloudinary URL.

Using the transformation URL

The generated URL includes:

• Default values: Pre-filled with your original design content
• Variable placeholders: Indicated by : syntax in the URL (e.g., $heroImage, $headline)
• Uploaded assets: References to fonts and images in your transformations folder

To customize the transformation:

Developers can integrate the URL pattern into their applications and dynamically generate design variations by substituting variable values.

For example:

Change the #heroImage layer to use a different public ID:

Change the headline text from the placeholder:

to your own text:

For more information on variables in URLs, see Assigning values to variables.

Limitations

• Maximum frame size: 3,000 x 3,000 pixels
• The feature is optimized for banner and hero image designs

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 principal media source, you'll get all benefits that come with a dedicated media platform.

Cloudinary Media Library

You can access a compact version of the Cloudinary Media Library which provides almost all of the same functionality that's 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 Assets user 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 Assets user 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 Assets user guide.

Cloudinary Professional Services configuration support

The Figma Plugin is part of Cloudinary's Standard Professional Services integration configuration package.

If you need assistance setting up this integration and you're on an Enterprise plan with a professional services package in your contract, Cloudinary's professional services can help you set it up as part of your contracted package.

Learn more: Cloudinary Professional Services packages