Basic Shapes in Figma

Rectangles are one of the most fundamental shapes used in design. To create a rectangle in Figma, select the rectangle tool under the Shape tool in the bottom toolbar (or press R on your keyboard), then click and drag on the canvas to draw the shape. Once drawn, you can resize the rectangle by clicking and dragging its edges or corners.

Rectangles are incredibly versatile and can be used for various design elements like buttons, headers, background panels, and more. You can customize them by changing their color, adding a border, adjusting the corner radius for rounded edges, or applying shadows for depth using the Design panel.

Furthermore, rectangles can serve as containers for other design elements or be used in creating complex shapes by combining, subtracting, or using them as masks.

Lines are useful for a variety of purposes in design. They can be used to create borders, dividers, or to underline text. Lines are also essential for creating custom shapes or icons and can be used as connectors in flowcharts or diagrams.

To use it in Figma, select the Line tool from under the Shape tool in the bottom toolbar (shortcut L) and click and drag on the canvas to draw a line. You can create a perfectly horizontal or vertical line by holding the Shift key while dragging. You can also customize your lines by adjusting their thickness (stroke), color, and style (solid, dashed, or dotted) in the Design panel.

To create a circle or ellipse in Figma, select the ellipse tool from under the Shape tool in the toolbar (keyboard shortcut O) and click and drag on the canvas. For a perfect circle, hold the Shift key while dragging. Resizing is is performed by clicking and dragging the edges to adjust the ellipse or the corners for a circle, while holding Shift to maintain its proportion.

Circles and ellipses are ideal for creating buttons, icons, profile images, and decorative elements. You can customize their color, and border, and add effects like shadows or gradients using the Design panel. They're also useful in creating complex shapes by combining with other elements or as clipping masks to fit images into circular or elliptical shapes.

The Arc tool in Figma lets you manipulate curved shapes and is useful for creating pie charts, progress bars, custom loader animations, or simply adding a unique curved element to your design.

To use it, first draw a circle or an ellipse using the Ellipse tool. Once drawn, hover over the shape, and you'll see a handle appear on its right-hand side, starting at the point marked as 0. This handle controls the arc. To create an arc, click and drag this handle around the circle. The distance you drag the handle determines the extent of the arc. You can create anything from a small curve to a semi-circle, or even a near-complete circle.

Once you do this, two more handles will appear. Using the start handle (which has a dot inside it), you can decide where the arc begins, and using the ratio handle, you can change the circle to a ring.

Arrows are line shapes with added directional end caps, useful for indicating movement or direction. They are commonly used in UI designs, flowcharts, and presentations to guide the viewer's attention or to show the flow of processes and actions. They are great for creating directional cues in navigation menus, demonstrating relationships between different elements, or simply adding a visual guide to your design.

To create an arrow in Figma, select the Arrow tool from the Shape tool in the bottom toolbar or press keyboard shortcut Shift L, and click and drag on the canvas to draw a line. You can add arrowheads at both ends of the line in the stroke settings in the Design panel. Here, you can also customize arrows by changing their color, thickness, style (like solid, dashed, or dotted), and the type of arrowhead.

A polygon is any shape with multiple straight sides and can be used for various design elements like icons, graphic patterns, or as part of a larger illustration. In Figma, you can create a polygon by selecting the Polygon tool from the Shape tool in the bottom toolbar. Once selected, click and drag on the canvas to draw it.

You can easily change the number of polygon sides in the Design panel input by typing in a number or using the ↑ or ↓ keys in the Appearance block. Or, you could manipulate the small, round count handle next to the shape to create triangles, hexagons, octagons, and more. You can also customize polygons by changing their color, adding a border, or applying effects like shadows.

To resize a polygon in Figma, use the handles on the blue bounding box surrounding it. Enter Edit mode by clicking the polygon to add or manipulate points and round corners by dragging the radius handle.

Stars are great for icons, badges, and decorative elements in designs. You can even combine stars with other shapes or use them as part of a larger design, making them a fun and dynamic tool in your Figma toolkit. To create a star, select the Star tool from under the Shape tool in the bottom toolbar. Click and drag on the canvas to draw your star.

You can manipulate a star using 3 handles that appear after you double-click the shape:

• Count (Number of points on the star ranging between 3-60)
• Ratio (Distance of inner points from the center, as a percentage of diameter)
• Radius (Rounds the points, like corner radius on rectangles)

You can also customize the star’s appearance by changing its color, adding a border, adjusting the corner radius for rounded edges, or applying shadows for depth using the Design panel.

Adjusting the corner radius softens the edges of shapes, creating a more visually appealing and modern aesthetic. It enhances user experience by conveying a friendlier and more approachable interface, often used to improve readability and comfort in digital environments.

To adjust the corner radius of basic shapes in Figma, select your shape and look for the corner radius option in the Design panel on the right side. You can directly input a value to uniformly round the corners or click on the independent corners icon to adjust each corner separately by entering values.

To manually adjust the radius, you can simply manipulate the small circular radius handle that appears over the shape.