Figma is a design tool that works in your browser or as an app on Mac and Windows.
To use CI HUB Connector inside Figma, you first need to add the plugin. Here's the setup guide:
https://support.ci-hub.com/ci-hub-connector-pro/installing-the-ci-hub-pro-connector
Once it's added, you'll find it here:
Figma Menu → Plugins → CI HUB Connector
This opens the CI HUB Connector Professional panel right inside Figma. From here, you can connect to your DAM, PIM, MAM or cloud storage system and bring in assets without leaving your design.
Restore Your Connections
Already set up CI HUB Connector Professional somewhere else? You can bring those same connections into Figma.
- Open the CI HUB Connector panel
- Click the Load icon
- Type in your password
Your saved connections will come back automatically.
Want to add more?
- Click the + icon next to your connections, or
- Click Load All to see everything available
Navigating the CI HUB Connector Professional
The Navigation area shows the system you're currently working in. To switch to another connected system, select it from the dropdown menu.
The search and filter options depend on the system you're using. For example:
- Shutterstock offers many filters to narrow down your search.
- Dropbox lets you browse through your folders and files.
Your results appear below the filters. You can display them as:
- List: Compact rows, useful for scanning file names.
- Tiles: Larger thumbnails, useful for finding assets visually.
- Detailed view: Thumbnails with extra file information.
Double-click an asset to open its preview and details.
Placing Images in Figma
There are a few ways to bring images into Figma via CI HUB Connector Professional.
Right-click on an asset in the panel to see your options. The two most common are:
- Place: drops the image straight into your design
- Add as Fill: uses the image as a background inside a shape or frame you've selected
If you haven't selected anything, the image will just land on the canvas.
Using Renditions (Optimized Image Sizes)
Images from your DAM, PIM, MAM or cloud storage system are often huge, since they're made for printing. For designing in Figma, smaller images work better and load faster.
Look for the Use File option in the Details area, this lets you pick a smaller version of the image (rendition). You can choose:
- The size you want
- PNG or JPEG format
If an image is using a smaller version, you'll see a green icon on it.
Replacing Images
Already placed an image but want to change it? Easy:
- Click the image in your design
- Right-click the new image you want in the panel
- Select Replace
If that same image appears more than once in your file, click Replace all and CI HUB Connector Professional will find and update all of them at once.
Image Versioning
If your DAM, PIM, MAM or cloud storage system saves different versions of an asset, CI HUB Connector Professional will let you know when a newer one is available.
You'll see:
- A small clock icon on the image preview
- Hovering over it shows you when it was updated
To update your asset to the newest version, use the External Content Panel (ExCoP):
- Open the ExCoP
- Find the asset that has a newer version available
- Click the Relink icon to update it
Your design will now use the latest version of the asset.
Placing Metadata in Text Fields
You can drag details about an image (like its name or description) straight into a text box.
- Click inside a text box
- Drag the information you want from the panel
- Drop it into the text box
It'll fill in automatically.
Uploading Frames to Your DAM
You can save several frames from Figma to your connected source system all at once via CI HUB Connector Professional.
- Select the frames you want to save
- Open CI HUB Connector
- Click Add File
- Choose Active Figma Document
You can save them as:
- PNG
- JPEG
- At 2x or 3x the size
Before you confirm, you'll get a chance to rename anything in the upload window.
