Live NHL Scores
Figma Prototype

What happens when a hockey fan knows Figma too well?

This project started as a personal challenge to push the boundaries of Figma prototyping using variables and conditional logic.

The NHL has 32 teams, split into home and away, meaning two different teams and a live score for each need to be dynamically displayed at any given moment.

Figma's keyboard input feature is powerful but limited. It only registers the first key pressed and cannot accept a full string of input, so the solution needed to be built entirely around pointer interactions and conditional statements instead.

Figma's variables system is powerful for design logic, but there is no native way to pull in external data.

With 32 NHL teams, each game produces a unique home and away pairing, meaning there are over 990 possible team combinations before even accounting for the scores. Every state needed to be handled correctly.

A four-step pipeline from NHL servers to Figma prototype.

NHL Score API

Using the nhl-score-api, scores are pulled from a given date. In this case the target is always the previous day's games, returning team matchups and final scores automatically each morning.

Variable Mapping

Each team is assigned a print value that maps directly to a key on the keyboard. Scores work the same way — a single key is used, and each press increments the score by one, keeping the input logic simple and consistent.

Figproxy Conversion

Figproxy reads the print outputs from the program and converts them to mimic physical key presses on a keyboard, allowing Figma to register each interaction exactly as it would from a real keystroke.

Figma Conditionals

By creating conditionals for every key assigned to a team and each pointer, the prototype can account for every possible game outcome, from the matchup itself down to the individual scores on each side.

Simple front-end, complex back-end.

The interface itself is minimal by design — the complexity lives entirely in the pipeline behind it. The two tables below outline the keyboard inputs used to control the prototype and the full team key map. The Figma prototype is embedded directly and will accept keyboard inputs, so the full experience can be tested in place.

The prototype in action.

The following is a recording of the prototype in action. The date being pulled in the recording is April 29th, 2026.

More than a fun side project.

This project proved that Figma can function as the output layer of a real technical system, not just a design tool. Building a working data pipeline from scratch, covering the API, script, hardware, and prototype, reinforced that strong UX thinking and technical fluency are not mutually exclusive.

Working through the limitations of Figma's keyboard input model pushed the solution toward pointer-based conditional logic, which turned out to be a more robust and scalable approach than a string-based input would have been. The constraint made the outcome better.

Reflecting on it, the most valuable outcome was the shift in how to think about prototyping. A prototype does not have to be a static approximation of a real product. With the right pipeline, it can be the real product.