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 Services
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
Use the dropdown menu in the panel to switch between the different systems you're connected to.
What you can search for depends on which system you're using. For example:
- Shutterstock lets you filter your search in a lot of ways
- Dropbox just lets you browse through files
Your search results show up right below the filters. You can view them as:
- A list
- Tiles
- Detailed view
Double-click on any asset to see more information about it.
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 under the image preview, 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, CI HUB Connector Professional can find and update all of them at once.
Image Versioning
If your DAM, PIM, MAM or cloud storage system saves different versions of a n 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 switch to the newest version:
- Click the image
- Click the Relink icon
Your design will now use the latest version of the image.
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.
