Scatter: A Figma Plugin for Instant Particle Effects

Overview

What started as a quick internal solution became a fully-featured Figma community plugin in just 48 hours.

While working on a client project requiring particle effects, the manual process of creating and distributing hundreds of shapes became a bottleneck. No existing plugin offered the level of control needed for creating custom particle clouds. Rather than spend hours clicking and dragging, we built Scatter—a plugin that generates beautiful particle effects in seconds.

The Challenge

Creating particle effects in Figma manually is tedious. Designers need to duplicate shapes, randomize positions, apply gradients, and adjust distribution—all by hand. For complex backgrounds or hero sections, this could take 30+ minutes per composition.

Existing plugins offered basic scatter functionality, but nothing provided the combination of shape variety, gradient control, and real-time preview needed for professional work. The market gap was clear: designers needed a tool that was both powerful and fast.

The technical constraint: neither of us had built a Figma plugin before. We'd need to learn the API, understand the plugin architecture, and ship a production-ready tool—all while maintaining our client workload.

The Approach

We used Claude to accelerate the learning curve. Rather than spending days reading documentation, we prototyped directly, asking questions and iterating on code as we went.

The development strategy was simple: build the core functionality first (shape generation and distribution), then layer on the features that make it powerful (gradients, live preview, editability). We focused on the most common use cases—backgrounds, hero accents, and abstract art—rather than trying to solve every edge case.

Key technical decisions included making all effects editable after creation (so designers aren't locked into their first attempt) and implementing live preview to provide immediate feedback. The UI needed to be simple enough for quick exploration but deep enough for precise control.

The Solution

Scatter transforms any simple shape into a particle cloud with customizable density, distribution, and gradient effects.

Core Features:

• 11 shape types: Circle, Blob, Rectangle, Triangle, Hexagon, Pentagon, Star, Chaos, Splatter, Spiral, Wave
• 3 gradient modes: Radial, Linear, Random colour distribution
• Live preview: Real-time updates as you adjust parameters
• Full editability: Return to any particle cloud and modify it anytime

The plugin architecture keeps generated particles as native Figma objects, meaning designers can further manipulate individual elements if needed. The gradient system maps colours across the particle distribution, creating cohesive visual effects rather than random noise.

Built on the Figma Plugin API with TypeScript, the entire tool ships at under 100KB and runs entirely client-side for instant performance.

The Results

Since launching on the Figma Community, Scatter has been adopted by 56 active users and maintains a 5-star rating.

The feedback from designers has validated the core problem: what previously took 30+ minutes now takes seconds. The live preview feature, initially an afterthought, became the most-praised aspect—allowing designers to experiment rapidly without commitment.

The two-day development timeline proved that AI-assisted development can dramatically compress learning curves. What would have traditionally required weeks of API documentation study was achieved in a focused sprint, without sacrificing code quality or user experience.

Key Takeaways

• AI as a learning accelerator: Claude enabled us to learn Figma plugin development while building, collapsing weeks of study into days of practice
• Ship the MVP: Starting with core functionality and iterating based on real usage beats trying to predict every feature up front
• Solve your own problems: The best tools often come from scratching your own itch—intimate knowledge of the problem leads to better solutions