“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.
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
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.”
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!
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”.