Ruler

ruler and guide system from Adobe Illustrator — drop it over any frame and you get draggable guide lines.

DISCLAIMER: To have it work properly, set: Pointer events: none Ruler is a Framer component that recreates the ruler and guide system from Adobe Illustrator — drop it over any frame and you get draggable guide lines. Everything is click-through by default so it sits on top of your existing content without blocking anything. Features: Dark/Light Mode Support — toggles the ruler strips between dark and light mode Show Guides — shows or hides all placed guide lines. Useful if you want the rulers visible without the guides cluttering the view. Horiz. Ruler — turns the horizontal ruler strip on or off entirely. Horiz. Side — when the horizontal ruler is on, choose whether it sits at the top or bottom of the frame. Vert. Ruler — turns the vertical ruler strip on or off entirely. Vert. Side — when the vertical ruler is on, choose whether it sits on the left or right side of the frame. Potential Use Cases: UI/UX or graphic designer portfolio — Could be used as a landing page element to add a subtle "WOW" factor. Design educator or course creator — if you're teaching design tools or any sort of visual principles, having this on your site immediately establishes some context. Creative agency or design studio — These types of businesses are always pushing the envelope of interactivity on their site, and this turns a normal webpage into something like a working environment. Support: If you ever run into any issues with this component, text me at 478-334-8505, and we'll get it resolved as quick as possible (:

Interactive Illustrator Guides