1. Knowledge Base
  2. QBank Connectors and Integrations

QBank Connector for Sketch

With the QBank connector for Sketch, you can easily access your QBank images directly from within Sketch.

The QBank Connector for Sketch allows you to easily access published and approved assets directly from Sketch, while delivering the assets in a multiple format. In addition, QBank automatically keeps track of which assets are in use when published through the connector.

There are a number of benefits, most notable are:

  • Search and filter for assets in QBank

  • Browse through folders

  • Select an asset and choose format

  • Report usage to QBank

Installation

Installation Files for Mac OS is provided.

  1. Double click on the QBank provided ZIP file. Unzip the file and Right click and Open with Sketch. (Make Sure that Sketch is already installed on your computer)
  2. Click OK on the next screen to allow the connector to read/write to XD.

The Connector is installed now and can be launched from the Plugins-> QBank Connector for Sketch menu in Sketch application.

Using the Connector

1. Connect with Your QBank Settings.

Launching the Connector will open the following welcome page. 

1. Click on Connect to open the settings page.

Screenshot 2023-01-31 at 13.18.43

2. Provide all the settings and Click Login.

  • Hostname: <QBank backend URL>
  • License Key: <QBank Provided License Key for the Connector>
  • Username: <Your QBank username>
  • Password: <Your QBank password>
  • Publishing Site ID: <Publishing Site of the Connector>
  • Session Source ID: <ID Provided by QBank for Connector>
  • Default Template ID: <Template ID for the Default selection in Asset list>

3. The Connector will be launched showing all the published assets with the Title, Media ID, Filetype and preview of the default template of the asset.

2. Browse and Search Images

With QBank Connector for Adobe XD, you can search with free text, title, filename and other selected metadata fields.

Write you search query in the Search field and it will show a suggested list of metadata fields to select from. You can also search on the free text following the free text guidelines from QBank.

 

To see the properties/Detail view of each asset, click on the asset and it will pop-up a modal showing all the metadata for each asset.

 

You can also browse your QBank Folders and filter your search results based on the folders. Click on the Burger Menu and then from Folders menu -> Click on the desired folder. 

 

3. Import/Place Images into Adobe XD

1. Choose an Art board in the Sketch app.

2. Select the crop template OR Original from the drop down and Click the button 'Place' or Drag and drop the image into your Artboard.

 

 

3. The image will be placed in the selected crop template OR Original as per your selection in the selected Art board.

 

 

4. Trace the Usage

The connector also reports the usage of the assets when the asset is imported in Sketch app.  You can see the usage of the asset in the QBank backend. 

To see the usage of assets by Sketch connector, you can double click on the media/asset in QBank backend and see the External Usage section.