Visual Tools
Visual Tools is a collection of Figma plugins for intuitively crafting beautiful interfaces. It's a collection of tools that lets you focus on hitting the nail rather than on how to hold the hammer.
What started out as a small side project, has grown into a suite of design tools used by more than 300,000 creatives all over the world.
Beautiful ShadowsDesign tool for intuitively creating smooth, skeuomorphic shadows.
GlowDesign tool for creating skeuomorphic glows that mimic a physical light source.
Copy & RotateDesign tool for creating radial interfaces and patterns.
Smooth GradientsDesign tool for interpolating and smoothening gradients.
Field Notes: Designing a design tool
Designing a Design tool is an interesting project because it brings together lots of different areas of interaction 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.
- 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.
Detail: In the shadow tool, drop shadows are tinted based on the element's background color. This creates a more realistic and pleasing result because it mimics how light bounces from surfaces in the physical world.
Little detail from Glow that plays into the interface's light bulb metaphor.
