Rectangle and ellipse tools in Figma - Deep Dive

Overview - Rectangle and ellipse tools

What is it?

Rectangle and ellipse tools in Figma are simple drawing tools that let you create basic shapes like rectangles, squares, circles, and ovals. These shapes are the building blocks for designing user interfaces, charts, and diagrams. You can adjust their size, color, border, and other properties easily. They help you visually organize and present data or ideas clearly.

Why it matters

Without rectangle and ellipse tools, creating clear and structured visuals would be much harder and slower. These shapes help break down complex information into simple, understandable parts. They make dashboards, reports, and presentations more attractive and easier to read. This improves communication and decision-making in business.

Where it fits

Before learning these tools, you should know basic Figma navigation and how to select and move objects. After mastering rectangles and ellipses, you can learn about combining shapes, using vector tools, and creating complex charts or icons.

Mental Model

Core Idea

Rectangle and ellipse tools let you create simple shapes that form the foundation of visual designs and data presentations.

Think of it like...

Using rectangle and ellipse tools is like cutting out paper shapes to build a collage; each shape is a piece that fits into the bigger picture.

┌───────────────┐
│ Rectangle Tool │───▶ Draws squares and rectangles
│ Ellipse Tool   │───▶ Draws circles and ovals
└───────────────┘
        │
        ▼
┌─────────────────────────────┐
│ Shapes can be resized, colored,│
│ and styled to build visuals.  │
└─────────────────────────────┘

Build-Up - 6 Steps

1

Foundation

Accessing shape tools in Figma

Concept: Learn how to find and select the rectangle and ellipse tools in Figma's interface.

In Figma, look at the top toolbar or press the shortcut keys: 'R' for rectangle and 'O' for ellipse. Click the tool icon or press the key to activate it. Then click and drag on the canvas to draw the shape.

Result

You create a new rectangle or ellipse shape on your canvas.

Knowing how to quickly access these tools speeds up your design workflow and lets you start creating visuals immediately.

2

Foundation

Drawing and resizing shapes

Concept: Understand how to draw shapes and adjust their size and proportions.

Click and drag to draw a rectangle or ellipse. Hold Shift while dragging to keep the shape perfectly square or circular. After drawing, use the handles around the shape to resize it freely or proportionally with Shift.

Result

You can create exact squares or circles and adjust shapes to fit your design needs.

Mastering shape proportions helps maintain visual balance and consistency in your designs.

3

Intermediate

Customizing shape appearance

Concept: Learn to change fill color, stroke, and corner radius for rectangles and ellipses.

Select a shape, then use the right sidebar to pick fill colors or gradients. Add or remove strokes (borders), change their thickness and color. For rectangles, adjust corner radius to make rounded corners. Ellipses can have strokes but no corners.

Result

Shapes become visually distinct and match your design style or data visualization needs.

Customizing appearance turns simple shapes into meaningful visual elements that guide viewer attention.

4

Intermediate

Using shapes to build charts and icons

🤔Before reading on: Do you think rectangles and ellipses can be combined to create complex visuals like bar charts or buttons? Commit to your answer.

Concept: Combine multiple shapes to create common UI elements and data visuals.

Stack rectangles side by side to form bar charts. Use ellipses for buttons or data points. Group shapes to move or style them together. Adjust sizes to represent data values visually.

Result

You create simple charts and interface elements that communicate information clearly.

Understanding how basic shapes combine to form complex visuals is key to effective data presentation.

5

Advanced

Converting shapes to vectors for customization

🤔Before reading on: Can you edit the individual points of a rectangle or ellipse directly in Figma? Commit to yes or no.

Concept: Convert shapes to vector paths to edit their points and create custom shapes.

Right-click a shape and choose 'Outline Stroke' or 'Vectorize Shape'. This turns the shape into editable points. You can then move points, add curves, or reshape it beyond basic rectangles or ellipses.

Result

You gain full control over shape geometry for advanced custom designs.

Knowing when and how to vectorize shapes unlocks creative freedom beyond standard tools.

6

Expert

Optimizing shape use for performance and clarity

🤔Before reading on: Do you think using many complex shapes slows down Figma files significantly? Commit to yes or no.

Concept: Learn best practices to keep designs efficient and clear using shapes.

Use simple shapes instead of many small vector points when possible. Group and name shapes logically. Avoid unnecessary effects or masks on basic shapes. This keeps files fast and easy to edit, especially in large BI dashboards.

Result

Your Figma files remain responsive and your visuals stay clear and maintainable.

Understanding performance impacts helps you build scalable and professional BI dashboards.

Under the Hood

