Framer Smart Components with Variants, Variables. Micro Interactions Prototype Design Example
A quick showcase prototype design for the new Framer smart components with variants and variables. This interactive prototype design uses smart components with variants and variables to display the content and allow for easy changes and customizations on the fly. No code required for building the animations neither the micro interactions.
The list component on the top is fully customizable. It combines the Tailwind icon set, a stack and variants of the smart component with variables for list name, the notification number and the icon.
The small thumbnail components use real-time layer effects to adjust the brightness for the hover effect and spring animations for the rest. Again, using no code for this micro interaction. Just the built-in Framer Magic Motion.
The section on the bottom is a page component provided by Framer with images from Unsplash.
All animations and micro interactions happen with no code and at 60fps. Framer does everything for you.
#framer #design #ux #microinteraction