Figma Fundamentals: Shapes, Text, and Basic Layout Control Inside Frames

Core Shape Tools for UX Layouts

Most UI screens are built from a small set of primitives: rectangles for containers and fields, lines for dividers, ellipses for avatars and status dots, and combined shapes for icons. In Figma, these shapes are vector objects, meaning you can resize them without losing quality and edit their properties precisely.

Rectangles (R): containers, inputs, buttons

• Corner radius: Use the radius field in the right panel to round corners consistently (e.g., 8 for inputs, 12 for buttons). You can also set different radii per corner by expanding the radius control.
• Fill and stroke: Use Fill for background color and Stroke for borders. For input fields, a common pattern is a light fill plus a 1px stroke.
• Resizing behavior: Rectangles can be set to fixed size or stretch within a parent frame (covered later in this chapter under responsive resizing).

Lines (L): dividers and separators

• Stroke weight: UI dividers are often 1px. If your divider looks blurry, check pixel snapping and alignment to whole pixels.
• Stroke caps: For icon-like lines, try round caps; for dividers, keep butt caps.

Ellipses (O): avatars, badges, radio buttons

• Perfect circles: Hold Shift while drawing or resizing to keep a perfect circle.
• Use cases: Avatar placeholders (e.g., 64×64), notification dots (e.g., 8×8), or radio button outlines (stroke only).

Boolean operations: building simple icons from shapes

Boolean operations combine shapes into a single vector result. This is useful for quick icons (eye, lock, plus, close) without importing assets.

• Union: merges shapes into one.
• Subtract: cuts the top shape out of the bottom shape.
• Intersect: keeps only overlapping area.
• Exclude: keeps non-overlapping parts.

Practical example: Create a “show password” eye slash.

1. Draw an ellipse (eye outline) and a smaller ellipse inside it.
2. Select both ellipses and use Subtract to create a hollow eye shape (or keep as separate strokes if you prefer).
3. Draw a diagonal line across and increase stroke weight to match icon style.
4. Select all and use Union if you want a single combined icon (optional).

Placing and Cropping Images

Images are commonly used for logos, avatars, and hero illustrations. In Figma, you can place images directly or use an image fill inside a shape for controlled cropping.

Method A: Place image directly

• Drag an image file onto the canvas, or use Place image.
• Resize with corner handles; hold Shift to preserve aspect ratio.

Method B: Image fill inside a shape (recommended for avatars)

1. Draw a rectangle or ellipse.
2. In the Fill section, change the fill type to Image.
3. Choose an image, then set the image mode: Fill (covers and crops), Fit (shows whole image), Crop (manual crop).
4. Double-click to reposition the crop area.

This approach keeps your layout consistent because the shape defines the visible area.

Continue in our app.

• Listen to the audio with the screen off.
• Earn a certificate upon completion.
• Over 5000 courses for you to explore!

Or continue reading below...

Download the app

Text Basics for UI: Styles, Alignment, and Line Height

UI text needs consistency. Instead of manually changing font size and weight each time, use text styles so headings, labels, and helper text remain uniform across screens.

Creating and using text styles

• Create text with the Text tool (T).
• Set font family, weight, size, and line height.
• Save as a style (e.g., Heading / 24, Body / 14, Caption / 12).
• Apply styles to new text layers to keep typography consistent.

Alignment: within the text box and within the layout

• Text alignment: left, center, right (affects how text sits inside its own box).
• Vertical alignment: useful when text boxes are taller than the text (e.g., centered labels).
• Layout alignment: use alignment tools to line text layers up with other objects (covered in the alignment section).

Line height and readability

Line height controls spacing between lines. For UI body text, a common starting point is 1.4–1.6× the font size (e.g., 14px text with 20–22px line height). For single-line labels, line height often matches the font size or is slightly larger.

Text resizing behavior (responsive text boxes)

Figma text layers can resize in different ways. Choosing the right mode prevents layout issues when copy changes.

• Auto width: the text box expands horizontally as you type; good for short labels like button text.
• Auto height: fixed width, grows vertically; good for paragraphs and error messages.
• Fixed size: width and height stay fixed; text may overflow or wrap depending on settings; use carefully for UI.

Tip: For input labels and button text, start with Auto width. For helper/error text under fields, use Auto height with a defined width matching the field.

Basic Layout Control: Align, Distribute, Smart Guides, and Pixel Snapping

Alignment tools

When multiple layers are selected, you can align them relative to each other. Common UI tasks include aligning icons to text baselines, centering a button label, and lining up input fields.

• Align left/right/top/bottom: makes edges match.
• Align horizontal/vertical centers: centers objects along an axis.

Distribution and consistent spacing

Distribution helps you keep equal gaps between items (e.g., evenly spaced form fields). Use it after selecting multiple layers in the order they appear.

