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
Colors
Action and Category images should be a single color rgb(255,255,255)
(#FFFFFF
) with a transparent background.
Sizes
Vector images (svg
) should be used whenever possible. 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. actionimage@2x.png
. 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
Category
The category should accurately represent the actions in the plugin.
Name
The action name should accurately describe what the action does.
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.
Grouping
Consider combining similar actions and providing configuration through the property inspector to reduce the size of the actions list.
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.
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 (read morea bout grouping elements).
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.
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.
Select Option Groups
For select dropdowns with many options consider adding option groups if there are potential categories
Filter Selects
For select dropdowns with many options, consider adding another control to filter the number of options.
File Picker
The file picker should be used when selecting files (read more about the file input).
Text and Links
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
On the Marketplace product detail page, it displays preview images and even videos for your plugin.
For more information on gallery media specs, please see:
Last updated