Visual Tools is a collection of Figma plugins for crafting beautiful interfaces.
What started out as a small side project has grown into a suite of tools used by creatives all over the world.
Beautiful Shadows. Design tool to intuitively create smooth, skeuomorphic
shadows.
See
Tweet • See
Plugin
Copy & Rotate. Design tool for creating radial interfaces and patterns.
See Tweet •
See
Plugin
Smooth Gradients. Design tool that interpolates & smoothens gradients.
See Tweet •
See
Plugin
Glow. Design tool to create skeuomorphic outer glows that mimic a physical
light source.
See
Plugin
About
Designing a design tool
Designing a Design tool is an interesting project because it brings together lots of different areas of interface design. Some of my personal favorites are:
-
Mental models. Design tools are not used in a vacuum. They're embedded in existing workflows with strong mental models. Designing a design tool means anticipating where the user is coming from and where the user is going next – and crafting this into a experience that feels just right.
-
Setting loose constraints. A design tool should be designed in a way that it allows users to go beyond the intended goal and uncover new ideas. In practice this means choosing the right parameters, and interface elements that manipulate them.
Copy & Rotate was originally intended for radial watchOS interfaces only. Soon people started using it for all sorts of patterns & design explorations.
- It's all about the details. For me, tools are all about the little details and moments of delight. There's an wonderful opportunity to exercise craft and infuse personality and meaning.
Beautiful Shadows automatically matches the shadow's color to the element's background color. This results in a more realistic and pleasing outcome.
A fun little detail from Glow.
Acknowledgement
All these tools would be nothing without the community that uses them and gives constant feedback. I'm grateful for everybody who's been using and enjoying what I'm building.