Figma Shape Tools: Your Design Building Blocks

WHY IT EXISTS Shape tools provide the basic geometric primitives required to build any visual interface. Without a simple way to create rectangles, circles, and lines, designers would have to draw every single element manually with a pen tool, which is inefficient for standard UI components.

THE MENTAL MODEL Think of shapes as the atoms of your design. You combine and modify these simple elements—rectangles, ellipses, lines—to create more complex components like buttons, input fields, user avatars, and content cards. The vast majority of what you see on a screen starts as a basic shape.

HOW IT WORKS Access the shape tools from the main toolbar, or use keyboard shortcuts like R for Rectangle, L for Line, and O for Ellipse. Click and drag on the canvas to create a shape. Two keyboard modifiers are essential: hold Shift while dragging to constrain proportions (making a perfect square or circle), and hold Option (or Alt on Windows) to draw and resize the shape from its center point instead of its corner. For rectangles, you can drag the circular handles inside each corner to create rounded corners. For lines and arrows, adjust properties like color, weight, and style in the Stroke panel in the right sidebar.

WHEN TO USE IT Use shape tools for the vast majority of your UI construction. The Rectangle tool is for buttons, banners, and layout containers. The Ellipse tool is for avatars, radio buttons, and charts. The Line tool is for creating dividers and borders. The Polygon and Star tools are useful for badges or icons.

WHEN NOT TO USE IT For unique or complex organic shapes, like a custom illustration or a complex icon with many curves, the basic shape tools are too rigid. In these cases, switch to the Pen tool. The Pen tool lets you create your own custom vector networks, giving you precise control over every anchor point and curve.

ONE CANONICAL EXAMPLE To create a rounded button, first press R to select the Rectangle tool and draw a rectangle on the canvas. Then, locate the four circular handles inside the corners of the shape. Click and drag one of these handles towards the center to increase the corner radius, giving the button its rounded appearance. You can then adjust its color from the Fill panel.