How to Use the CI HUB Connector Plugin with Sketch

Sketch is a leading digital design platform, beloved by UI/UX designers. It lets users create quick designs, prototypes and more with both a mac and web app.

With the CI HUB Connector for Sketch, designers can bring their workflow to the next level, accessing the assets they need from multiple data sources directly within Sketch. That means less distraction, faster production and more brainpower for creativity. 

Follow this step-by-step guide to see how it works:

Step 1: Install the CI HUB plugin and connect to your source systems

• Go to the Plugins menu on Sketch, search for "CI HUB" and select the CI HUB Connector. 
• Follow the link to the CI HUB website and complete the three steps: download, register, and install the plugin. 
• Unzip the file, double-click the plugin file, and it will be installed automatically. 
• Open Sketch and launch the CI HUB plugin. Register or log in if you haven’t already. 
• The CI HUB interface will now appear on Sketch, allowing you to connect to various source systems. Enable or disable connections as needed.

Step 2: Place Images and Text from CI HUB into your Sketch

• When you are connected to your desired DAM system, you can browse through the images in your folders. 
• To place the image, select an area on the canvas, right-click on an asset in the plugin, and select Replace or Add as Fill to place the image. 
•  To minimize file size, choose a rendition or conversion (e.g., a smaller JPEG instead of a large Photoshop file). 
• To replacing an image, select an object on the canvas, right-click on the asset in the plugin, and choose Replace. 
• For images that appear multiple times, use the Replace All feature to update them simultaneously. 
• To place text, drag and drop metadata fields from your DAM or PIM system directly into the text frames on your Sketch canvas. 
• You can also fill text with images for creative effects and store them as styles for future use.

Step 3: Upload Assets from Your Sketch Canvas to the Connected System

• To upload images, firstly select an image on the Sketch canvas. 
• Use the plugin to upload the selected image to your connected DAM or cloud storage system. 
• Verify the upload by checking the image in the connected system. 
• To upload Sketch documents, use the Add File button in the plugin to upload entire Sketch documents to your DAM, cloud storage, or PIM system.

Step 4: Replace Images / Replace All Images

• To replace single images, select the image you want to replace on the Sketch canvas, then right-click the new image in the CI HUB plugin and choose Replace. 
• To replace all instances of an image, select one instance and use the Replace All feature to update every occurrence with a single action.

Step 5: Perform Fulltext Searches within Sketch

• To Performing a full text search, use the search bar in the CI HUB plugin to search across all connected systems. 
• You can also use Boolean operators like AND, NOT, to refine your search results. 
• You can then browse through search results and place assets directly into your Sketch project.

Step 6: Similarity Search within Sketch

• To perform a Similarity Search, select an image on the Sketch canvas. 
• You can then use the Similarity Search feature to find visually similar images from connected stock providers like Getty Images. 
• When you find what you need, place the found images into your Sketch project with renditions as needed.

Step 7: Manage All Placed Assets with regards to source, location, resolution, and version.

• To manage all placed assets, use the check panel to access the integrated check panel in the CI HUB plugin  
• Here, you can view asset details such as source, location, resolution, and version. 
• You can identify and update assets when newer versions become available.
• You can also manage assets from different sources including DAM systems, cloud storage, and stock providers.
• The check panel will display warnings for newer versions of assets.
• Simply select the newer version, choose the appropriate rendition, and update the asset in your Sketch project.
  

Conclusion

With the addition of CI HUB Connector for Sketch, you can significantly simplify your creative process. No more window-hopping to find what you need or slow browsers weighed down beneath dozens of tabs.

Get started today by downloading the CI HUB Connector for Sketch! 

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