Joseph Mueller recreated the NYT Connections game as a fully playable Figma prototype. Took me a couple of attempts to solve, but I got it!

A new analytics tool for Figma prototypes — create a unique tracking link that intercepts user interactions with your prototype and reports them back to you as stats and recordings. As a big fan of user screen recording tools, I’m looking forward to trying it out for testing.

You can now download your prototype or slide deck to view or present offline.

The prototyping and variables modals are now resizable, giving you more screen space for setting up prototyping interactions and viewing the details for multiple actions.

Kudos to Oğuz for his patience while creating such a sleek and advanced animation with just a Figma prototype. That’s a lot of frames to connect.

In this workshop, Miggi explores approaches to Advanced prototyping in Figma: ​“We‘ll walk through examples using variables and component sets to create dynamic prototypes that are easy to manage and iterate upon. This is an intermediate level workshop and builds on a basic understanding of prototyping in Figma Design.”

Mizko explains how to use Sections when prototyping in Figma: ​“When presenting your final output with Sections, Figma remembers the user’s last viewed frame. This ensures that when the user returns, it will show the previously viewed frame first. This creates a more comprehensible transition of your prototype.”

Figma added iPhone 16 (including Pro, Pro Max, and Plus), Apple Watch Series 10 (42mm and 46mm), and Android (Compact, Medium, Expanded) to the Frames menu. If you need vector iPhone 16 device frames for the prototyping, Keeyen published the community file with different models and colors.

“Experience your designs on any screen size with a new Prototype viewer experience that resizes responsively. With a new menu option for previewing or presenting prototypes, the viewer will respect constraints and Auto Layout properties as you resize the viewer window or select a different device frame.”

Double Glitch made a new tutorial on creating a real working parallax effect in Figma. Don’t miss the Community file as well! 

“In this two part series, we’re using variables to build an advanced prototype of an interactive, configurable volume bar. Configurable prototypes are easily customized and adapted and allow us to edit and change interactions in less time. In this first video, we’re going to set up the foundation of our interaction.”

Use the new ​“Set variable mode” prototype action to change the variable mode of the current page. See the new section in the help article or try it out in an updated Advanced prototyping playground file.

Ridd published a crash course on advanced Figma prototyping with variables. He explains when to use variables instead of variants and shows how to streamline the prototyping process by using variables to update UI elements without requiring multiple frames. Additionally, he prepared a community resource with slides and examples.

Lauri makes a strong case for introducing responsiveness to the prototype mode. Luis hints that something is cooking, and we’ll hear more at Config 2024.

Ridd runs a free advanced prototyping crash course on March 29th.

A big release of ​“squeaky stairs” fixes to the prototyping! First, the inline preview now shows mobile prototypes in draggable and resizable device frames. For a deep dive on this, see the article Behind the feature: Inline device frames.

Second, there are multiple improvements to the editing speed — copy and paste noodles and interactions to a different element; delete noodles and associated interactions; delete a starting point by dragging the ​“flow label” outside of the frame; disable all shortcuts on a prototype; enable multiple ​“After Delay” events on every node; use the ​“Change to” interaction on a nested variant; auto-exit the Scale tool when switching to the Prototype tab; copy a link to the selected flow; resize the inline preview to the actual size of the prototype, and auto-focus on the input when creating a new flow.

Third, improvements to prototyping with variables — when copying and pasting an element with a local variable bound to it, Figma will create a new collection with the copied variable; overlays now inherit the mode of the frame linking to them; negative numbers support in the expression builder; support for ! or not in a boolean conditional check (yay!), and string values ​“true” or ​“false” can be bound to instance visibility in addition to booleans. Prototyping performance has also improved, cutting down loading spinners by 22%.

Finally, the width and height values can now be set to zero, so we don’t need to rely on the 0.001 hack anymore! For a nice roundup of the above improvements, see threads by prototyping PM Garrett Miller and designer Niko Klein.

“Figma Shortcut Master Game is a cool prototype made in Figma. It’s a fun way to learn Figma keyboard shortcuts or test what you already know.” There is a total of 11 levels but they’re pretty challenging! Impressive what you can achieve with just a Figma prototype.

Cool prototyping technique built on variables.

Ridd recommends including little nav menus in high-fidelity prototypes so that viewers can easily inspect the different states of a page. Great advice and something I’m going to introduce to my prototypes!

Double Glitch reproduced in Figma a cool (or should I say ​“frozen”? Sorry!) effect first created by Marcus Eckert for the Riveo app. This cursor-tracking prototyping technique is getting wild!