Hacking Figma Prototypes with Overlays and Components

Prototyping your screens

When creating your screens using a design system what seems to be pretty intuitive in Figma is the prototyping section, it takes the experience up a notch by adding overlays or animating screens in. There’s also features like ‘on Drag’ which would be useful for a carousel or maps.

“If a picture is worth 1,000 words, a prototype is worth 1,000 meetings.” — @atyazin https://t.co/g1DOKR653j #freelanceuxdesigner #uxdesign #uidesign

— Richard Hill (@rickhill) September 30, 2020

Another nice feature is ‘Swap’ which can be useful for hover effects on desktop layouts. There’s a nice example on the video below (55 mins in) that showcases a UI a bit like Spotify with ‘Smart animate’ and standard transitions like ‘Push left’. It starts to get really interesting when combining these features together and not really having to use too many instances of screens.

Have you created many prototypes in Figma?

I’m just looking into Figma so if you have done prototypes and have any cool ways of working then I’d love to hear about them.