Figma Ruler
A design-tool ruler with every section as a frame.
Features
- A vertical ruler on the side of the page, like Figma
- Every section drawn as a named frame at its real size
- Click or drag along the ruler to move through the page
- The current frame is highlighted as you scroll
Best for: Design studios, portfolios and tool sites that want navigation to look like the canvas their audience works in.
Installation
npm install motion @radix-ui/react-slot class-variance-authority clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| logo | ReactNode | - | Your logo. It inherits currentColor. |
| items | NavItem[] | - | One link per section, in page order: label and #id href. |
| cta | { label: string; href: string } | - | Optional call-to-action button. |
| className | string | - | Extra classes for the outer element. |
FAQ
Is the Figma Ruler navbar free to use?
Yes. Figma Ruler is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Figma Ruler work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use Figma Ruler in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Figma Ruler need installed?
motion, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Figma Ruler accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.