hoot

Hoot Spotter is a Figma plugin designed to help designers quickly assess whether their work complies with a defined design system visually, interactively, and without leaving Figma. Hoot was created to address a gap in tooling where teams lacked fast, UI-native feedback for design system adherence, leading to bloated reviews and inconsistent delivery.

Read how I did it

Test it out yourself

My role

As the sole creator, I designed and developed the entire plugin, bridging my design expertise with self-taught development skills. I used ChatGPT, Claude, and Cursor to generate, refine, and debug the code, translating abstract visual rules into executable logic. The project pushed my understanding of component structure, Figma APIs, and design system enforcement.

100%

fully functional figma plugin

AI-Driven

ideation, design, and development cycles

Hoot Spotter helps designers self-check their work before handoff by catching inconsistencies early and reducing design-review overhead.

Designers toggle between two plugin modes: "Visual Scan" for quick detection and "Deep Compare" for detailed inspection. The UI utilizes scorecards, flags, and in-Figma previews to indicate where elements diverge from the source library, making feedback fast, specific, and actionable, especially for teams scaling design systems.

Project Planning & Scope

Used design thinking, technical prompts, and capacity scoping to create a scalable plugin.

AI-Powered Dev Workflow

Used AI tools to scaffold, test, and iterate on plugin logic as a solo builder.

Plugin-Native Design

Crafted a minimal, responsive interface within Figma's constraints.

Node-Level Inspection

Analyzes fills, strokes, shadows, and fonts at the layer level.

Visual Scorecards

Summarizes compliance levels and surfaces mismatches by category

Scalable Architecture

Built to support multiple libraries and configurable enforcement tiers in future releases.