> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# 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, popup:true")

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/f_auto/q_auto/bo_1px_solid_grey/v1772015820/docs/Figma/library.png "thumb: w_700,dpr_2, with_code:false, with_url:false, width:700, popup:true")
> **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, popup:true")
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, popup:true")
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, popup:true")
   > **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 **Upload** or **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, popup:true")

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

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

![Export to Cloudinary](https://cloudinary-res.cloudinary.com/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1772016173/docs/Figma/export.png "thumb: w_700,dpr_2, with_code:false, with_url:false, width:700, popup:true")

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 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 Widgettab in the plugin

Media Library in theCloudinary Console

### Insert in Figma

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

#### 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 plugin, 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/f_auto/q_auto/bo_1px_solid_grey/v1772016367/docs/Figma/insert_from_cld_new "thumb: w_700,dpr_2, with_code:false, with_url:false, width:700, popup:true")

#### Optimize for web

To optimize images for web delivery, go to the **Settings** tab of the plugin and select **optimize for web**. When enabled, inserted images are automatically optimized.

![Insert settings](https://cloudinary-res.cloudinary.com/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1772016492/docs/Figma/settings_optimize.png "thumb: w_701,dpr_2, with_code:false, with_url:false, width:701, popup:true")

#### 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](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, popup:true")

### 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 plugin.
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/f_auto/q_auto/bo_1px_solid_grey/v1772017917/docs/Figma/history.png "thumb: w_700,dpr_2, width:700, popup:true")

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

### Convert designs to dynamic templates (Early Access)

> **INFO**:
>
> This feature is currently in Early Access. To enable it, go to the **Settings** tab in the plugin and toggle on **Early Access: Convert to Cloudinary transformations**.

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

*   **Template 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.

#### 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. In the **Settings** tab, select **Convert layers into transformations with variables (Early Access)**. The **Automate** tab is now accessible.![Enable Figma design to Cloudinary transformation](https://cloudinary-res.cloudinary.com/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1772018227/docs/Figma/settings_convert.png "thumb: w_600,dpr_2, width:600, popup:true") 
2. Create your design in Figma and name layers you want to make dynamic with the `#` prefix (e.g., `#heroImage`, `#headline`).
3. Select the frame or artboard you want to convert.
4. Open the Figma plugin and navigate to the **Automate** tab.
5. 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![Convert layers to transformations with variables](https://cloudinary-res.cloudinary.com/image/upload/e_gen_restore/f_auto/q_auto/bo_1px_solid_grey/v1772018525/docs/Figma/convert_layers_to_transformations.png "thumb: w_700,dpr_2, width:700, popup:true")
6. Click **Convert to Dynamic Template**. 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
7. The transformation opens in the **Template Editor** widget.

#### 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, popup:true")

#### 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, popup:true")

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

#### Limitations

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

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

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

> **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/f_auto/q_auto/v1772017668/docs/Figma/buzz_templates.png "thumb: w_600,dpr_2, width:600, popup:true")

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

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, popup:true")

> **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, popup:true")

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, popup:true")

##### 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, popup:true")

#### Media editors
The Media Editors are accessible from the [asset management drill-down](dam_manage_individual_assets#asset_management_drill_down) page. Click the **Edit** pull-down button and select **Edit Image** for images or **Trim Video** for videos.The Media Editors allow you to make basic edits to images (crop, resize, flip, rotate, sharpen) and trim videos. In the image editor shown below, you can crop and resize your image to suit your design. When you're finished, 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.

![Media library media editor](https://res.cloudinary.com/cloudinary/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1/docs/integrations/ml_image_editor_new_search_exp?_a=BAMAAAfm0 "thumb: w_700,dpr_2, width: 700, popup: true")

#### Transformation editor
The transformation editor is accessible from the [Asset management page](#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.

> **NOTE**: Depending on your account settings and whether your administrator has opted into the feature, you may have access to the [Advanced Editor (Transformation Builder)](dam_editing_and_transformations#advanced_editor_transformation_builder_early_access) instead.

![Media library transformation editor](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/v1645345773/docs/integrations/ml_transformation_editor.png "thumb: w_500,dpr_2, with_code:false, with_url:false, width:500, popup:true")

For more details, see [Asset and transformation editing](dam_manage_individual_assets#transformation_and_asset_details_editor) 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)**