← Back to Portfolio
Product & Design

Loading...

My Role

Team

Stake

Into Design Systems Hackathon

Timeline

48 Hours (Sprint)

The FigPal Guardian in action: An interactive "Collective Memory" protecting design intent in real-time.

In April 2024, Figma released "FigPals" as a temporary April Fools feature. Its removal sparked an unexpected rebellion: over 3,000 users signed a petition demanding their return.

When I joined the Into Design Systems Hackathon team, ctrl_alt_design, we saw an opportunity to turn this community icon into a functional powerhouse.

Workshop Discovery
Our team defining the "Guardian" persona during the discovery phase.

"Design system interpretation happens in isolation. We don't need another chatbot; we need a system that observes and shapes decisions before they become code debt."

Concept Overview
From "Toys" to "Tools": Transitioning FigPals into proactive enterprise utilities.

The FigPal Maker: A recreated interface where users customize their Guardian's appearance and accessories.

This wasn't just about aesthetics; it was about identity and tone of voice. The Maker made these complex AI configurations tangible and fun.

Architecture Diagram
Technical Direction: The Extension-to-Plugin bridge allowing for persistent HTML injection and LLM orchestration.

Metrics & KPIs

9th Place

Out of 16 Elite Teams

99.9%

AI Orchestration Uptime

3,000+

Community Advocates

Real-Time

Handoff Efficiency

Team Workshop
High-speed orchestration: Leveraging AI to bridge the gap between design vision and technical execution.

Next Steps & Future Alternative

During the hackathon, Figma had zero native support for AI agents directly in the canvas. In response, the design and developer communities did what they do best: hacked their way to getting what they wanted. Inspired by this experience, I independently built and released Figma Agent Embed—the next, fully production-ready evolution of this concept.

Since the project's inception, Figma has released its own native canvas AI agent. While their native solution will continue to improve, its eventual pricing and cost models remain uncertain. Figma Agent Embed stands as a powerful, open-source alternative. Instead of being locked into a single provider, it lets you bypass sandbox limitations and plug your existing AI subscriptions (like Claude, OpenAI, or local agents) right inside your Figma workspace.

Figma Agent Embed in Action: A specialized patch of the Figma Model Context Protocol (MCP) enabling you to orchestrate opencode or any other agent directly through your terminal and interact with it seamlessly inside the design canvas.
FigBot