How to Use the Rectangle Tool in Figma

The Rectangle Tool is one of the most essential and versatile tools in Figma. Whether you’re sketching out a button, building wireframes, or laying the foundation for more complex UI elements, rectangles are a go-to building block. In this guide, we’ll walk you through everything you need to know to use the Rectangle Tool like a pro—from basics to styling and smart tricks.

1. Where to Find the Rectangle Tool

To access the Rectangle Tool in Figma, you have several options:

Toolbar Access:
Click the ‘Rectangle’ icon (a square shape) from the toolbar at the top of your Figma interface.
Keyboard Shortcut:
Simply press R on your keyboard to activate the Rectangle Tool instantly.
Dropdown Menu:
Go to the top menu and choose:
Insert → Shape → Rectangle.

2. Drawing a Rectangle

Once you’ve selected the tool, here’s how to draw:

Click + Drag:
Click anywhere on the canvas and drag to create a rectangle of any size.
Hold Shift:
Want to draw a perfect square? Hold down the Shift key while dragging.
Numerical Precision:
After drawing, you can adjust width (W) and height (H) in the properties panel on the right.

3. Editing Your Rectangle

After placing your rectangle, you can customize it:

📏 Resize

Use the bounding box handles to resize.
Hold Shift to constrain proportions.
Hold Option (Mac) or Alt (Windows) to resize from center.

🎨 Change Fill Color

Go to the right-hand panel under “Fill”.
Click the color swatch to pick a new color or paste a hex code.

🧭 Positioning

Set X and Y values to position your rectangle precisely on the canvas.

4. Styling Rectangles

The Rectangle Tool allows for advanced styling:

🖼 Border Radius

Use the corner radius input to round corners.
Click the Independent Corners icon to set different radii per corner.

🖌 Stroke and Effects

Add strokes, shadows, or blur effects from the “Stroke” and “Effects” sections.

🎯 Constraints

Set constraints so your rectangle resizes responsively with its frame or artboard.

5. Using Rectangles in UI Design

Rectangles are incredibly flexible:

Buttons: Add text and adjust corner radius.
Cards: Use with drop shadows and padding.
Layout Blocks: Define grid areas, sidebars, headers, etc.

Group rectangles with other objects or use them as backgrounds, masks, or containers.

6. Converting to Components

If you use a rectangle repeatedly (like a button shape or container), convert it into a Component:

Right-click the rectangle → Create Component (or press Cmd/Ctrl + Option/Alt + K).

This lets you reuse and maintain consistent design throughout your file.

7. Pro Tips

Combine Shapes: Use Boolean operations (Union, Subtract, etc.) to merge rectangles with other shapes.
Use Auto Layout: Turn a rectangle into a frame and apply Auto Layout to create resizable components.
Snap to Grid: Use smart guides or enable a grid for pixel-perfect placement.

Final Thoughts

The Rectangle Tool in Figma is more than just drawing boxes—it’s a foundation for professional design. Mastering its features helps you build clean, responsive, and reusable UI elements faster. Whether you’re a beginner or a seasoned designer, take the time to explore all it can do.