Figma part 7: Making interactive components
In this series of videos, we look at interactive widget creation using Figma.
Make a drop down menu
In this video transcript, Simon guides viewers through creating an interactive drop-down menu with hover animation for website navigation. They demonstrate step-by-step construction of menu items, incorporating hover effects and prototype linking, resulting in a reusable menu system for seamless navigation within prototypes.
Make a number counter
In this video segment, Simon demonstrates the creation of an interactive counter widget for product quantity selection. They utilise Figma to design and prototype the widget, incorporating plus and minus buttons that adjust the quantity, with variant states to limit values and provide visual feedback, ultimately creating a reusable asset for future projects.
Make a picture viewer
In this segment, Simon guides viewers through the creation of an interactive picture viewer widget featuring a slideshow functionality. They demonstrate the design process in Figma, utilising boxes for images and thumbnails, incorporating directional arrows for navigation, and masking elements for seamless transitions. Through the use of plugins and component variants, they develop a reusable asset for implementing image viewers across different projects, providing practical techniques for widget creation.
