Frames, shapes and layers

Everything you design in Figma sits inside frames. A frame is like an artboard or a screen: a container with its own size, background and clipping. Shapes are the basic visual building blocks you place inside frames.

Creating a phone frame

Press F to select the frame tool. The right sidebar shows a list of preset sizes. Under Phone, choose a current model such as iPhone 16 (393 by 852 points). A frame appears on the canvas with its name above it. Double click the name and rename it "Sign in".

Frames can contain other frames. A card inside a screen is often its own frame, which lets it have padding, rounded corners and later auto layout.

Adding shapes

Inside the frame, draw a rectangle with R. In the properties panel you can set:

• Position and size: X, Y, width and height. Type exact numbers rather than dragging for clean layouts.
• Corner radius: rounds the corners. Try 12.
• Fill: the colour inside the shape.
• Stroke: an outline, with its own colour and weight.

Hold Shift while drawing to get a perfect square or circle. Hold Alt or Option while dragging an object to duplicate it.

Understanding layers

Every object appears in the layers panel on the left. Layers higher in the list sit on top visually. You can drag them to reorder, click the eye icon to hide them and the lock icon to stop accidental edits.

Name your layers as you go. "Rectangle 14" means nothing to a teammate, while "Search bar" does. Double click a layer name to rename it.

Groups versus frames

You can group objects with Ctrl or Cmd + G. Groups are simple bundles with no properties of their own. Frames do more: they have fill, corner radius, clipping and layout options. A good rule for beginners is to use frames for anything that behaves like a container, such as a card or a button, and groups only for quick temporary bundles.

Try it

Inside the "Sign in" frame, create a rounded rectangle 345 wide and 52 tall for an input field, then duplicate it below for a second field. Rename both layers. You now have the start of your first screen.