• Distribute horizontally: equal gaps left-to-right.
• Distribute vertically: equal gaps top-to-bottom.

Smart guides and measurement

Smart guides appear as you move layers, showing alignment and spacing hints. Measurement overlays help you confirm exact distances.

• Drag an object near another to see alignment lines and spacing values.
• Hold Alt (Windows) or Option (Mac) to measure distance between objects without moving them.
• Use consistent spacing values (e.g., 8, 16, 24) to create a predictable rhythm.

Pixel snapping for crisp UI

Pixel snapping keeps edges aligned to whole pixels so strokes and text render sharply. This matters most for 1px strokes (dividers, borders) and small icons.

• Prefer whole-number X/Y positions for 1px lines and strokes.
• Check that stroke alignment (inside/center/outside) doesn’t create half-pixel edges.
• If something looks blurry, inspect its position and size for decimals.

Step-by-Step Build: A Simple Login Screen

You will build a clean login screen using rectangles, text, and precise alignment. The goal is not visual flair; it’s practicing tidy layout control and consistent spacing.

Target layout (structure)

• Logo (circle placeholder)
• Title: “Welcome back”
• Email label + input field
• Password label + input field + optional eye icon
• Primary button: “Log in”
• Secondary text link: “Forgot password?”

Step 1: Create a spacing plan

Pick a simple spacing scale and stick to it. Example:

Step 2: Add a logo placeholder (ellipse)

1. Draw an ellipse (e.g., 56×56).
2. Set Fill to a neutral color and remove stroke (or keep a 1px stroke).
3. Position it near the top, leaving 24px padding from the left edge and a comfortable top margin.

Step 3: Add the title text

1. Create a text layer: Welcome back.
2. Apply a heading style (e.g., 24px semibold) and set line height appropriately.
3. Align the left edge of the title with the left edge of the logo (select both and use Align left).
4. Use Alt/Option to measure the vertical gap; set it to 16–24px depending on your plan.

Step 4: Build the email label and input field (rectangles + text)

1. Create label text: Email (e.g., 12–14px medium).
2. Draw a rectangle for the input field (e.g., height 44–48px, radius 8).
3. Set the input fill (white or light gray) and add a 1px stroke.
4. Add placeholder text inside the field: name@example.com (lighter color).
5. Align label and field to the same left edge using alignment tools.
6. Set label-to-field spacing to 8px using measurement (Alt/Option).

Step 5: Duplicate for password and add an eye icon (boolean practice)

1. Duplicate the email label + field group to create the password section.
2. Change label to Password and placeholder to ••••••••.
3. Create a small eye icon using ellipses + boolean operations (or a simple circle + line if you’re practicing basics).
4. Place the icon inside the password field on the right side.
5. Align the icon vertically to the field’s center (select icon + field and use Align vertical centers).
6. Use measurement to keep right padding consistent (e.g., 16px from field edge).

Step 6: Create the primary button

1. Draw a rectangle (same width as inputs, height 44–48px, radius 12 or 8).
2. Set a strong fill color and remove stroke.
3. Add button text: Log in.
4. Center the text within the button: select text + button and use Align horizontal centers and Align vertical centers.
5. Set spacing between the password field and button (e.g., 16–24px).

Step 7: Add the “Forgot password?” link and align it cleanly

1. Create a text layer: Forgot password? (smaller size, link color).
2. Decide alignment: left-aligned with fields, or right-aligned to the field edge.
3. If right-aligned: select link text and the input field, then use Align right.
4. Measure the gap from the button (e.g., 16px).

Step 8: Verify spacing and crispness

• Select each vertical stack (label → field → next label → field → button) and confirm gaps match your spacing plan.
• Check that strokes (1px borders) sit on whole pixels; fix any X/Y decimals.
• Use smart guides while nudging elements to catch accidental misalignment.

Layer Hygiene Checklist (Prepare for Components Later)

Clean layers make future component work faster and reduce mistakes when prototyping.

Naming

• Name layers by role, not appearance: Input / Email, Input / Password, Button / Primary, Text / Link.
• Avoid names like Rectangle 12 or Group 5.

Grouping and structure

• Group related items: label + field + placeholder + icon as one unit (e.g., Field / Password).
• Keep groups shallow: don’t nest groups unnecessarily.
• Ensure each group contains only what it needs (no stray layers).

Ordering (layer stack)

• Place backgrounds below text and icons.
• Keep interactive elements above decorative shapes if they overlap.
• Within a field group: field background at the bottom, then placeholder text, then icons.

Consistency checks

• Same corner radius across similar elements (all inputs match, all buttons match).
• Same stroke weight and color for similar borders.
• Typography uses styles (labels, body, links) rather than one-off formatting.