I’ve heard prototyping touted as one of the best features of Figma over Sketch. I tried it out on some responsive web product pages that I made as an addition to a personal project.

I wanted to demonstrate the interaction of looking at a model kit, viewing the paints needed to finish the kit as intended, viewing one of those paints, then adding it to a shopping cart.

Selecting the elements to facilitate interactions was easy and what I expected from using similar tools. I just clicked on the Prototype tab in the right hand column and, clicked on the element i wanted to assign an interaction to, added the interaction, then clicked on that interaction in the right column to change settings and animation behaviors.

For example the second screen (the modal) uses a slide up animation when called, and a slide down animation when closed.

Clever Animation Stuff

The “smart animate” feature was not something I expected. If you’re used to making animations with Principle (or even Flash 🧟‍♂️) the same applies here. “Hide” elements on screens by making them 0% opacity, or having them out of view and as long as they are named the same between screens, state changes will animate. For example between these two screens, the button changes from blue to green when pressed, a check mark appears next to the button text (autolayout came in handy there), and indicator dot appears on the shopping cart in the header navigation. 👍

Fixed Headers

The trickiest part for me was figuring out how to create fixed footers or headers. For example, I wanted the modal header/title and the iOS status to stay fixed, while content scrolled underneath. After consulting with YouTube, I discovered it hidden in plain sight.

There it is.

This also adds whatever you designate as fixed to its own little section in the layer column, then you can re-order those layers relative to each other. The cool part is dragging layers in to this section will also designate them as fixed. 😎

Don’t judge my layer names (even though you should).

Voila

I’ve had my ups and downs with Figma, but prototyping has been quick and didn’t require to do many modifications to the mock-ups I already had. I think it’s definitely a good in-between compared to the convenience and limitations of Craft/Invision and the control and animation nuance of Principle.

My next Figma post will probably be around using design systems.