Mastering Row Hover Effects in Figma: A Step-by-Step Guide

hello everyone and for today's quick tip I'm going to have a followup to my previous table video since you've been asking I'm going to show you how to create over state for a colum based table if you haven't seen my tutorial on resposive tables yet check the link in the card and let's get right to it I'll actually show you two methods of doing this the first one will be the atomic components of my table so I have the table items The Columns and the table itself as you can see here I removed the background color for these items and I'm using a few for the entire table what I would do for this over effect is actually to pick the First Column which is this dragable item here you can do for all them but you just need one for this video so that's what I'm going to show you see the part element that is this drag icon here so I'll create a duplicate of this add this property of over set this two off and this two on and I'll change the background here for a nice off white so what I have to do now is to select my first option hit prototype and then add this interaction that will be while overing it will change to this variance here that is the over one and in my table make this column here go all the way then I need to select all the items and size so hit enter to select them all and change this to fill container Now set this to Absolute position let me just move this up and this is important why I move that up that's because my table is set to Less on top so that's why I have to bring it up but if it was down like it was before I mean just just show you I have to actually make this first on top so be careful with that just bring it a bit to the side and make sure it has this same length of the entire table frame this let me see the Prototype and as you can see I have a over State taking over all my row that is happening because this particular column here it's set to have the same length as the entire table while all these other cells have no background color so that's why we can see through it okay so this is the first method another way you can do it is having like a frame that is the same height of the row which is 56 in my case here have this to the whole color that I want let me select all my items I'll just unselect these two just to not destroy what we already did select prototype here and add the direction to this Frame two which is the row with the hover I'll set to all hovering open overlay and set the overlay settings to manual and now what I have to do is actually Center the row with the sell content itself so let me go one by one here Center another one cck while overing manual bring this here to the center and do with all of them I will just fast forward okay and last but not least seted this layer to set up pass through to multiply which is merging colors with the content below it and then for this table let me just delete this one that we are not using so let me test this table now and as you can see and I over over I can see the effect that is actually making the entire cell a bit darker remember to make sure this stable frame here is actually set to clip content to avoid row going beyond the limit that you want so that's it two methods for to create a row over in a column based data table I really hope it helps you in your future designs if you have any more questions doubts or something you like to learn from me please leave in the comments down below don't forget to hit the Thumbs Up Button subscribe to the channel for more and I see you in the next video bye-bye

Channel: Mindesigning

Views: 287

Keywords: design, ux design, technology, figma, table, hover, ui design, tutorial, lesson, prototype

Id: urLsjxShaIQ

Length: 3min 26sec (206 seconds)

Published: Mon Apr 08 2024