> ## Documentation Index
> This page relates to Cloudinary Integrations. Fetch the complete documentation index for all Cloudinary Integrations at: https://cloudinary.com/documentation/llms-integrations.txt?referrer=docpage and then use it to discover all relevant pages before exploring further.
> If your task extends beyond this product, fetch the top-level index covering all Cloudinary products and topics at: https://cloudinary.com/documentation/llms.txt?referrer=docpage

# 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, including Figma, Figma Buzz, and Figma Slides. Using Cloudinary as the central source of truth for media files within your organization enables efficient management of large volumes of media.

![Supported Figma tools](https://cloudinary-res.cloudinary.com/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1770199520/docs/Figma/tools.png "thumb: w_100,dpr_2, with_code:false, with_url:false, width:100")

Easily upload images from a Figma layer or artboard to Cloudinary, where others can access them 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.

![Cloudinary Figma plugin](https://cloudinary-res.cloudinary.com/image/upload/q_auto/bo_1px_solid_grey/f_auto/ml_tab.png "thumb: w_700,dpr_2, with_code:false, with_url:false, width:700, caption:Figma Plugin - Library selected from the navigation bar")
> **NOTE**:
>
> If Visual Search isn't enabled for your account, the **Advanced** / **Visual** toggle won't be visible and you'll only see Advanced Search. Visual Search is available to Enterprise customers by request. [Learn more about Visual Search](dam_visual_search).

## Get started

Before you install the extension, make sure you have a Cloudinary account. You can start by [signing up](https://cloudinary.com/users/register_free) for a Free plan. When your requirements grow, you can upgrade to a [plan](https://cloudinary.com/pricing) that best fits your needs.

Once you have your Cloudinary account, download and install the extension from the 
 [Figma marketplace](https://www.figma.com/community/plugin/1451492041396730459/cloudinary).

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. 
  ![Login](https://cloudinary-res.cloudinary.com/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1733870319/docs/Figma/login.png "thumb: w_300,dpr_2, with_code:false, with_url:false, width:300")
3. In the **OAuth Application Login** page, enter your Cloudinary email and password, and click **LOG IN**. ![Authentication - Log in](https://cloudinary-res.cloudinary.com/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1750858219/docs/Figma/new_oauth.png "thumb: w_400,dpr_2, with_code:false, with_url:false, width:400")
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. ![Authentication - Product environment selection](https://cloudinary-res.cloudinary.com/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1750859136/docs/Figma/oauth_cloud_select.png "thumb: w_400,dpr_2, with_code:false, with_url:false, width:400")
   > **TIP**:
>
> Find your product environment's **Cloud Name** on the [Dashboard](https://console.cloudinary.com/app/home/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.


What's a cloud name and product environment?

You need to select a **Cloud name** to establish the connection with your product environment. The **Cloud name** identifies your [product environment](dam_digital_asset_management#what_39_s_a_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.

How can large companies use 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 **Settings** tab, hover over the logout icon  and click on the button that appears. Re-open the plugin, log in again, and select a different **cloud name** during the login process. If you're not sure which environment to choose, an administrator can reference the list of cloud names in your [Product Environments](https://console.cloudinary.com/app/settings/product-environments) page of the Console Settings.

![Cloud names for multiple product environments](https://cloudinary-res.cloudinary.com/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1728918785/docs/Figma/multiple_prod_env "thumb: w_500,dpr_2, with_code:false, with_url:false, width:500")

## Using the plugin

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

You move between the plugin's features using the tabs in the navigation bar at the bottom of the plugin panel. You can [choose which tabs appear](#settings) there, and **Settings** is always shown.

### Insert in Figma

To find and insert images from Cloudinary into your Figma designs, open the **Library** tab in the plugin's navigation bar. The **Library** tab opens the Media Library Widget, where you can browse and search for assets in your Cloudinary Media Library.

You can insert original images, optimized images, or images with Cloudinary templates applied.


> **NOTE**:
>
> :title=Asset Selector
> The **Library** tab opens the full Media Library Widget by default. If you'd rather browse in a layout that fits the plugin's vertical panel, set **Picker mode** to **Light** in the [Settings](#settings) tab. The lightweight **Asset Selector** gives you folder browsing, search, and a choice of grid or list views, and it uses the same insertion and placement workflow described in this section, so the procedures here apply either way.

#### Insert images

**To insert an image**: 

1. Make sure your Figma plugin is [open and connected](#log_in_and_connect).
2. Select a frame or artboard where you want the asset to appear. 
3. In the navigation bar, click the **Library** tab.
4. Browse and search for the asset you'd like to insert.
5. Click **Insert**. The original image is inserted. Or, if you selected [optimize for web](#optimize_for_web), an optimized version, compressed without losing any visual quality, is inserted.

![Insert from Cloudinary](https://cloudinary-res.cloudinary.com/image/upload/c_crop,g_north,w_2034,h_1089/q_auto/f_auto/bo_1px_solid_grey/docs/Figma/insert_from_cld_new "thumb: w_700,dpr_2, with_code:false, with_url:false, width:700")

#### 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 navigation bar, 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](dam_editing_and_transformations#studio) for instructions. Administrators can also create transformation templates for both images and videos. See [Named transformations](dam_admin_asset_management#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.

![Adding transformed versions](https://cloudinary-res.cloudinary.com/image/upload/c_crop,g_south,h_920,w_2000/f_auto/q_auto/bo_1px_solid_grey/v1762069734/docs/integrations/contentful_insert_transformation.png "thumb: w_700,dpr_2, width:700")

### History

The **History** tab displays the last 20 Cloudinary assets you've inserted into your Figma designs, making it easy to quickly reuse assets without searching for them again.

**To insert an asset from your history:**

1. Make sure your Figma plugin is [open and connected](#log_in_and_connect).
2. Click the **History** tab in the navigation bar.
3. Browse your recently used assets.
4. Click **Insert** to add the asset to your design.

![Access assets you recently inserted](https://cloudinary-res.cloudinary.com/image/upload/c_crop,g_north,w_2038,h_830/q_auto/f_auto/bo_1px_solid_grey/docs/Figma/history.png "thumb: w_700,dpr_2, width:700")

This feature is particularly useful when you're working on multiple related designs and need to maintain consistency across your work.


### Export to Cloudinary

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

**To export a layer or artboard to Cloudinary**:

1. Make sure your Figma plugin is [open and connected](#log_in_and_connect).
2. Navigate to the **Export** tab in the navigation bar.
3. Select the layers or artboards you want to export using one of two methods:
   * **By selection**: Select layers directly on the Figma canvas — the plugin reflects your selection automatically.
   * **By text**: Type part of a layer name to find and select it — useful for targeting specific layers in complex designs.
   ![Export to Cloudinary](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_grey/f_auto/q_auto/export_tab.png "thumb: w_700,dpr_2, with_code:false, with_url:false, width:700")
4. Set **Display Name** and **Destination Folder**.
5. Fill in [structured metadata](#structured_metadata) for the assets. The plugin automatically shows the fields that your product environment requires, and you can also fill in optional fields.
6. Adjust **File settings**, including **Format**, **Export Size**, **Destination Folder**, **Upload Preset** (predefined upload behavior), and **File Name Template** (variables that determine the asset's public ID in Cloudinary).
7. Upload the assets. If any metadata is missing or invalid, the plugin shows an error and takes you directly to the field that needs fixing.
8. Review the upload results. From here you can review the uploaded assets, open their folder in Cloudinary, or copy their delivery URLs one at a time or all at once.

More on naming in Cloudinary

In Cloudinary: 

* The name used in the Media Library is called **display name**. By default, this uses the Figma layer name. 
* The programmatic identifier used in delivery URLs is the public ID, which is randomly generated unless a [Media Library upload preset default](dam_admin_upload_presets#upload_preset_defaults) is configured. 

> **NOTE**: In the [legacy fixed folder mode](dam_folder_modes), there's no display name.

Once the upload is complete, the image is accessible in the Cloudinary Media Library, which you can access via the **Library** tab in the navigation bar. See [Insert in Figma](#insert_in_figma).


#### Add structured metadata on export

When you export assets or [dynamic images](#dynamic_image), you can add Cloudinary [structured metadata](dam_admin_structured_metadata) to them, so assets exported from Figma meet the same metadata standards as assets uploaded directly to Cloudinary.

* **Required and optional fields**: The plugin automatically shows any metadata fields that your product environment requires. You can also fill in optional fields.
* **Validation before upload**: The plugin checks the metadata before uploading. If a value is missing or invalid, a clear error takes you directly to the field that needs fixing.
* **Remember values between uploads**: Optionally keep the metadata values you entered for your next upload, to speed up repetitive workflows.





### Dynamic Image (Beta)

> **INFO**:
>
> **Dynamic Image** in the Cloudinary Figma plugin is currently in **Beta**, which means there may be minor changes in functionality or appearance before its general access release. We invite you to share feedback with our [support team](https://support.cloudinary.com/hc/en-us/requests/new).

The **Dynamic Image** workflow bridges the gap between design and delivery by translating Figma designs into Cloudinary transformation URLs. This enables creative automation workflows for various use cases:

*   **Creative editing**: Non-technical content editors can easily update creatives by modifying variables and embedding the resulting URL in a CMS or e-commerce platform.
*   **Website embedding**: Developers can integrate the URL pattern into their code to programmatically generate design variations. For more information about using variables in Cloudinary transformations, see [User-defined variables](user_defined_variables).
*   **DXP content management**: Content managers can use the URL in Digital Experience Platforms (such as [Braze templates](https://www.braze.com/docs/partners/message_personalization/dynamic_content/visual_and_interactive_content/cloudinary)) to dynamically personalize content.

> **NOTE**:
>
> **Dynamic Image** was previously called **Export Template**, and before that **Automate** or **Convert**. What these docs previously called a *template* or a *dynamic template* is now called a **dynamic image**.
> This is distinct from a [transformation template](#insert_images_with_templates_applied), which is a [named transformation](named_transformations) you apply to an asset as you insert it. Transformation templates keep their name.

![Dynamic Image tab](https://cloudinary-res.cloudinary.com/image/upload/c_crop,g_north,w_1758,h_1402/bo_1px_solid_grey/f_auto/q_auto/v1789655402/training/dynamic_image_tab.png "thumb: w_700,dpr_2, with_code:false, with_url:false, width:700")

#### How it works

When you export a dynamic image, the plugin analyzes your Figma design, identifies dynamic and static layers, and generates a Cloudinary transformation URL that recreates your design.

The **Dynamic Image** interface features a two-column layout:

* **Left column**: A single list of every layer in your frame, together with variable field data. Hover any layer to highlight it in the preview, and select the ones you want to make dynamic.
* **Right column**: Live frame preview. Click any layer to toggle it between dynamic and static, or hover to highlight it in the layer list.
* **Draggable divider**: Resize columns to suit your workflow; scrolling and window state are preserved.

During export, the plugin:

1. Analyzes your Figma design layers and identifies text, images, and fonts
2. Uploads fonts required for your text layers (fonts taken from the design and any [custom font files you add](#exporting_a_template_from_figma)) together with image assets to a **transformations** folder in your Cloudinary account
3. Generates a Cloudinary transformation URL that recreates your design
4. Marks layers with variable names; your design layers are never modified (dynamic fields are tracked via plugin metadata, not layer renaming)

> **TIP**:
>
> The **Dynamic Image** tab supports Figma Auto Layout, including hug sizing. The plugin detects Figma's hug sizing directive and translates it into the matching Cloudinary behavior, so elements like buttons that resize to fit their content keep their intended responsive layout with no manual adjustment.

#### Variable naming convention

Use the following prefixes when naming your Figma layers to control how they're handled during export:

**Dynamic layers** (`#` prefix) — These layers are exported as variables and can be replaced via URL:

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

**Static layers** (`#!` prefix) — These layers remain fixed in the dynamic image but are rasterized to the background. Use this when you want to control the layer ordering or z-index positioning without making the layer replaceable:

* `#!logo` - Keeps a logo in a specific position (not replaceable)
* `#!watermark` - Adds a watermark that stays in place
* `#!border` - Adds a decorative border element

Static layers are useful when you want specific control over how dynamic layers stack on top of or behind fixed design elements.



#### Exporting a dynamic image from Figma

**To export a Figma frame or artboard as a Cloudinary transformation URL:**

1. Create your design in Figma. Optionally name layers with the `#` prefix (e.g., `#heroImage`, `#headline`) to designate them as dynamic, or use the `#!` prefix (e.g., `#!logo`) for static layers. See [Variable naming convention](#variable_naming_convention) for details. You can also designate layers after opening the export interface.
2. Select the frame or artboard you want to export.
3. Make sure your Figma plugin is [open and connected](#log_in_and_connect).
4. In the navigation bar, click the **Dynamic Image** tab. The interface displays your frame with a two-column layout:
   * **Left**: Layer list and variable field data
   * **Right**: Live preview of your frame
   * **Draggable divider**: Resize columns as needed; your layout preference is preserved
5. Designate dynamic and static layers. The left panel lists every layer in your frame, so you can choose what should be dynamic from one place:
   * Select a layer in the list to make it dynamic
   * Hover any layer in the left panel or preview to highlight it in both views
   * Click a layer in the preview to toggle it between dynamic and static
   * Click a dynamic layer again to remove it (you'll be prompted to confirm)
   * Click the **Highlight all** toggle to see all available layers at once
6. (Optional) Rename variable field names:
   * Double-click any field name in the left panel to edit it inline
   * Names must start with a letter; the plugin validates as you type
   * Drag fields to reorder them smoothly; updates appear instantly in the preview
7. Review and upload fonts:
   * If custom fonts are detected, you'll be prompted once for the upload destination (default: `/templates/fonts`)![Custom fonts](https://cloudinary-res.cloudinary.com/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1781700919/docs/Figma/custom_fonts_focus.png "thumb: w_300,dpr_2, with_code:false, with_url:false, width:300")
   * Fonts already uploaded to Cloudinary are skipped
   * Upload only fonts you are licensed to host and serve with Cloudinary
8. Choose the export resolution: **1x**, **2x**, or **3x**. The default **2x** (144 DPI) gives crisp results on most high-DPR displays, while **1x** produces smaller files for faster delivery.
9. Save your dynamic image:
   * If your product environment requires [structured metadata](#structured_metadata), fill in the required fields first
   * The save button shows **Create dynamic image** (for a new dynamic image) or **Save dynamic image** (for updates to an existing one)
   * The button is disabled if an existing dynamic image has no unsaved changes
   * Click the button to upload fonts, export layers, and generate the transformation URL
   * A deep link appears, allowing you to open the saved dynamic image directly in Cloudinary
10. Click to open the **Template Editor** widget for final review and use.

**To load a previously saved dynamic image:**

When you open the **Dynamic Image** tab, any saved dynamic images from your Cloudinary account are available. Select one to pull its variable names, settings, and layer bindings into the export interface. The panel shows who last updated it and when, allowing your team to stay aligned on its history.

#### Using the Template Editor

The Template Editor provides a user-friendly interface for modifying the dynamic layers defined in your Figma design. This allows anyone, regardless of technical skill, to generate new variations of the design without editing the URL manually.

The editor displays input fields for each variable identified in your design:

*   **Image variables**: Enter the public ID of a new image to replace the original.
*   **Text variables**: Enter new text to replace the original content.

As you update these values, the preview updates instantly to show your customized design. Once satisfied, you can copy the generated URL for use in your website or application.

![Template Editor](https://cloudinary-res.cloudinary.com/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1764887575/docs/Figma/template_editor.png "thumb: w_800,dpr_2, width:800")

#### Using the transformation URL

The generated URL is a standard Cloudinary transformation URL that includes:

*   **Variable definitions**: Placeholders for your dynamic layers (e.g., `$heroImage`, `$headline`). These often use conditional logic (e.g., `if_!isndef!`) to apply default values from your original design if no new value is provided.
*   **Layer positioning**: Transformation components that position each layer.
*   **Uploaded assets**: References to fonts and images stored in your `transformations` folder.

![Using the transformation URL](https://cloudinary-res.cloudinary.com/image/upload/e_gen_restore/f_auto/q_auto/bo_1px_solid_grey/v1763994994/docs/Figma/layers_transformation.png "thumb: w_600,dpr_2, width:600")

**To customize the transformation:**

Developers can integrate the URL pattern into their applications and dynamically generate design variations by substituting variable values. You can define these variables anywhere in the URL before they are used.

_For example:_

**1. Replace an image layer**

You can replace an image layer (e.g., `#heroImage`) by setting the corresponding variable (e.g., `$heroImage`).

*   **Using the asset at the end of the URL:**
    Set the variable to `current:public_id`. This captures the public ID of the image specified at the end of the URL (the base asset) and assigns it to your variable.

    ```
    .../$heroimage_current:public_id/.../my-new-image.jpg
    ```

*   **Using a specific public ID:**
    Assign a specific public ID string directly to the variable.

    ```
    .../$heroimage_!my-new-image!/.../original-image.jpg
    ```

**2. Replace text**

Change text content (e.g., `#headline`) by setting the variable to a new string.

Change:

```
.../$headline_!Want%20to%20Reduce%20Holiday%20Returns%253f!/...
```

to your own text:

```
.../$headline_!Grab%20Your%20Chance%20to%20Win%20a%20Once%20in%20a%20Lifetime%20Vacation!/...
```

For more information on variables in URLs, see [Assigning values to variables](user_defined_variables#assigning_values_to_variables).

> **NOTE**:
>
> The plugin uploads fonts and image assets to a **transformations** folder in your Cloudinary account. This folder is created automatically if it doesn't exist. Named transformations generated by the plugin are prefixed with `cldt-`, so you can identify them among the named transformations in your account.

#### Limitations

* Maximum frame size: 3,000 x 3,000 pixels
* Dynamic images work best for banner and hero image designs

> **TIP**: Save the generated URL as a [named transformation](named_transformations) in Cloudinary for easier reuse and maintenance.


### Info

The **Info** tab shows you the Cloudinary details behind the layers you've selected in Figma, so you can check a design without switching back and forth between Figma and Cloudinary.

**To inspect a layer:**

1. Make sure your Figma plugin is [open and connected](#log_in_and_connect).
2. Select a layer on the Figma canvas.
3. Click the **Info** tab in the navigation bar. For each Cloudinary-backed layer in your selection, the tab lists a preview, the Figma layer name, and the Cloudinary file name and public ID.
   > **NOTE**: If your selection also contains layers that didn't come from Cloudinary, the tab lists only the Cloudinary layers among them and prompts you to pick one.
4. Click **Inspect** to see the full details for that layer:
   * **Figma**: the layer's name, type, ID, size, visibility, and rotation. Click **Select in Figma** to select the layer on the canvas.
   * **Cloudinary**: the asset's public ID, asset ID, file name, and dimensions, plus the delivery URL for the layer crop, which you can copy. Click **Open in Cloudinary** to open the asset in your Media Library.
   * **Metadata**: the asset's structured and contextual metadata, and an import audit recording which user and cloud the layer came from, and when.
   * **Metadata inspector**: click **Show plugin data** or **Show context** to see the raw data the plugin holds for the layer.

![Inspect a layer's Cloudinary details](https://cloudinary-res.cloudinary.com/image/upload/q_auto/f_auto/bo_1px_solid_grey/v1788969027/info_tab.png "thumb: w_701,dpr_2, with_code:false, with_url:false, width:701")


#### Track asset usage in a document

When you insert an asset, the plugin records where it's placed in Figma: the document, page, and layer. Each Figma file keeps its own Cloudinary identity, so this usage stays connected to the correct design, even when you duplicate or rename the file.

Once you connect a document, the **Info** tab can show all the Cloudinary assets used in it, so you can review the document's asset usage in one place and navigate to where each asset is placed.

**To connect a document:**

1. In the **Info** tab, click **Connect**.
2. In Figma, press ⌘L (Ctrl+L on Windows), or right-click the file tab and choose **Copy link**.
3. Paste the link in the dialog box and click **Connect**.

After you connect the document, you can run an **Integrity sweep** to find and clear stale Cloudinary records left by replaced or deleted layers. Click **Check now**, and the tab reports how many placements it checked and whether it found any stale records.


### Settings

The **Settings** tab controls how the plugin inserts assets and how it lays out the plugin panel. **Settings** always appears in the navigation bar.

![Settings tab](https://cloudinary-res.cloudinary.com/image/upload/q_auto/f_auto/bo_1px_solid_grey/v1788962965/settings_tab.png "thumb: w_700,dpr_2, with_code:false, with_url:false, width:700")

#### Switch product environment

**Cloud Name** shows the product environment the plugin currently uses. To work in a different one, log out using the icon next to the cloud name, then log in again and select another cloud name during the login process. See [How can large companies use multiple product environments?](#connect_using_your_cloud_name)


#### Optimize images as you insert them

Under **Insert in Figma As...**, select **optimize for web (recommended)** so the plugin compresses each image as you insert it, without losing any visual quality. Clear the setting to insert original images instead.

#### Minimize the plugin after inserting an asset

Under **UI**, select **Minimize window on asset insert** to collapse the plugin automatically once you've inserted an asset, so it doesn't sit over the design you're working on.

#### Choose what the Library tab shows

Under **UI**, set **Picker mode** to **Full** to browse in the full [Cloudinary Media Library](#cloudinary_dam) widget, or to **Light** to use the lightweight [Asset Selector](#asset_selector), which fits the plugin's vertical panel.


#### Choose which tabs appear

Under **UI**, use **Tabs** to select which tabs the navigation bar shows, keeping the panel focused on the tools your team uses most. **Settings** is always shown.

> **NOTE**:
>
> Procedures in this documentation assume you've enabled the tab they reference. If a tab isn't in the navigation bar, check it in the **Tabs** section in **Settings**.


## Figma Buzz templates

[Figma Buzz](https://help.figma.com/hc/en-us/articles/31271566667543-Guide-to-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 Figma plugin to insert and manage their images.

**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 navigation bar, 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.

> **TIP**: To insert a transformed asset, see [Insert images with templates applied](#insert_images_with_templates_applied).

![Using the plugin with Buzz templates](https://cloudinary-res.cloudinary.com/image/upload/e_gen_restore/bo_1px_solid_grey/q_auto/f_auto/docs/Figma/buzz_templates.png "thumb: w_600,dpr_2, width:600")


## Figma Slides

The Figma plugin supports [Figma Slides](https://help.figma.com/hc/en-us/articles/24170630629911-Explore-Figma-Slides), enabling you to use the same Cloudinary-powered workflows for slide-based designs that you use in regular Figma files.

**To use the Figma plugin in Figma Slides:**

Follow the same process as you would in regular Figma files:

* [Export to Cloudinary](#upload_to_cloudinary) - Export layers or slides to your Cloudinary account
* [Insert in Figma](#insert_in_figma) - Insert images from your Cloudinary Media Library into your slides
* [Optimize for web](#optimize_for_web) - Enable automatic optimization for inserted images

The plugin interface and functionality work identically in Figma Slides as they do in standard Figma files.

## 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 the Figma plugin panel.

If you've set **Picker mode** to **Light** in the [Settings](#settings) tab, the **Library** tab opens the lightweight [Asset Selector](#asset_selector) instead, which gives you folder browsing, search, and grid or list views in a vertical layout, but not the full set of Media Library features described below.

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

> **NOTE**:
>
> :title=Browser compatibility notes:

> * **Safari**: The Safari browser may require additional steps when logging in to the Media Library. If you encounter an issue, follow the prompts to log in separately and attempt to open the Media Library again. Alternatively, use one of the other [recommended browsers](dam_digital_asset_management#supported_browsers) when working with Cloudinary.

> * **Third-party cookies**: Some browsers (such as Firefox) may block third-party cookies by default, which can prevent the Media Library Widget from functioning properly. Users may need to explicitly allow third-party cookies for the Cloudinary domain (`https://cloudinary.com`) in their browser settings. 

#### 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.

![Advanced Search](https://res.cloudinary.com/cloudinary/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1/docs/DAM/advanced_search_new_exp "thumb: w_850,dpr_2, width:850, with_code:false, with_url:false")

> **NOTE**:
>
> If Visual Search isn't enabled for your account, the **Advanced** / **Visual** toggle won't be visible and you'll only see Advanced Search. Visual Search is available to Enterprise customers by request. [Learn more about Visual Search](dam_visual_search).

For more details, see [Advanced Search](dam_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. 

![Collaborate with collections](https://res.cloudinary.com/cloudinary/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1/docs/DAM/collections_getting_started "thumb: w_550,dpr_2, width:550")

For more details, see [Collection management](dam_folders_collections_sharing#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.![Media Library asset toolbar](https://cloudinary-res.cloudinary.com/image/upload/f_auto/q_auto/bo_1px_solid_grey/docs/integrations/ml_toolbar_inser_upload_new_search_exp.png "thumb: w_750,dpr_2, with_code:false, with_url:false, width:750")

##### 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. > **TIP**: From the Asset management page, you can also select a pre-defined transformation of the original asset, view or activate a variety of image analysis options in the Analysis tab, and more. For details, see [Asset management drill-down](dam_manage_individual_assets#asset_management_drill_down) in the Assets user guide.![Asset management](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_grey/f_auto/q_auto/v1725271953/docs/DAM/ml_widget_insert_templates.png "thumb: w_700,dpr_2, with_code:false, with_url:false, width:700")

#### Media editors
You can edit your images in [Studio](dam_editing_and_transformations#studio) and trim videos in the [Trim videos](dam_editing_and_transformations#trim_videos) tool. Both are accessible from the [asset management drill-down](dam_manage_individual_assets#asset_management_drill_down) page by clicking the **Edit** pull-down button and selecting the action you want to perform.
[Studio](dam_editing_and_transformations#studio) allows you to edit images (crop, resize, flip, rotate, apply effects, and more), either individually or in bulk. The [Trim Video](dam_editing_and_transformations#trim_videos) tool lets you trim videos one asset at a time. When you're finished editing, you can download the edited version without modifying the original, save it to overwrite the original asset (you can retrieve the original if you have backups enabled), or save the edited version as a new asset.

![Studio](https://cloudinary-res.cloudinary.com/image/upload/f_auto/q_auto/bo_1px_solid_grey/docs/studio/studio_initial.png "thumb: w_700,dpr_2, width:700")


#### Transformation editor (videos only)
The [Advanced Editor (Transformation Builder)](https://console.cloudinary.com/app/image/transformation_builder) provides a user-friendly interface, accessible to Assets Enterprise plans in the Media Library, for creating transformed video asset variations. You can start with an original asset or build on an asset that has already been transformed. Preview and customize a wide range of transformations using intuitive UI controls, then generate transformation URLs for delivering, downloading, or sharing transformed versions of your assets without changing the original.

![Advanced Editor Transformation Builder](https://cloudinary-res.cloudinary.com/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1776351603/docs/video_player_studio/named-transformation-template.png "thumb: w_650,dpr_2, width:650")

For more details, see [Advanced Editor](dam_editing_and_transformations#advanced_editor_transformation_builder) in the Assets user guide.

## Cloudinary Professional Services configuration support
The Figma Plugin {variable:platformLabel} is part of Cloudinary's [**Standard**](integrations#standard_integrations) 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](integrations#cloudinary_professional_services_packages)**