Reverse Engineering Physics in Figma: Building Workflow Quest

When Config 2026 announced the Makeathon, most creators reached for familiar UI cards and generic dashboard templates. I wanted to build an instrument—something tactile, nostalgic, and immediately responsive.

The result is Workflow Quest, an interactive terminal inspired by 1980s Roland synthesizers, Japanese hi-fi audio engineering, and CRT phosphor screens.

The Core Problem: Why Most Design Tools Feel Flat

Digital interfaces often treat tool selection like a sterile checklist. In reality, independent operators assemble their creative toolchains like musicians patching modular synthesizers. Each tool represents a frequency; the workflow is the groove.

To bring that metaphor to life, Workflow Quest needed three pillars:

1. Physical Affordance: Hardware toggle switches, rotary potentiometer knobs, and tactile LED state indicators.

2. Spring Physics on Drag: True mass, tension, and damping applied to modular datacards when slotted into memory banks.

3. 16-Strand Sequence Logic: An assembly matrix that translates arbitrary software utilities into a unified operational sequence.

Architecture & Mechanics

Built entirely native in Figma Make without external iframe wrappers, the system models state transitions through nested interaction components:

• Spring Tuning: Damping coefficient calibrated to 0.78 with mass at 1.2 for weighted mechanical response.

• Audio Visualizer Canvas: Custom SVG waveforms reacting to card slot connections.

• Dynamic Datacards: Modular cards representing tools (Figma, Framer, Claude, Linear, Supabase) with live metadata tags.

"A tool shouldn't just record intent; it should invite virtuosity."

Key Takeaways

Building tactile instruments on the web requires balancing computational constraints with visceral feedback. When physics are grounded in mechanical references—like retro synthesizer knobs and damped sliders—users instinctively understand how to explore without an onboarding tutorial.