Alex Widua • Designer & Prototyper
WorkAbout
Image showing the different components of the plugin's Design System.

Visual Tools is a collection of Figma plugins that support designer in their daily workflows and craft.


From smoothing gradients, creating radial interfaces to creating smooth shadows, these tools allow designers to focus on hitting the nail rather thinking about how to hold the hammer.


What started as a little side project has grown into a suite of tools used by creatives all over the world.

See all plugins in Figma community

Context
Series of side projects, started in late 2021
Tool belt
Prototypes and Tools built using React.
All tools are open source
Notable
More than 100,000 users between all tools
Image showing the different components of the plugin's Design System.

Designing a design tool

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.

  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.
Image showing two interfaces next to each other.

A heatmap of thousands of clicks 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

  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?