How to work with basic shapes on Figma

beginner 8 min read Updated 2026-03-18

Quick Answer

Working with basic shapes in Figma involves using the shape tools in the toolbar, drawing shapes on the canvas, and customizing their properties through fill, stroke, and effects panels. You can create rectangles, ellipses, polygons, and stars, then modify their appearance and behavior using the right sidebar properties.

Try Figma Full Figma Review

Prerequisites

Basic computer navigation skills
Figma account (free or paid)
Understanding of design canvas basics
Familiarity with clicking and dragging

Step-by-Step Instructions

Access the Shape Tools

Open your Figma file and locate the toolbar on the left side of the screen. Click on the Rectangle tool (shortcut R) or press and hold to see other shape options including Ellipse (O), Polygon, Star, and Line (L). You can also access these tools from the main menu under Tools.

Use keyboard shortcuts for faster access to frequently used shape tools.

Draw Your Shape

With your chosen shape tool selected, click and drag on the canvas to create the shape. For rectangles and ellipses, drag from one corner to the opposite corner. Hold Shift while dragging to maintain equal proportions (perfect squares or circles). Hold Alt/Option while dragging to draw from the center outward instead of corner to corner.

Double-click with a shape tool selected to create a default-sized shape at that location.

Adjust Shape Properties

With your shape selected, use the Properties panel on the right sidebar to modify basic attributes. Adjust the Width (W) and Height (H) values for precise sizing. Use the X and Y coordinates to position the shape exactly. For rectangles, modify the Corner radius to create rounded corners by entering a value or dragging the corner handles.

Lock the aspect ratio by clicking the chain icon between width and height values.

Customize Fill and Stroke

In the Fill section of the properties panel, click the color swatch to open the color picker and choose your desired fill color. You can also apply gradients, images, or remove the fill entirely. Add a Stroke by clicking the + icon next to Stroke, then customize the stroke color, width, and style (solid, dashed, or dotted).

Use the eyedropper tool in the color picker to sample colors from other elements in your design.

Apply Effects and Styling

Enhance your shapes using the Effects section in the properties panel. Add Drop shadows by clicking the + next to Effects and selecting Drop shadow. Adjust the shadow's blur, spread, offset, and color. You can also add Inner shadows, Layer blur, or Background blur effects for more advanced styling.

Multiple effects can be applied to a single shape - experiment with combining different effects.

Transform and Duplicate Shapes

Select your shape and use the transform handles around it to resize by dragging the corner or edge handles. Hold Shift while resizing to maintain proportions. Rotate the shape by hovering near a corner until you see the rotation cursor, then drag. Duplicate shapes by selecting them and pressing Ctrl/Cmd + D or Alt/Option + drag to create copies.

Use Ctrl/Cmd + R to rotate a shape by a specific angle value for precise rotation.

Organize and Layer Shapes

Use the Layers panel on the left to organize your shapes. Rename shapes by double-clicking their names in the layers panel. Change the stacking order by dragging layers up or down, or use Ctrl/Cmd + ] to bring forward and Ctrl/Cmd + [ to send backward. Group related shapes by selecting multiple shapes and pressing Ctrl/Cmd + G.

Lock shapes you don't want to accidentally move by clicking the lock icon in the layers panel.

Common Issues & Troubleshooting

Shape appears distorted when resizing

Hold Shift while dragging the corner handles to maintain the original proportions, or enable the Constrain proportions option in the properties panel.

Can't see the shape I just created

Check if the shape has a transparent fill by looking at the Fill section in properties panel. Add a fill color or stroke to make the shape visible. Also verify it's not behind other objects in the layers panel.

Shape tool is not responding when clicking

Make sure you have the correct shape tool selected from the toolbar. If the tool is active but not working, try pressing Esc to clear any active selections, then reselect your shape tool and try again.

Unable to modify corner radius on rectangle

Ensure you have selected the rectangle shape (not a group or other object type). The corner radius controls appear in the properties panel only for rectangles and can also be adjusted by dragging the small circular handles that appear on the selected rectangle.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Figma website before purchasing.

Visit Figma View Figma Pricing