← All posts

Design Plugin Banner Assets in Figma for Hoster

hoster

When you self-host a WordPress plugin, the update popup your clients see is plain by default. It has no banner and nothing to show your brand. In this short video we use a ready-made Figma template to design plugin banner assets, upload them to a Hoster store and ship them with a version bump. In a few minutes your self-hosted plugin gets a proper plugin details screen.

Design the banner in the Figma template

A plugin banner has to be a specific size, and you can't tell how it looks until it shows up in WordPress. The template fixes both. Next to the banner frame it has a mockup of the WordPress plugin details popup, so every change you make shows up in the preview straight away.

  1. Open the Figma template (the file is called Plugin Assets folder on screen).
  2. Select the banner frame and change it to match your brand. In the video we change the fill from dark to red (FF0000). You can also replace the whole design.
  3. Check the preview frame to see how the banner looks in the WordPress plugin details modal.

Export with the built-in naming

If you name the files by hand, it's easy to get the size or file name wrong. The template already has export settings with the right file names, so you just click Export. The banner exports at 772 × 250 pixels as banner-772x250.

Upload to your Hoster store and bump the version

WordPress sites only pick up the new assets when there's a new version to update to.

  1. In your Hoster store, edit the download (here, Global Theming) and upload the exported banner through Select or Upload Media.
  2. Raise the version in the download. In the video it goes to 0.0.3, with a changelog entry: "Updated image".
  3. Update the plugin itself too. In the main plugin file, change the version in the Version: header and in the _VER constant. Both numbers have to match the new release.
  4. Upload the new plugin build.

The result

Reload Plugins on the client site and open View details. The popup now shows your banner above the Description, Installation and Changelog tabs, and the Changelog tab lists 0.0.3. You can also update the description so it explains what the plugin does. Click Update Now and the site installs the new version from your own server.

Get Hoster → dplugins.com

Related posts