In Framer X, we make a distinction between graphics and interactive tools. To use the Path tool or any Shapes, you will first need to head to the Drawing section in the Tools panel and select Graphic (or hit
G at any time). This Graphics tool acts as a container for all your visual artwork. Once you draw a Graphic container on the canvas, you’ll notice that your Drawing toolkit appears in the top left corner of your canvas.
To start using the Path tool, first use the Graphics tool to draw a container on the canvas. You’ll notice that a set of Drawing tools now appear in the top left corner, along with a Path tool. Our Path tool features everything that you want and need. When drawing icons, you’ll often rely on geometric shapes as the foundation of your glyph. The Path tool helps you along the way. While drawing or editing a path, we’ll suggest the calculated center point for you—so you can quickly find and snap to these points along your segment.
Our Path tool also helps you define diagonal lines because continuing along the exact angle of a previous segment is tricky. The tool does the hard work for you—once your cursor comes close enough, we’ll lock your angle for you, so you can draw perfectly aligned icons and illustrations.
Curve Bending uses synchronized anchor points to guide you closer to your desired curvature, allowing for more advanced illustration work. This is especially helpful if you’re departing from geometric shapes and moving toward freeform drawing. Click and drag any anchor point to bend and twist the path into more organic forms.
To find and use Shapes, first use the Graphics tool to draw a container on the canvas. A set of Drawing tools will now appear in the top left corner. Insert rectangles, ovals, polygons, and stars, then use them as a starting point for more advanced shapes. Shortcuts: Type
R for rectangle and
O for oval. Double-click to edit and customize completely, and use boolean operations to
Our boolean operations support functions to add, subtract, intersect, exclude and join shapes. This will let you create more complex shape with ease. When selecting a shape, you’ll find our Boolean Operations options at the top of the properties panel. Select two shapes, select an option and click again to toggle.