Frames, Shapes, and Basic Design Tools

# CHAPTER 3

Frames, Shapes, and Basic Design Tools #

1. Introduction #

If you are painting a masterpiece, you do not paint directly onto the wall of your studio; you paint onto a defined, rectangular canvas. In UI Design, we don't draw our apps directly on the infinite gray void; we draw them inside specific containers called Frames. A Frame represents the exact dimensions of the device you are designing for, whether it’s an iPhone 15, a MacBook Pro, or an Apple Watch. Once the Frame is established, we construct the user interface by combining simple geometric shapes. In this chapter, we will master the absolute foundation of UI construction. We will dissect the critical difference between Frames and Groups, utilize the shape tools to construct buttons and images, and employ Alignment tools to bring mathematical perfection to our layouts.

2. Learning Objectives #

By the end of this chapter, you will be able to:

• Define a "Frame" and select pre-built device sizes from the Properties panel.

• Explain the critical architectural difference between a Frame and a Group.

• Utilize the Rectangle, Ellipse, and Polygon tools to construct basic UI elements.

• Manipulate Corner Radius to create modern, soft UI aesthetics.

• Align and distribute multiple objects perfectly using the Alignment tools.

3. The Mighty Frame (F) #

A Frame is the absolute foundation of Figma. It is a container that holds your design.

1. 1. Press F on your keyboard (or click the hash # icon in the toolbar).

1. 2. Look at the Right Properties panel. Figma gives you a list of every modern device screen size!

1. 3. Click iPhone 15 Pro. A perfectly sized white rectangle appears on your canvas. This is your Frame.

*The Rule of Frames:* Everything you design for that specific mobile app *must* live inside that specific Frame. If you drag a button outside of the Frame, it will not show up when you present the prototype to a client!

4. Frames vs. Groups (Crucial Concept) #

Coming from Photoshop, beginners often use "Groups" (Ctrl + G) to hold elements together. In Figma, you should almost always use Frames (Ctrl + Alt + G). Why?

• A Group is just a shrink-wrap around objects. It has no physical boundaries. If you stretch a group, all the icons inside get distorted and stretched.

• A Frame is a physical container (like a cardboard box). It has its own properties (it can have a background color, it can clip content that spills out). If you stretch a Frame, the items inside do not distort; they behave responsively based on rules you set.

5. Drawing Shapes (R, O, L) #

Every complex interface you use daily is just a clever combination of basic shapes.

• Rectangle (R): Used for buttons, cards, navigation bars, and background panels.

• Ellipse/Circle (O): Used for user profile pictures, notification badges, and radio buttons. *(Pro Tip: Hold the Shift key while drawing an ellipse to force it to be a perfect circle!)*

• Line (L): Used for dividers separating content.

6. Corner Radius (Border Radius) #

In the early 2000s, all software had sharp, 90-degree square corners. Modern UI design relies heavily on soft, rounded corners because they are psychologically friendlier and easier on the eyes.

• Select a Rectangle.

• Look at the Right Properties panel. Find the tiny icon that looks like a curved corner.

• Type in 8 or 12. Your sharp box is now a modern, soft-edged UI card!

7. Alignment and Distribution #

Humans can instantly tell if a button is 2 pixels off-center. You should never align things "by eye." You must let the computer do the math.

1. 1. Select two or more objects (Hold Shift and click them).

1. 2. Look at the very top of the Right Properties panel. You will see icons with little lines and boxes.

• Align Center: Snaps objects perfectly to the middle of each other.

• Distribute Spacing: If you have 4 icons, selecting them and clicking this will ensure the empty space between each icon is mathematically identical.

8. Diagrams/Visual Suggestions #

*Visual Concept: The Anatomy of a UI Card* Provide a visual breakdown of a "User Profile Card" to prove it is just basic shapes.

• The Card Background = A white Rectangle with a 16px Corner Radius.

• The Profile Photo = A perfect Ellipse (Circle).

• The "Follow" Button = A small blue Rectangle with an 8px Corner Radius.

• The Separator = A thin, light gray Line.

This visual completely demystifies complex UI design, showing beginners that if they can draw a box and a circle, they can design modern interfaces.

9. Best Practices #

• Nest Frames Inside Frames: Frames are not just for the main iPhone screen. Professional designers use Frames to hold smaller components! For example, you draw a Frame for the iPhone. Inside that, you draw a smaller Frame for the "Navigation Bar". Inside the Navigation Bar frame, you draw an even smaller Frame to hold the "User Profile Icon." This container-within-a-container logic is exactly how web developers write HTML (<div> inside a <div>)!

10. Common Mistakes #

• Distorting Shapes: A beginner tries to draw a square profile picture, but it ends up looking like a slightly squished rectangle (104px wide by 98px tall). To fix this, always hold the Shift key while clicking and dragging to draw a shape. Holding Shift mathematically locks the aspect ratio, guaranteeing a perfect square or a perfect circle every single time.

11. Mini Project: Build a Modern App Header #

Let's combine everything we just learned.

1. 1. Press F, go to the Right panel, and click iPhone 15 Pro to create your device Frame.

1. 2. Press R to select the Rectangle tool. Draw a banner across the top of the iPhone frame.

1. 3. Look at the Right panel. Set the H (Height) to exactly 100. Set the Fill color to a nice blue.

1. 4. Press O for the Ellipse tool. Hold Shift and draw a perfect circle inside the blue banner to act as a user profile photo. Set its Fill to gray.

1. 5. Select the blue banner and the gray circle. Click the Align Vertical Centers icon at the top right of the properties panel.

1. 6. You have just designed a mathematically perfect, production-ready app header!

12. Practice Exercises #

1. 1. Draw a rectangle that is exactly 300px wide and 50px tall, and apply a 12px corner radius to it.

1. 2. Draw three circles of random sizes and random placements. Use the alignment tools to align them horizontally, and use the distribution tools to make the spacing between them perfectly equal.

13. MCQs with Answers #

14. Interview Questions #

• Q: Explain the fundamental difference between a Group and a Frame in Figma. If you are preparing a design to be handed off to a Frontend Web Developer, why is heavily utilizing Frames considered the best practice? *(Hint: Relate Frames to HTML div containers).*

• Q: A client complains that your UI design feels "harsh, dated, and aggressive." Without changing the colors or the text, what simple geometric property can you adjust on all the buttons and cards to instantly make the design feel more modern and friendly?

• Q: Describe your workflow for creating a row of five social media icons at the bottom of a mobile app. How do you guarantee the icons are perfectly centered and the spacing between them is identical without manually measuring the pixels?

15. FAQs #

Q: Can I put a Frame outside of another Frame? A: Yes! The infinite gray canvas is the ultimate background. You will typically have dozens of main device Frames (like "Login Screen," "Home Screen," "Settings Screen") sitting side-by-side directly on the gray canvas.

16. Summary #

In Chapter 3, we laid the architectural foundation of UI design. We established the absolute necessity of the Frame, realizing it is not just an artboard, but an intelligent container mimicking HTML <div> structures. We rejected the simple "Group" in favor of the Frame's powerful layout properties. We utilized basic geometry—Rectangles and Ellipses—to construct the building blocks of an interface, softening the harsh edges of the past utilizing the Corner Radius tool. Finally, we surrendered manual pixel-pushing to the algorithm, employing alignment and distribution tools to enforce mathematical perfection across our layouts.

17. Next Chapter Recommendation #

We have shapes, but currently, they are all boring gray boxes. We need to breathe life into the design. Proceed to Chapter 4: Working with Colors and Gradients.