Index / Visual Tools

In Figma, certain tasks and workflows create frictions that make work incredibly tedious. Figma plugins reduce this friction by facilitating or automating these task.

Visual Tools is a collection of Figma plugins that aid designer in their daily workflows and let them focus on hitting the nail instead of how to hold the hammer.

SyntaxDescription
ContextSide project, initiated in Aug 2021
ExecutionPrototypes and product built with React1

Approach

Building Design tools is an interesting domain because it converges different areas of interaction design:

  1. Mental models. Design tools are not used in a vacuum. They're embedded in existing workflows where mental models are already established. It's exciting to think about these mental models and how a design tool can hook into them.

  2. Visual polish and craft. Figma plugins should feel like a native experience. Like a feature of Figma itself. Because of this they're a great opportunity to exercise visual polish, dabble with Design Systems and think about interactions and animations on a granular level.

Image showing the different components of the plugin's Design System.

Components of the Copy & Rotate plugin matched against the Figma Design System. 2

Details: the Bézier curve icon of the dropdown unit mirrors the Bézier curve that is controlled and adjusted by the user.

Visual feedback of a brightness slider input of the Beautiful Shadows plugin.

  1. Thoughtfulness. Because design tools aid in creation of virtually anything, the use cases are virtually infinite. To ensure that the tools work across all scenarios, it's important to consider a lot of edge cases. This requires to engage with users and the work they're doing, which is incredibly fun, insightful and rewarding.

  2. Continuous Iteration. After a plugin has been published, it's potentially used by thousands of people every day. This is a fantastic opportunity to collect quantitative data, get individual feedback and subsequently iterate on the plugin's experience.

Image of a heatmap that is overlaid on top of an interface.

A heatmap of thousands of clicks3 exposed ambiguities in the interface: non-interactive elements were clicked repeatedly because they resembled similar interactive elements in the Figma UI. Read the full case study on Medium

Image showing two interfaces next to each other.

Surface evolution informed by insights from quantitative data and individual feedback from users.

  1. What if our Design Tools were smarter? Figma plugins are also a great playground to experiment and think about Design Tools on a more meta level. Are design tools are just interfaces that translate our inputs into operations, or could design tools be smart collaborators that design along with us?

When saving a Bézier Easing curve as a preset, the plugin suggests a name based on the curve's characteristics. Instead of using technical terms to precisely describe the curve function, the plugin opts for a more human-readable name.

When creating a shadow with the Beautiful Shadows plugin, the plugin tries to match the shadow color to the element's backdrop.

Footnotes

  1. All Figma plugins and explorations are open-source and can be browsed on my personal GitHub

  2. Figma periodically publishes a snapshot of their existing Design System, UI2, on Figma Community (Link) which was used to reference the custom components down to pt level.

  3. In total, over 36,000 data points from over 2,000 individual sessions were recorded and evaluated. The data was collected and visualized using a small custom script that recorded total clicks and click sequence (anonymized). I opted for a custom solution because it was imperative to collect as little data as possible.