Figma Cursor
A Figma-inspired custom cursor with a smooth chip that follows your movement. Lightweight, fully responsive, and highly customizable — adds instant polish to any website.
Make it with Workshop
Build your own component with AI
A Figma-inspired custom cursor with a smooth chip that follows your movement. Lightweight, fully responsive, and highly customizable — adds instant polish to any website.
Make it with Workshop
Build your own component with AI
Figma Cursor replaces the default browser cursor with a modern, animated one and an elegant floating chip that smoothly follows it around the screen.Perfect for portfolios, agency sites, and product pages, Figma Cursor enhances user experience with fluid motion and subtle micro-interactions — all without code.What
Inspired by Figma’s iconic live cursor look
Built with smooth motion physics for a natural follow feel
Fully responsive and lightweight — optimized for performance
Works on any layout or page setup
Adds a premium interactive feel that instantly elevates your UI
Cursor Size
Cursor Color
Cursor Border Color
Cursor Shadow Intensity
Responsive Toggle — enable adaptive behaviour across devices
Chip Text — personalize your label or name
Chip Background Color
Chip Text Color
Chip Text Font Style
Chip Padding
Chip Radius
Chip Align w.r.t. Cursor
Chip Offset
Chip Stiffness & Damping — customize motion physics for realistic movement
Copy and paste the component into your project.
Place it at the base (under Desktop) level of the page.
Change Type to Fixed and pin it to the top of the page.
Set Width to Relative 100% and Height to Viewport 100vh.
Done! You now have a Figma-style cursor with a smart floating chip.
NOTE: Keep the z-index of the component to a higher value (>1), but lower than the interactable elements in your web page, otherwise the cursor will not be able to detect them.