Figma stores rectangles and ellipses as shape objects with properties like position, size, fill, stroke, and corner radius. When you draw a shape, Figma creates a vector object with mathematical definitions for curves and lines. This allows smooth scaling and editing without losing quality. The rendering engine converts these vectors into pixels on your screen.

Why designed this way?

Shapes are basic building blocks in design, so Figma uses vector math to keep them flexible and precise. This approach supports infinite scaling and easy styling. Alternatives like raster images would lose quality when resized. Vector shapes also allow easy combination and editing, which is essential for UI and BI design.

┌───────────────┐
│ User draws    │
│ rectangle or  │
│ ellipse tool  │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Figma creates │
│ vector shape  │
│ object with   │
│ properties    │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Rendering    │
│ engine draws │
│ pixels on    │
│ screen       │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does holding Shift always create a perfect square or circle regardless of tool? Commit yes or no.

Common Belief: Holding Shift while drawing any shape always locks perfect proportions.

Reality: Holding Shift locks proportions only for rectangles and ellipses, but not for other shapes or when resizing after drawing.

Why it matters: Assuming Shift always locks proportions can lead to distorted shapes and inconsistent designs.

Quick: Can you edit the corner radius of an ellipse? Commit yes or no.

Common Belief: You can round the corners of any shape, including ellipses.

Reality: Ellipses are already curved and do not have corners, so corner radius does not apply.

Why it matters: Trying to adjust corner radius on ellipses wastes time and causes confusion.

Quick: Does converting a shape to vector always keep it editable as a shape? Commit yes or no.

Common Belief: Vectorizing a shape keeps it as a simple shape object you can resize easily.

Reality: Vectorizing converts the shape into points and paths, losing shape-specific controls like corner radius.

Why it matters: Not knowing this can cause frustration when you lose easy shape editing after vectorizing.

Quick: Does using many shapes in a Figma file always slow it down? Commit yes or no.

Common Belief: More shapes always make Figma slow and laggy.

Reality: Performance depends on complexity, effects, and file size, not just shape count.

Why it matters: Avoiding shapes unnecessarily limits design creativity and clarity.

Expert Zone

1

Rounded corners on rectangles can be individually adjusted per corner for subtle design effects.

2

Ellipses can be stretched non-proportionally to create ovals, which are useful for highlighting or buttons.

3

Grouping shapes and using components improves reusability and consistency in large BI dashboards.

When NOT to use

Avoid using rectangles and ellipses when you need highly custom or irregular shapes; use the pen or vector tools instead. For complex charts, consider specialized BI chart plugins or tools that automate data visualization.

Production Patterns

Professionals use rectangles and ellipses as base layers for buttons, cards, and data points. They combine these shapes with text and icons to build interactive dashboards. Grouping and naming shapes carefully helps teams collaborate efficiently.

Connections

Vector graphics

Rectangle and ellipse tools are basic vector shapes used in vector graphics.

Understanding vector shapes helps grasp how digital images scale without losing quality.

Data visualization

Rectangles and ellipses form the visual elements of charts like bar charts and scatter plots.

Knowing how shapes represent data points improves your ability to design clear and effective dashboards.

Geometry

Rectangles and ellipses are geometric shapes with mathematical properties.

Recognizing their geometric rules helps in precise sizing and alignment in design.

Common Pitfalls

#1 Drawing shapes without holding Shift leads to uneven squares or circles.

Wrong approach:

Draw rectangle or ellipse by clicking and dragging freely without Shift.

Correct approach:

Hold Shift while dragging to keep proportions perfect.

Root cause:

Not knowing the Shift key locks proportions causes inconsistent shapes.

#2 Trying to edit ellipse corners like rectangles causes confusion.

Wrong approach:

Select ellipse and try to adjust corner radius property.

Correct approach:

Understand ellipses have no corners; use size and stroke adjustments instead.

Root cause:

Misunderstanding shape properties leads to wasted effort.

#3 Vectorizing shapes too early loses easy shape controls.

Wrong approach:

Convert rectangle to vector before finalizing size or corner radius.

Correct approach:

Finalize shape properties first, then vectorize if needed for custom edits.

Root cause:

Not knowing vectorizing removes shape-specific editing causes frustration.

Key Takeaways

Rectangle and ellipse tools create simple shapes that are the foundation of visual design in Figma.

Holding Shift while drawing keeps shapes perfectly square or circular, ensuring consistency.

Customizing fills, strokes, and corner radius turns basic shapes into meaningful design elements.

Converting shapes to vectors unlocks advanced editing but removes easy shape controls.

Efficient use of shapes improves both design clarity and file performance in business intelligence dashboards.

