The UX of Figma plugins: 10 heuristics.
👇 A thread.
@figmadesign @FigmaPlugins #figma #figmaplugins #ux
👇 A thread.
@figmadesign @FigmaPlugins #figma #figmaplugins #ux
1⃣ — Use UX patterns and UI components that are familiar to Figma users.
Draw inspiration from Figma’s native features. Using your plugin should feel as similar as possible to using Figma itself.
Use colors, styles, and components from Figma’s design system.
Draw inspiration from Figma’s native features. Using your plugin should feel as similar as possible to using Figma itself.
Use colors, styles, and components from Figma’s design system.
2⃣ — Reduce the number of user actions that are required before your plugin can do its work.
The most efficient plugin possible is a plugin that gets to work immediately when it is run.
The most efficient plugin possible is a plugin that gets to work immediately when it is run.
If a UI is required, choose form controls that permit the efficient configuration of your plugin.
Here, changing the “Format” setting requires only one click because a Segmented Control is used.
Here, changing the “Format” setting requires only one click because a Segmented Control is used.
The first form control should be in focus when the UI is initially displayed, so that the user can make changes immediately.
Options that tend to be selected should be selected by default, or selectable with a bare minimum of user actions — ideally, a single click.
3⃣ — Solve a single, specific problem.
Your plugin should do just one thing (or, a few closely-related things) well.
Your plugin should do just one thing (or, a few closely-related things) well.
Consider if functionality can be “decomposed” and built as sub-commands that can be run independently.
Here, the functionality of the “Clean Layers” command is also available as separate sub-commands.
Here, the functionality of the “Clean Layers” command is also available as separate sub-commands.
4⃣ — Allow the user to control your plugin UI with the keyboard.
All form controls should have an obvious focus state, and be reachable by pressing the “Tab” key.
Refrain from modifying the natural tab order of the form controls.
All form controls should have an obvious focus state, and be reachable by pressing the “Tab” key.
Refrain from modifying the natural tab order of the form controls.
Pressing “Esc” should close the plugin UI.
Pressing “Enter” should execute the plugin with the currently configured settings in the plugin UI.
Pressing “Enter” should execute the plugin with the currently configured settings in the plugin UI.
5⃣ — Define a scope of operation for your plugin.
A reasonable approach: Default to operating on layers in the user’s selection, but if the selection is empty, operate on all layers on the current page.
State the active scope of operation in your plugin UI.
A reasonable approach: Default to operating on layers in the user’s selection, but if the selection is empty, operate on all layers on the current page.
State the active scope of operation in your plugin UI.
6⃣ — Retain the user’s previous inputs.
Here, the “Padding” setting is pre-populated with the user’s previous input.
This is important in plugins that tend to be run repeatedly.
Here, the “Padding” setting is pre-populated with the user’s previous input.
This is important in plugins that tend to be run repeatedly.
7⃣ — Provide system feedback in response to user actions.
Show success and error messages as toast notifications.
Show success and error messages as toast notifications.
Include a loading state if there could be more than a few seconds of wait time — for example, when awaiting an API response.
8⃣ — Show a live preview of the result of running your plugin.
The preview should update in real-time as the user adjusts settings in the plugin UI, or when there is a change in the user’s selection.
The preview should update in real-time as the user adjusts settings in the plugin UI, or when there is a change in the user’s selection.
9⃣ — Prefer labels over icons.
Certain concepts could be challenging to represent unambiguously with an icon. For clarity, use a label, written in plain language.
Certain concepts could be challenging to represent unambiguously with an icon. For clarity, use a label, written in plain language.
A reasonable rule: Only use icons that are already in use in the Figma UI.
Here, an icon from Figma’s “Properties” panel is used.
Here, an icon from Figma’s “Properties” panel is used.
🔟 — Pick a short, unique, and self-explanatory name for your plugin.
Use four words or less, in Title Case.
Be specific, use familiar words, and avoid made-up words.
Use four words or less, in Title Case.
Be specific, use familiar words, and avoid made-up words.
Consider using an action phrase where the first word is a verb.
The best thing that you can say is that your plugin does exactly what it says on the tin.
💡 More about these 10 heuristics here: bit.ly/figma-plugins-…
🔥 All the plugins referenced in this thread can be installed here: figma.com/@yuanqing
