From Top Gun to Tron: telling stories through interfaces — 260 theatrical UI shots, every dot done by hand in Figma
The hidden craft of interface design in modern film ft. Jayse Hansen | Config 2026 · Jayse Hansen
26 min total·Actually worth watching closely: ~13 min·3 must-watch clips
- 0:12 – 3:53Listen
The worldview of film FUI: the audience is your user
Jayse Hansen opens by defining the real user of a film interface as a single person in the audience, so design only has to answer two questions — how can I clarify the story for them, and how can I make it magical?
In an age of data overload, storytelling is the shortest path through the noise.
This stretch lays out the methodology in talk alone, with no key visuals — fine to listen to like a podcast.▶ Jump to 0:12Speaker · Jayse Hansen - 3:53 – 7:12Watch
Props exposed: what the on-screen high tech really is
The truth about film props: the Top Gun cockpit screens are an iPhone X, an iPad Pro, even an iPod Touch, and the triangle display on the Tron light cycle is an iPad mini set into the bike.
The hardware behind a theatrical "high-tech interface" is usually the consumer gear in your pocket — the magic is all in the design and the compositing.
The reveal shots comparing real props with the finished frames are the entire value of this section; listening alone misses it completely.▶ Jump to 3:53Speaker · Jayse Hansen - 7:12 – 10:50Watch
Top Gun: a military-grade chain of collaboration
How a subject matter expert inside the Skunk Works top-secret facility supplied real data for every alert and every animation timing, how the speaker flew out to a naval air station to learn to fly the F-18 and built his own simulator, and how the UI animation was timed to the plane's actual breakup so Tom Cruise could act the whole out-of-control sequence in the back seat of a real F-18 without a break.
Interface timing can serve the performance directly — the realism is built for the pilots in the audience who will check it frame by frame.
This chapter has finished film clips and cockpit footage worth watching (at 642s the speaker points right at what's on screen); picture and narration reinforce each other.▶ Jump to 7:12Speaker · Jayse Hansen - 10:50 – 14:13Watch
The Mitchells flip: how would an AI design an interface?
The opposite brief from Top Gun: Mitchells vs. The Machines asks how an AI that has taken over and is designing now would build an interface. The production designer held up a Japanese coffee mug with no curves and no chamfers, and pared the speaker's proudly multi-layered chamfer sketch all the way down to a triangle.
Minimalism isn't stripping decoration; it's re-deriving the whole design from a non-human point of view.
The sketch getting simpler step by step is a visual progression, and the coffee-mug demo at 782s is the moment most worth keeping your eyes on the screen for.▶ Jump to 10:50Speaker · Jayse Hansen - 14:13 – 16:40Skim
Slow art and the recreation exercise: what Turrell taught
The director pointed him to James Turrell's slow art as the aesthetic source; the speaker rebuilt the work in vector himself and found that what looks like a white rectangle with a glow on it hides layers of pink, blue and green non-linear gradients and highlights.
Whenever you don't understand a design, recreate it — being forced to answer "how do I make this into a UI?" produces an original visual language rather than a copy.
The visuals are mostly artwork stills and gradient-analysis slides; a glance at the recreation comparison around 900s is enough — the value is in the method.▶ Jump to 14:13Speaker · Jayse Hansen - 16:40 – 21:16Skim
Tron Ares: a character-first design system in Figma
Roughly 260 UI shots across the film, all designed in Figma and composited in After Effects. The UI system starts from character rather than the frame: Ares is a Pinocchio-like puppet, control rods become the skeleton spanning every device, and the controlled/breaking-free narrative states drive the motion rules directly, while Athena's HUD stays pure machine vision as a counterpoint.
Figma can carry a theatrical FUI pipeline, and narrative state can translate straight into motion rules.
Mostly design files and system slides — focus on the puppet-rod reference at 1151s and the opposing-pair motion example at 1217s, and just listen through the rest.▶ Jump to 16:40Speaker · Jayse Hansen - 21:16 – 25:30Listen
Geometry as symbol, and a fully hand-made close
Circles are systematically banned from the Tron Ares UI, appearing only at those key moments when characters interact with natural media like water and are about to change; the speaker admits no AI was used in making any of it — he did every little dot — while saying plainly that he's excited about AI, then closes by returning to the audience as the user.
Even a geometric shape can be a story symbol — and craft and embracing AI aren't opposed.
The closing is mostly argument with little visual dependence; if you have room, glance at 1347s where photographs of real objects underpin the volumetric hologram UI.▶ Jump to 21:16Speaker · Jayse Hansen