Figma prototyping series

Welcome to my Figma prototyping series. Every other week on Thursday I will post a new guide to prototyping in Figma. The goal is to build on the concepts we learned from previous posts. This post will serve as a table of contents for all the concepts we will cover. Save this post as a reference, come back to whenever. I will update the table of contents as the list grows.

Find the prototypes on my Figma Community

Table of Contents

1. Getting Stated — The Basics
2. Floating action Button — unpacking Smart animate

Coming soon

1. Like button micro interaction — On Click, On Press, Delay
2. Carousel — On Drag
3. Map Card Scroll — On Drag
4. iOS Picker — On Drag
5. Gesture Row — On drag
6. Tinder Card deck — On drag
7. Inputs — How to fake it — Key inputs
8. Message chat — After Delay
9. Segmented control, slot components
10. Nesting components -navigation
11. Card to full screen view
12. Overlays
13. Toast overlay (manual position overlay)
14. Swipe to reveal nav

Leave a comment below and let me know what prototyping concepts you’d like to see covered.

Purpose of this series

Over the last year I have been creating and improving Figma design systems. A big part of my focus has been creating and refactoring components for prototypes. With this approach, myself and my design team have begun to think prototypes first. We have left static designs behind and focus on the entire story.

This has unlocked a ton of potential for us. We’ve found that this approach has reduced open questions by 10x. Our design critiques have become focused more on the people problem we are solving. Before, critiques usually resulted in identifying edge cases to design for. Now we focus on the whole experience and interactions. Critiques feel more productive, and outcomes feel more refined.

Collaboration with our engineering team has also been a delight. Engineers have a greater understanding of the design ask. Our prototypes help define expectations of the feature. Small details, like micro interactions and animations, are now common patterns engineers use. Finally, Stakeholders have a better grasp of what we are building and what we are solving for. And, as a bonus, we are always prepared with something for rolling research.

Building a prototype first design system

Before we jump into and begin prototyping everything, we need to make sure our design system set up for it. Figma allows for so much flexibility within our components. we can add prototype states directly into our components. By adding press states, micro interactions, scroll interaction and more, we can build prototypes fast. It simplifies prototyping for the entire design team and empowers teams to always prototype. And all our previous designs, now have prototype states built in.

Figma’s prototyping capabilities are pretty robust. There is a ton you can do with Figma. More than most people even realize. We will unpack a lot in the coming posts.

I look forward to seeing all the amazing prototypes everyone creates.