I created a simple hover animation in Figma where text gets an underline when you move your mouse over it. The problem is that when I try to export this design to actual code, the hover behavior doesn’t work properly.
I tried using different Figma plugins to convert my prototype but they don’t seem to handle the interactive hover states correctly. The underline effect that looks perfect in my Figma prototype just disappears or breaks when I export it.
Has anyone successfully converted hover effects from Figma to working HTML and CSS? What’s the best way to recreate this underline animation in code? I’m looking for a clean solution that actually works in browsers.
Any tips or code examples would be really helpful since I’m stuck on this conversion process.
To achieve hover effects similar to those in Figma, you will need to implement them manually in your CSS. Export tools often fail to capture interactive states like hover animations. For a smooth underline effect, I recommend using CSS transitions. Start by setting text-decoration to none and then applying text-decoration: underline on hover, along with a transition to ensure it looks seamless. Alternatively, for more flexibility in the design of the underline, create a pseudo-element like ::after with a width of 0 that expands to 100% on hover. This allows you to customize the underline’s appearance, including its color and thickness. Make sure to include a transition property, such as transition: all 0.3s ease, to prevent any abrupt changes.
Figma plugins suck at hover states since they’re built for static exports. I’ve hit this wall tons of times - it’s way faster to just code it yourself than mess with automated tools. Use border-bottom instead of text-decoration for underline animations. You get way more control over positioning and thickness. Start with border-bottom: 2px solid transparent, then switch to your color on hover with transition: border-bottom 0.2s ease. This stops those annoying layout shifts you get with other methods. Tweak the border position with padding-bottom if you need perfect spacing. Test in different browsers - Safari especially handles transitions weird sometimes.
Skip the Figma export entirely - build it from scratch instead. Use transform: scaleX(0) on a ::before element, then scaleX(1) on hover with transform-origin: left. Way smoother than border tricks and won’t cause any layout jumps.