How to Use CI HUB Connector Plugin for Figma

However, managing digital assets and integrating various content sources into Figma can be a limitation. With a Connector plugin like CI HUB, it’s easy to connect multiple digital asset management (DAM) systems, cloud storages, and stock image providers directly within the Figma interface. 

Here's how you can get started!

Step 1: Install 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. 

Step 2: Access Plugin Details 

• Back in Figma, tap Show Details to get more information about the plugin, including some useful links. 

Step 3: Launch the CI HUB Plugin 

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

Step 4: 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 (about 50 are available).
• You can store and load your connections easily. 

Step 5: Navigate and Filter 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). 

Step 6: View and Manage 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. 

Step 7: Explore Connected Systems 

• In addition to DAM and PIM systems, cloud storages like Dropbox and Box, and stock providers like Getty, Unsplash, and iStock are pre-installed. 

Step 8: Image Placement in Figma 

• If you want to place an image, select a low rendition version of the image to minimize 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. 

Step 9: Manage 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. 

Step 10: Replace Non-Visible Images 

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

Step 11: 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. 

Step 12: 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.

Step 13: 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. 

Step 14: 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!