#Prototyping

Product design + rapid testing = better outcomes

Figma hosted the Maze team to discuss the best practices for all things user research, building a robust product process centered on insights, and how best to your Figma files for scale.
Product design + rapid testing = better outcomes

Create multiple flows

Compare, test, and present multiple interactive ideas from a single page. Check out a couple of quick tips for using the new feature by Miguel Cardona.

Trick to Show/Hide Header on Scroll in Figma

“Here is a simple trick that you can use to hide and unhide the app header on scrolling down. This trick can be used in web and mobile app prototyping, as the user scrolls down the header will be hidden and as the user scrolls back to the top the header will be shown.”
Trick to Show/Hide Header on Scroll in Figma

Mock data fonts

Instead of mocking data with a bunch of rectangles in a rough prototype, use a specially designed font like Flow or BLOKK Neue.

Responsive prototypes using smart animate

Good idea to show different sizes side-by-side in a prototype. An animation looks great, too!
Responsive prototypes using smart animate

Multiple prototype tabs in the desktop app

No need to use Chrome for comparing prototypes between pages anymore!

Prototyping Keyboard/Gamepad Interactions

Learn how to use keyboard/​gamepad interactions for TV and game-based interactive prototyping.
Figma prototyping with keyboard/gamepad

Figma Tutorial: Create Animations in Your Web, UI Design & Prototypes

Mizko shows how to build animations with Figma’s Smart Animate feature.
Figma Tutorial: Smart Animate - Create UI & Web

Figma tips: Scroll to map interactions

“Make scroll to map interactions in Figma Design. This demo uses placeholder frames in lieu of using the offset values for navigating a map with scroll to interactions.”

Scroll to map interactions

Figma tips: Adding a contents page to your prototypes

Design Advocate Luis shows how to set up a contents page to navigate through multiple flows.

Adding a contents page to your prototypes

How to turn your Figma designs into responsive prototypes

Creating responsive prototypes with Figma and Anima.

Interaction file giveaway

A collection of cool micro-interactions made in Figma.

Office Hours: Scroll Actions for Your Prototypes

“Catch up on Office Hours with Niko and Aaron from Figma to level up on some new prototyping capabilities.”

Office Hours: Scroll actions for your prototypes

New prototype action: Scroll to

Scroll to selected objects or layers within the same top-level frame.

Figma Scroll to Playground

Use scroll interactions to create fast navigation of your designs. This playground will walk you through everything you need to know to help users explore landing pages, carousels, and more.

Figma Tutorial: Horizontal & Vertical Scrolling

Sebastiaan Schillebeeckx quickly recorded a tutorial on using Scroll To in prototyping. BTW, great choice of the book on his desk! 😉

Figma Tutorial: Horizontal & Vertical Scrolling

Using ScrollTo Interactions to traverse spaces

As soon as Figma releases something new, Miguel Cardona comes up with a great use case.

Change Starting Frame in a prototype

Nifty little time-saver.

UXToolset

UI kit for creating wireframes, diagrams, prototypes, and handoff documentation.

Adding hover states

Rogie shows how to add a hover state and make nav component instances inherit all main component triggers.

Features

Topics

Design Tools

Figmalion

Issues:
193
Links:
3,553