Then generate an API key for XD Plugin (dashboard top menu → XD icon click).

Open the Bannernow Plugin (top XD menu → Plugins → Bannernow).

Then Select the Artboards/Frames you want to export from the Layers panel or directly on the canvas.

The selected Frames/Artboards will appear in the Bannernow Plugin panel (with the number of items that will be exported).

You can also Expand the Frame/Artboard directly in the Plugin panel and set the export format for each element separately.

If there are too many elements to export – group design elements and mark it for export (in XD).

Choose the Bannernow project and the folder where these Frames/Artboards will be exported.

Advanced export settings:

• Retina – will export all the images in @2x format.
• Export Hidden Layers – will also export hidden layers
• Generate Global Preview Image – will generate a screenshot of the Artboard/Frame

Click Export button to export your Frames/Artboards to Bannernow.

Now you can open the exported designs in Bannernow and start animating.

Generate and copy the API key from your Bannernow account (top dashboard menu -> Figma icon click):

Paste it in the Figma Bannernow Export plugin

Then Select the Artboards/Frames you want to export from the Layers panel or directly on the canvas.

Then you’ll see the selected Frames/Artboards in the Plugin panel (with the number of items that will be exported).

You can also Expand the Frame/Artboard directly in the Plugin panel and set the export format for each element separately.

If there are too many elements to export – group design elements and mark for export (in Figma).

Then choose the Bannernow project and folder where these Frames/Artboards will be exported.

You can also select some advanced export settings:

• Retina – will export all the images in @2x format.
• Export Hidden Layers – will also export hidden layers
• Generate Global Preview Image – will generate a screenshot of the Artboard/Frame

Click Export button to export your Frames/Artboards to Bannernow.

Now you can open the exported designs in Bannernow and start animating.

By default our extension will export all visible layers in your Photoshop file.

Text layers will be exported as TEXT, other layers will be exported as PNG.

By selecting any Layer in your Photoshop file you can configure the export type for the selected layer:

When you select an individual layer of an image in Photoshop, you’ll notice that the plugin panel that lets you mark this selected layer/group as an asset (JPG or PNG or Do not export). You can also choose the slide in which it will appear on the timeline (slide1 – 0 seconds delay, slide2 – 3 seconds delay, slide3 – 6 seconds delay).

If you’ll choose PNG, it will basically add “-png-“ in front of the layer name, or “-jpg” if you choose JPG format file. You can also rename the layer manually (simply add “-png-” in front of your layer name).

The Text has one more option: you can Export it as a text. This will allow you to edit the text afterwards, in Bannernow editor.

If you choose PNG or JPG formats, the text will be exported as an image.

For folder groups, you have the option to merge all child layers into one image. Just choose Export as JPG or PNG for the selected folder and the plugin will merge all folder layers into one image.

Next, click the Export to Bannernow button.

If your document consists of Artboards – you will see the list of Artboards to export to Bannernow (select the ones you want to export using checkboxes).

Each Artboard will be exported as a new Banner size. If you have two artboards with the same size – the second artboard will be exported to a new bannerset.

If you don’t have any artboard then your document will be exported as one single banner.

When exporting to Bannernow you can configure the export options:

Retina – if you need your assets to be exported in 2x size (retina).

Export Hidden Layers – uncheck this option if you don’t want to export hidden layers

Generate Global Preview Image – will generate one preview image that will merge all layers so you can compare your Bannernow elements to the original design.

Once exported you will see a list of generated Bannersets. Click Open to quickly access them in your Browser.

Here is an example of 2 banners exported with Photoshop Plugin:

1. Generate and copy the API key from your Bannernow account (top dashboard menu -> Photoshop icon click):

2. Paste it in the Photoshop Bannernow Exporter plugin

Now you should be able to export your designs directly from Photoshop to Bannernow.

If you want to know more about how to use this plugin please read our next article: How to use Bannernow Photoshop Extension