How to Design a Product Card with an Image Switch Hover Effect in Figma скачать в хорошем качестве

How to Design a Product Card with an Image Switch Hover Effect in Figma

A quick Tutorial going over how to make give a product a lifestyle image in a hover state on a mock in figma. This is a popular and useful feature that many websites use and we'd like to showcase this in figma. As a designer, you might need to know how this feature can be done in the design phase so that you can show your client this great prototype. 00:00 - Intro 00:48 - Step 1: Build Your Product Card Component 01:40 - Step 2: Create a Hovering Variation 02:12 - Step 3: Setup the Prototyping of the Product Card Component 03:10 - Step 4: Add imagery to the Instances of the Component 04:20 - Step 5: Check Your Design 05:05 - A Pitfall to Remember And there you have it! Using the component and interaction of component variations can allow us easily add a secondary image for each product card for the hovering effects and build the full category page very effectively. Try this today and let your client review your fantastic prototype. ✩ FOLLOW ARCTIC LEAF ✩ ✭ WEBSITE: https://arcticleaf.io/ ✭ TWITTER:   / arcticleafinc   ✭ FACEBOOK:   / arcticleaf   ✭ INSTAGRAM:   / arcticleaf   ———————————— Tutorial by: Max D Animated and Edited by: Taylor Madden Produced by: Natalie Pucacco ———————————— #Marketing #ArcticLeaf #Figma ————————————