Elgato Developers
Search
⌃K

Style Guide

Design style guide for Stream Deck plugins.

General

In order to keep the user experience consistent throughout the Elgato ecosystem, we have created some guidelines for Stream Deck plugins to follow.

Plugin Name

The name of the plugin should accurately represent the plugins functionality. "Plugin" or "Stream Deck" should not be included in the plugin's name.

Plugin Assets

Plugin Assets in Stream Deck
Plugin Assets in Stream Deck

Colors

Action images should be a single color #EFEFEF with a transparent background. Category images should be a single color #DFDFDF with a transparent background.
Action Image Color
Category Icon Color
Action Image: #EFEFEF - rgb(239, 239, 239) Category Icon: #DFDFDF - rgb(223, 223, 223)

Sizes

All rasterized images in Stream Deck should have a high-resolution and low-resolution version. The high-res version will have the suffix @2x e.g. [email protected]. Stream Deck will automatically determine if the high resolution assets should be loaded based on the users screen resolution.
Icon
Size
@2x
Action Image
20 x 20 px
40 x 40 px
Category Icon
28 x 28 px
56 x 56 px
Key Icon
72 x 72 px
144 x 144 px
Plugin Icon
288 x 288 px
576 x 576 px

Actions

Actions List
Actions List

Category

The category should accurately represent the actions in the plugin.
Clear Category Name
Category

Name

The action name should accurately describe what the action does.
Clear Action Name
Action Name

State

Actions should use state to toggle a status rather than provide separate actions e.g. a single On/Off action, rather than separate On and Off actions.
Power on
Power off

Grouping

Consider combining similar actions and providing configuration through the property inspector to reduce the size of the actions list.
Combine Actions
Combine Actions

Key Feedback

Be sure to use the showAlert and showOk messages to let the user know if their key action was successful (see the documentation).

Property Inspector

The property inspector should use controls featured in the PISamples Plugin. You can find more information about the property inspector here.

Prevent Flickering

If your actions share a property inspector, controls should be hidden by default using display: none and then revealed using javascript. This will prevent your property inspector from flickering. You can also create property inspectors at the action level and Stream Deck will only load the specified property inspector for the current action.

Reduce Complexity

We encourage reducing the complexity of property inspector settings as much as possible. There are a few ways to simplify your plugin's property inspector.
Property Inspector
Property Inspector

Split the Action

Consider splitting the action into multiple actions in a way that could reduce the number of settings.

Advanced Settings

Consider splitting the settings into required/basic settings and advanced settings that could be hidden in a details view (See the PISamples Plugin).
Details View
Details View

External Window

If there are still a lot of settings required for the action, consider using an external window. This can also be useful when setting keys or tokens that may only be set one time or should not always remain visible. (See the PISamples Plugin)
External Window Button
External Window Button

Choose the Right Control

Different form controls provide a better user experience for different types of information.

Radio Buttons

Radio buttons are ideal for picking between two or three options, but can be overwhelming for many options. For scenarios with more than 3 options consider using a select dropdown instead.
Radio button to dropdown
Radio Button to Dropdown

Select Option Groups

For select dropdowns with many options consider adding option groups if there are potential categories
Option Group
Option Group

Filter Selects

For select dropdowns with many options, consider adding another control to filter the number of options.
Filter Dropdown
Filter Dropdown

File Picker

The file picker should be used when selecting files (See the PISamples Plugin).
File Picker
File Picker
Large amounts of text including tutorials should be removed or transitioned to external windows. Links to support pages that can be included in the store listing should not be included in the property inspector.

Preview Images

Stream Deck Store Preview Images
Stream Deck Store
Stream Deck's store displays preview images for your plugin. These images can should be included inside a previews folder inside of the plugin and can contain the user interface, helpful infographics, or marketing materials.

Requirements

  • Quantity: 1-3 images named sequentially (1-preview.png, 2-preview.png, etc.)
  • Size: 1920 x 960 px
  • Format: PNG
  • Content: Non-transparent