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.
here is my most-used @figma variable prototype logic — infinite timed loop ➰, do lmk if I should post more of these! pic.twitter.com/Ldw45ByXCm
— Nitish Khagwal (@nitishkmrk) January 27, 2024
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!
Prototyping pro-tip:
— Ridd 🤿 (@ridd_design) January 2, 2024
When I'm sharing a high-fi prototype for feedback it helps to include little nav menus so that viewers can easily inspect the different states of a page 👀 pic.twitter.com/QlYI08bgrV
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!
Nooooo, I tried to add this post to hightlights and somehow it got deleted without any confirmation wtf😲
— Double Glitch 🇺🇦 (@double__glitch) December 18, 2023
Anyway, I'll open the file to everyone, here's the link:https://t.co/yT3XezmOOy
And thanks @marcus_eckert for the inspiration again pic.twitter.com/ZqF4sjYCyl
Double Glitch is building on the powerful cursor-tracking technique I shared in the previous issue with a new tutorial for creating an interactive glowing card using a resource file he published in the community.
Aaaaaand the tutorial is out!
— Double Glitch 🇺🇦 (@double__glitch) December 14, 2023
Let's create this interactive glowing card in @figma using the new powerful cursor tracking technique.
More about it at https://t.co/uC0mu6GYwu pic.twitter.com/FuQ5P5mw9B
Double Glitch presents the video tutorial on cursor tracking technique as the first part of his series on advanced prototyping in Figma. You might remember his demo of this effect from a few months ago. A smart way to achieve the effect with a grid of interactive components!
In a follow-up to the above interview, Niko and Garrett share what it means to establish a “prototyping culture” in your company and why it matters. “Prototyping creates an interactive experience that brings the product to life, revealing interactions that might be overlooked in static designs. When integrated into the product development process early, it saves engineering time and streamlines workflows. Adopting a prototyping culture fosters innovation.”
Ridd interviewed Nikolas Klein and Garrett Miller from the prototyping team at Figma. Together, they provide a behind-the-scenes look at everything that led up to the advanced prototyping release at Config 2023. For a few takeaways on two types of prototypes and the use of variables, see this thread by Ridd.
“Prototyping in Figma allows us to create realistic designs to test on real users, but there’s a lot that goes into taking designs from static to something that looks functional. Join our team for a Q&A focused on bring your designs to life with prototyping and user testing.”
“In Figma, scroll position defines how individual objects behave when you scroll past them. There are three types of scroll positions: scroll with parent, fixed, and sticky. In this tutorial, we’ll focus on sticky scroll and see how we can use it make our prototypes even more dynamic.”
A short tutorial from Figma on using variables, interactive components, and conditional logic to build a prototype. These advanced features help prototype faster, reduce memory usage, and minimize maintenance time.
Miggi shows how to incorporate video prototyping into your designs and make interactive presentations. “Using video in Figma prototypes can create a more realistic experience, and add a level of polish when testing designs. We will dig into some real-life examples and walk through the many ways you can interact with, and use video to drive your interactions. We’ll cover aspects of video prototyping such as adding video to the canvas, previewing and adjusting video on the canvas, state management and video continuity across frames, and advanced interactions like “when the video hits”.
Christine shows how to use a Scroll To action to seamlessly connect navigation on a single-page website, create horizontal scroll effects, and scroll in multiple directions.
Ridd shares a few repeatable steps to start prototyping with variables — creating the variable you need, assigning the variable to the UI, testing the connection, and setting up your triggers.
If you're like me, you were a bit overwhelmed the first time you started prototyping with variables 😬
— Ridd 🤿 (@ridd_design) October 10, 2023
But once you master it you start to realize something...
It follows the same repeatable steps 👇 pic.twitter.com/aYO4me0Gmy
Dave Williames made a next-level prototype using variables. The experimental pixel art editor uses over 40 variables to draw on a 16×16 grid with 16 colors, add frames, and play them with adjustable speed! Absolutely mind-blowing.
Molly shows how to add real interactions to your prototypes. Variables make this slide show really easy to make.
💡Figma tip: Make your prototype update content like it’s the real thing!
— Molly Hellmuth (@molly_hellmuth) September 29, 2023
All you need is one variable and a few components in place. Like a carousel container, a couple of tab-group variants, and some nifty interactions.
Let's dive in 👇 pic.twitter.com/JhBxVsX9tC