Matt D. Smith walks through rebuilding Claude's icon hover effects in Figma. Copy SVG icons from the inspector, set up component variants with an "is Hovered" property, use Smart Animate on prototype connections triggered by "While hovering", and download the file from shiftnudge.com/resources.
The chat bubble spread apart, the folder scales down while the papers lift, the brackets push out. I just think it's really cool. It's very fun and it adds so much to the sort of friendly assistant personality that Claude has. You can open the inspector inside your web browser, hover the SVG tag, and you'll find all of these icons. Command C and then command V into Figma. We're going to do this for every single icon. Now, the circle button for New Chat isn't an svg. We're going to recreate that one manually. We're going to need variants. I'm going to put auto layout on the component set and set it to Hub. Instead of calling it Property one, we'll call it is Hovered. Call this one no and this one yes. You can see the toggle is hovered. Yes or no. Now, let's look at what Claude is actually doing with these animations. They're just spreading apart a little. Pretty simple. Now, once we have these icon variants set up, we can add a prototype connection, drag a noodle from the default variant to the Hovered variant. We're going to set the trigger to. While hovering, set the animation to Smart Animate. There's a lot of tweaking you can do to the animation speed, so you get this variant matrix, click the frame, hit shift space bar to preview, and there it is. If you're going to animate them, this is definitely a way to have them all working together. If you want access to the Figma file where I recreated these icon animations, go to shiftnudge.com resources and you can download them all.
