How to Use CI HUB Connector Plugin for Figma

Ready to get started? Watch the video tutorial or follow the guide below!

Installing the CI HUB Plugin 

• Open Figma. 
• Go to Plugins > Manage Plugins. 
• Select Browse Plugins in Community. 
• Type CI HUB in the search bar. 
• Click the Install button. 

Launching the CI HUB Connector 

• Back in Figma, tap Show Details to get more information about the plugin, including some useful links.  
• Go to Plugins and select CI HUB Connector. You will see a welcome page.
• Register if you haven't already, or log in using your credentials. 

Getting Started with the Interface and Connections 

• Once logged in, you'll see your favorite connections, if you have any. 
• Click Show All to view all available connections.
• You can store and load your connections easily. 

Navigating and Filtering Assets 

• Select the DAM system you have connected. 
• Go to Assets. 
• Use filters to search for assets.
• Filters may vary depending on the connected system. 

Viewing and Managing Asset Details 

• Tap on an image to see details such as IPTC metadata. 
• Switch between list view, tile view, and detail view. 
• Adjust preview image sizes from S to XXL.  

Placing Images in Figma 

• If you want to place an image, select a low rendition version of the image to minimize the file size. 
• Hover over the green icon in the upper left corner of the image to check the selected rendition. 
• Right-click on an image to see a context-sensitive menu. 
• If no element is selected in the canvas, you can only place an image. 
• If an element is selected, you can add the image as a fill. 
• Use the replace feature to swap existing images in the canvas with new ones. 
• The plugin will find and replace all instances of an image in the document. 

Managing Versions 

• You can check the versions of your images via the check panel. 
• If there is a newer version available, a warning symbol will indicate this for you. 
• Click on the newer version and select Relink to update. 

Replacing Non-Visible Images 

• The plugin can also find images that are clipped or in scroll areas. 
• You can select these images, view their previews, and replace them as needed. 

Using Similarity Search with Getty Images 

• Place an image within the canvas. 
• Click the Similarity Search button and choose Getty. 
• The system offers similar images from Getty for you to use. 

Text Placement 

• To place text, open a frame for images and text. 
• Highlight text and move the metadata fields to the stage to replace text with metadata content. 
• Place text based on cursor position within paragraphs. 
• Use the plugin to create text effects, such as filling text with images.

Using Components and Color Styles 

• You can replace main components and their instances with the Replace All feature. 
• Place an image via the plugin and manage color styles. 
• You will have full control over the location of images, whether as fills or color styles. 

Check Panel Features 

• In the panel, you can also have full control over all placed assets in your document. 
• Here, you can view the source, location, version, and resolution. 
• Perform bulk operations, like replacing high-res images with low-res images. 
• Upload pasted images into your system with one click. 

Conclusion 

By integrating CI HUB with Figma, designers can streamline their workflow, efficiently manage their assets, and effortlessly place images and text into their projects from various connected sources. Get started today by downloading the CI HUB Connector for Figma! 

The CI HUB plugin also works in Adobe Creative Cloud, Microsoft Office 365, Google Workspace (Sheets, Docs, Slides), and Sketch. Find out more by visiting our Product page!