How does the Adobe XD connector work?

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

The QBank Connector for Adobe XD allow you to easily access published and approved assets directly from Adobe XD, 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 both Windows and Mac OS are provided.

  1. Double click on the QBank provided XDX file OR Right click and Open with Adobe XD. (Make Sure that Adobe XD 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 XD menu in Adobe XD.

Using the Connector

1. Connect with Your QBank Settings.

Launching the Connector will open the following welcome page. 

Screenshot_2022-08-11_at_09.17.38.png

1. Click on Connect to open the settings page.

Screenshot_2022-08-15_at_10.29.16.png

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.

Screenshot_2022-08-15_at_10.54.14.png

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.

Screenshot_2022-08-15_at_10.44.44.png

 

Screenshot_2022-08-15_at_10.45.00.png

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.

Screenshot_2022-08-26_at_14.07.57.png

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. 

Screenshot_2022-08-15_at_10.45.39.png

To see the newly published medias/assets, click on the Refresh Button at the top right besides the burger menu.

Screenshot_2022-08-15_at_14_16_49.png

3. Import/Place Images into Adobe XD

1. Choose an Art board in Adobe XD.

2. Select the crop template OR Original from the drop down and Click the button 'Place'.

    Screenshot_2022-07-05_at_14.20.33.png

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

Screenshot_2022-08-15_at_10.48.01.png

4. Trace the Usage

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

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

Screenshot_2022-08-26_at_13.32.28.png