Figma Frames and Shapes

Frames and shapes are the building blocks of every design in Figma. A frame acts as a container — like a screen or a card. Shapes like rectangles and circles fill that container with visual elements.

What Is a Frame?

A frame is a special container in Figma. It represents the boundary of a screen, a section, or a component. Every mobile app screen, website page, or UI card you design lives inside a frame.

Frame vs. Group Diagram

  FRAME                        GROUP
  +----------------------------+    +----------------------------+
  | [Fixed boundary]           |    | [No fixed boundary]        |
  | Children clip to edges     |    | Resizes to fit children    |
  | Has background color       |    | No background color        |
  | Can scroll in prototypes   |    | Cannot scroll              |
  +----------------------------+    +----------------------------+

Use a frame when you design a screen or a card. Use a group when you simply want to move multiple objects together without creating a defined container.

Creating a Frame

1. Press F to activate the Frame tool.
2. Click and drag on the canvas to draw a custom frame, OR select a preset from the right panel.

Common Frame Presets

Nested Frames

You can place a frame inside another frame. This is called nesting. A common example is placing a "card" frame inside a "screen" frame.

Nested Frame Diagram

  Phone Screen Frame (390 × 844)
  +------------------------------------------+
  |                                          |
  |   Card Frame (350 × 120)                 |
  |   +------------------------------------+ |
  |   |  Product Image | Product Name      | |
  |   |  $29.99        | Add to Cart btn   | |
  |   +------------------------------------+ |
  |                                          |
  |   Card Frame (350 × 120)                 |
  |   +------------------------------------+ |
  |   |  Product Image | Product Name      | |
  |   +------------------------------------+ |
  +------------------------------------------+

Basic Shapes in Figma

Figma provides six basic shape tools. Each has a keyboard shortcut for fast access.

Drawing and Editing Shapes

Drawing a Shape

1. Press the shortcut key (e.g., R for rectangle).
2. Click and drag on the canvas to draw the shape.
3. Hold Shift while dragging to make a perfect square or circle.

Resizing a Shape

Select a shape. You see eight handles around it — one on each corner and one on each side. Drag any handle to resize. Hold Shift while dragging a corner handle to resize proportionally (keeping the same width-to-height ratio).

Resize Handles Diagram

  o-------o-------o
  |               |
  o   Rectangle   o
  |               |
  o-------o-------o

  o = drag handle

Corner Radius (Rounded Corners)

A corner radius makes the sharp corners of a rectangle round. Buttons in most modern apps use rounded corners.

Select a rectangle. In the Design Panel on the right, look for the Corner Radius field (it looks like a rounded square icon). Type a number:

• 0 = Sharp corners
• 8 = Slightly rounded (common for cards)
• 100 = Fully rounded (pill-shaped button)

Corner Radius Comparison

  Radius = 0        Radius = 8        Radius = 100
  +--------+       /--------\       (          )
  |        |      |          |      (  Button  )
  +--------+       \--------/       (          )

Using the Pen Tool for Custom Shapes

The Pen Tool (P) lets you draw shapes with custom paths. Each click creates an anchor point. Connect the last point to the first to close the shape.

Pen Tool Example — Drawing an Arrow

  Click point 1    Click point 2    Click point 3
       *-----------*
                    \
                     * (point 3)
                    /
               *---* (points 4, 5 for arrowhead)

Double-click an anchor point to curve the line from that point. This creates smooth, curved shapes.

Boolean Operations

Boolean operations combine two or more shapes into a single shape. Select two overlapping shapes, then choose an operation from the top toolbar.

Boolean Operation Diagram

  Shape A   Shape B       Result

   [  ] + [  ] = Union:      [    ] (merged into one)
   [  ] + [  ] = Subtract:   [( ] (B cut from A)
   [  ] + [  ] = Intersect:  [ ] (only overlapping area)
   [  ] + [  ] = Exclude:    [( )] (everything except overlap)

Real-World Boolean Example

To create a doughnut shape, draw a large circle. Draw a smaller circle on top. Select both, then choose Subtract. The smaller circle cuts a hole in the larger circle, creating the doughnut.

Clip Content

Frames have a Clip Content option in the Design Panel. When this is on, any part of a child object that goes outside the frame boundary becomes invisible — it gets "clipped." This is useful for creating image cards where a photo must stay inside the card's boundary.

Frame Background Color

Select a frame. In the Design Panel, look for the Fill section. Click the color swatch to change the frame's background color. A white frame background is the default, but you can use any color, gradient, or image.

Quick Practice Exercise

Build a simple app card in Figma:

1. Press F and draw a frame that is 360 × 200 pixels.
2. Set the corner radius to 16.
3. Add a fill color of your choice.
4. Press R and draw a rectangle inside the frame for an image placeholder. Set its fill to a grey color.
5. Press O and draw a small circle on the right side of the card for a profile picture.

You now have a basic card structure built entirely from frames and shapes.