Spotlight effect on hover in Figma | Ui/Ux Design in Figma | #figma #figmatutorial #uiux #uidesign

let's create this Spotlight effect using figma [Music] I've created this web page let's type in light [Music] now pick a color from the web page set the blending mode to multiply and reduce the opacity to 20 percent now let's create a duplicate set the blending mode to normal and opacity to 100 percent and pick the white color now let's create the spotlight create a rectangle and add a layer of blur effect set the blur value to 150 and select the color white now let's create a duplicate and set the opacity of the first object to zero select both and create a component set [Music] now let's create the Prototype add interaction [Music] while hovering smart animate linear 300 milliseconds now let's duplicate the first object and place it on top of the light now let's create a grid using rectangle so that it covers the whole text you can create this using Auto layout it makes it much easier that way now let's create a layer mask and align the text and put it inside the web page now let's play the Prototype and that's it [Music] [Music] thank you

Channel: Swapnil K Designs

Views: 4,293

Keywords:

Id: S2fCHnkimVs

Length: 2min 43sec (163 seconds)

Published: Fri Mar 24 2023