How to Draw a Line in Framer

George Apostolov
Updated 05 Oct 2026
- ▣ Framer

How to Draw a Line in Framer: step-by-step guide

First, open your Framer project and access the canvas where you want to draw your line.
For more advanced line creation, try using the 'Vector' tool, which gives you pixel-perfect control over your shapes.
Select 'Path' from the toolbar to create custom shapes with more refined control over your lines.
Click once on the canvas to set your starting point, then move your cursor and click again to establish the endpoint of your line.
Voilà! You've just created a straight line in Framer. You can now adjust its properties in the right panel.

Quick answer: To draw a line in Framer, open your project canvas, use the Vector tool and select Path from the toolbar. Click once on the canvas for the starting point, move your cursor, and click again for the endpoint. Finally, adjust your line properties in the right panel.

About this Framer tutorial

Create custom straight lines and shapes in Framer using the Vector and Path tools for pixel-perfect control on your project canvas. This guide shows how to draw a Line in Framer in 5 steps, starting with "First, open your Framer project and access the canvas where you want to draw your line" and finishing with "Voilà! You've just created a straight line in Framer. You can now adjust its properties...". The interactive demo above is a click-through copy of the real Framer interface, so you can rehearse each step before doing it in your own account.