Figma is a web-based design and prototyping tool available in the browser and as a desktop application for macOS and Windows.
To use the CI HUB Connector in Figma, you first need to install the plugin. Follow the installation guide here:
https://support.ci-hub.com/ci-hub-connector-pro/installing-the-ci-hub-pro-connector
Once the CI HUB Connector plugin is installed, you can access it in Figma by navigating to:
Figma Menu → Plugins → CI HUB Connector
This will open the CI HUB Connector panel inside Figma, where you can connect to your content services and manage assets directly within your design workflow.
Restore Your Services
If you already use the CI HUB Connector in another application and have saved your connected services, you can easily restore them in Figma.
-
Open the CI HUB Connector panel
-
Click the Load icon
-
Enter your password
Your previously saved services will reconnect automatically.
To add more services:
-
Click the + icon next to your connections
-
Or click Load All to see the full list of available services
Navigating the CI HUB Connector
You can switch between connected services using the Navigation dropdown in the panel.
The available search options depend on the service you are using.
For example:
-
Shutterstock provides advanced filters for asset searches
-
Dropbox only shows file browsing options
Search results appear directly below the filters.
You can view assets in:
-
List view
-
Tile view
-
Details view
Double-click an asset to display its metadata.
Placing Images in Figma
The CI HUB Connector provides several ways to place images into your design.
Right-click an asset in the connector panel to see the available placement options.
Common options include:
-
Place – Insert the image directly into your layout
-
Add as Fill – Apply the image as a fill to a selected frame or object
If no object is selected, the image will be placed freely on the canvas.
Using Renditions (Optimized Image Sizes)
Images from DAM systems are often very large because they are optimized for print.
For prototyping in Figma, smaller image sizes are usually better.
Using the Use File option below the asset preview allows you to select a Rendition (a smaller version of the asset).
You can choose:
-
Different dimensions
-
PNG or JPEG format
A green icon on the image indicates that a rendition is being used.
Replacing Images
If an image is already placed in your design, you can replace it easily.
-
Select the image in your layout
-
Right-click a new asset in the connector panel
-
Choose the Replace option
If the same image is used multiple times in the document, CI HUB Connector can detect and update them.
Image Versioning
If your DAM system or cloud storage creates asset versions, CI HUB Connector can detect newer versions.
When a new version is available:
-
A clock icon appears on the preview
-
Hover over it to see the timestamp
To update the image:
-
Select the asset
-
Click the Relink icon
The image in your design will be replaced with the latest version.
Placing Metadata in Text Fields
You can also insert metadata from an asset directly into text elements.
-
Place the cursor inside a text box
-
Drag the desired metadata field from the connector
-
Drop it into the text field
The metadata will automatically populate the text.
Uploading Frames to Your DAM
You can upload multiple frames from Figma to your DAM system in one step.
-
Select the frames you want to upload in your Figma layout
-
Open the CI HUB Connector
-
Click Add File
-
Choose Active Figma Document
You can upload frames as:
-
PNG
-
JPEG
-
2x or 3x resolution
The selected frames will appear in the upload window, where you can rename them if needed before confirming the upload.