Practice

1.

What happens if you hold the Shift key while drawing a rectangle in Figma?

easy

A. It locks the rectangle size to a fixed width.

B. It creates a rectangle with rounded corners.

C. It changes the rectangle color automatically.

D. It creates a perfect square.

Solution

1. Step 1: Understand the Shift key function in shape drawing

   Holding Shift while drawing a rectangle constrains the proportions to equal width and height.

2. Step 2: Apply this to rectangle shape

   This means the rectangle becomes a perfect square when Shift is held.

3. Final Answer:

   It creates a perfect square. -> Option D

4. Quick Check:

   Shift + draw rectangle = square [OK]

Hint: Hold Shift to keep width and height equal [OK]

Common Mistakes:

• Thinking Shift rounds corners
• Assuming Shift locks size
• Believing Shift changes color

2.

Which of the following is the correct way to draw a perfect circle using the ellipse tool in Figma?

easy

A. Click and drag without holding any key.

B. Click and drag while holding the Shift key.

C. Click and drag while holding the Alt key.

D. Double-click the ellipse tool icon.

Solution

1. Step 1: Recall ellipse tool behavior

   Dragging normally creates an ellipse with free width and height.

2. Step 2: Effect of holding Shift key

   Holding Shift while dragging constrains the ellipse to equal width and height, making a perfect circle.

3. Final Answer:

   Click and drag while holding the Shift key. -> Option B

4. Quick Check:

   Shift + drag ellipse = circle [OK]

Hint: Hold Shift while dragging ellipse for circle [OK]

Common Mistakes:

• Not holding Shift and getting oval
• Using Alt instead of Shift
• Thinking double-click draws circle

3.

Consider you draw a rectangle of width 200px and height 100px, then you hold Shift and drag a corner to resize. What will be the new shape?

medium

A. A circle with diameter equal to the smaller side.

B. A rectangle with width and height resized independently.

C. A perfect square with equal width and height.

D. An ellipse with width and height equal.

Solution

1. Step 1: Understand Shift key effect on resizing

   Holding Shift while resizing a rectangle constrains proportions, keeping width and height equal.

2. Step 2: Apply to initial rectangle

   Starting from 200x100, resizing with Shift will make width and height equal, forming a square.

3. Final Answer:

   A perfect square with equal width and height. -> Option C

4. Quick Check:

   Shift + resize rectangle = square [OK]

Hint: Shift locks aspect ratio to keep shape square [OK]

Common Mistakes:

• Thinking width and height resize separately
• Confusing rectangle with ellipse
• Assuming shape becomes circle

4.

You tried to draw a perfect circle using the ellipse tool but ended up with an oval. What is the most likely mistake?

medium

A. You did not hold the Shift key while dragging.

B. You held the Alt key instead of Shift.

C. You double-clicked the ellipse tool instead of dragging.

D. You used the rectangle tool instead of ellipse.

Solution

1. Step 1: Identify how to draw a perfect circle

   Holding Shift while dragging the ellipse tool constrains width and height to be equal.

2. Step 2: Analyze the mistake

   Not holding Shift means free width and height, resulting in an oval shape.

3. Final Answer:

   You did not hold the Shift key while dragging. -> Option A

4. Quick Check:

   No Shift = oval, Shift = circle [OK]

Hint: Always hold Shift for perfect circles [OK]

Common Mistakes:

• Using Alt instead of Shift
• Double-clicking instead of dragging
• Confusing ellipse with rectangle tool

5.

You want to create a dashboard highlight using a perfect circle and a square of the same size side by side. You draw an ellipse and a rectangle. How do you ensure both shapes have exactly 150px sides?

hard

A. Hold Shift while drawing both shapes and set width and height to 150px.

B. Hold Shift while drawing both shapes and resize to 150px width only.

C. Draw both shapes freely and then set width to 150px manually.

D. Draw shapes without Shift and set width to 150px, height to 150px only for rectangle.

Solution

1. Step 1: Use Shift to constrain proportions

   Holding Shift while drawing ensures the ellipse becomes a perfect circle and rectangle becomes a square.

2. Step 2: Set both width and height to 150px

   Manually setting both width and height to 150px guarantees exact size for both shapes.

3. Final Answer:

   Hold Shift while drawing both shapes and set width and height to 150px. -> Option A

4. Quick Check:

   Shift + set width & height = perfect circle and square [OK]

Hint: Hold Shift and set both width and height to same value [OK]

Common Mistakes:

• Setting only width or height, causing shape distortion
• Not holding Shift and getting oval or rectangle
• Assuming resizing width alone is enough