As the LEAP Marketplace grows in size and popularity, the identity you create for your LEAP App can have a dramatic impact on your potential users while they decide whether your App is right for them. You only get one chance to make a good first impression, and your LEAP Integrations team is committed to helping you succeed in this area.

That is why we’re excited to introduce our new Marketplace Templates on Figma.

Marketplace Templates allow you to:

  • Upload your App Icon or Developer Icon, and export it to the correct specifications
  • Choose from any of our three available banner image templates and customise as much (or as little) as you want
  • Download your customised banner images to the correct specifications for LEAP Marketplace
  • Preview how your new assets will look on LEAP Marketplace

How to use the templates

 

Prefer to not read? Check out our demo video

Boosting your Marketplace Identity with Figma Templates


Getting Started

1. View the Templates

2. Click the small arrow next to the “Marketplace Templates” title, and click “Duplicate to your drafts”.

Screenshot of action menu, clicking "Duplicate to your drafts"

A confirmation will appear at the bottom of the screen stating “File duplicated to your Drafts”. Click Open.

Screenshot of confirmation box, clicking "Open"

3. Confirm you are in a file named “Marketplace Templates (Copy)”.

From here, you are able to make any edits you like, including renaming this file if you wish.

Screenshot of action menu, clicking "rename"

Here are some useful keyboard shortcuts and actions to help you along:

  1. Scroll Wheel - Scroll up/down
  2. Shift + Scroll Wheel - Scroll left/right
  3. CTRL + Scroll Wheel - Zoom in/out
  4. Mouse Wheel Button Hold - Pan

App and Developer Icons

The following steps will assist you in creating your App and Developer icons. An App Icon is an icon used to identify your App on the Marketplace. A Developer Icon relates to your company, or the organisation hosting and developing the App.

Refer to our Marketplace Identity Guidelines and Technical Specs for the requirements for your Icons

1. Locate the appropriate Icon type (App or Developer), then, while holding CTRL, single-click the grey “Replace me” box on the left section.

Screenshot of the Logo import and export section of LEAP's Figma Templates

Clicking this element will reveal a panel of options to the right.

2. Locate FILL, click Image, hover over the image and click choose image

Screenshot of the choose image dialog in Figma

3. Locate your image and upload it through the upload prompt.

4. Drag the corner handles of your image and expand it so the graphic elements sit within the keylines provided. It is important that the image does not extend past these keylines, however, background colours may. Note how the extreme left and right of the LEAP Logo below touch, but do not extend beyond, the keylines of the grid.

Screenshot of the LEAP Logo with keyline guides overlayed

Your icon is now ready to export in a Marketplace-ready format!

Screenshot of the keyline-guide and export-ready versions of the LEAP logo side-by-side

5. Single-Click the icon on the right under the Export heading. Do not hold CTRL this time.

You should see a purple outline wrapping around just the icon and nothing else (no margin) as shown in the following screenshot

Screenshot of the LEAP Logo ready to be exported

6. In the right-hand panel, scroll down to Export and expand this section if required.

Ensure the settings are:

  • Scale: 1x
  • Format: PNG

7. Press “Export App Icon - Export Icon here” and save it to your desired folder.


Marketing Banners

At the time of writing this post, we have created three banner templates for you to choose from. This may change in future.

  1. Option 1 - Split Layout Image Left
  2. Option 2 - Split Layout Image Right
  3. Option 3 - LEAP Matter Ribbon Button

For all Banner Image templates, the top row are editable, and the bottom row are exportable.

To update these templates:

1. Identify the template you wish to update.

2. CTRL + Single Click on the element you wish to update.

Screenshot of the Marketing Banners section of the Figma templates

3. When updating images, after CTRL + single-clicking the image, navigate to the right-hand panel, scroll down to the Fill section, click Image, then click the “Choose Image” button.

Screenshot of the choose image screen

4. Browse for your desired screenshot and upload it.

When updating text, CTRL + Double Click the desired element. This will select the text element and will highlight the text indicating that it is editable.

6. Make your desired text changes

Screenshot of a modified banner

By default, the LEAP branding colours have been used. You are free to edit these, as well as font, size etc by using the right hand settings panel.

Customise further by modifying the background with a branding image of your choice, or a fill colour.

Fill Colour

1. CTRL + Single Click the background image.

2. Navigate to Fill and select your desired colour

Background Image

1. CTRL + Single Click on the banner image.

2. Navigate to Fill and select the colour tile (small square) of the current fill colour (default will be White) to reveal the colour picker.

3. Locate the fill type menu, labelled with “Solid” by default.

4. Click “solid” to reveal the list of fill types.

5. Choose “Image”.

By default, a black and white checker will appear. Click Choose Image.

6. Upload your image of choice and adjust its size and position as needed.

Now it's time to export

1. Scroll down to the bottom row of banners.

2. Left-click the banner you want to export (don't hold CTRL this time)

3. In the right panel, scroll down to the export section

4. Press Export and save in your desired folder

Your banner image is now ready to upload straight into Dev Console

And that’s it! Now you can scroll down to the bottom and see how your assets will look on Marketplace.