By the end of this lesson you can
- Use frames as screens and containers.
- Create and style shapes, text and images.
- Use constraints so elements behave sensibly when a frame is resized.
The idea
Almost everything in Figma is built from a few basic objects.
Frames
A frame is a container. Top-level frames act as screens (choose a device preset such as a phone size). Frames can also be nested to group parts of a layout, such as a card or a header. Unlike groups, frames have their own size, fill, clipping and layout settings, so prefer frames for structure.
Shapes and text
Rectangles, ellipses and lines make up backgrounds, dividers and icons. Text layers can be auto width (grows with content), auto height (fixed width, grows downwards) or fixed. Use auto height for paragraphs so text wraps naturally.
Images
Images are fills on shapes or frames. Set them to fill (crop to cover), fit (show all) or crop. Use realistic images, and remember to write alt text when designs go to development.
Constraints
Constraints tell an element how to behave when its parent frame changes size: stick to the left, right, centre, or stretch. A header bar set to "Left and right" stretches with the screen; a close button set to "Right" stays in the corner. Constraints are a first step towards responsive designs (auto layout, covered next, goes further).
Why it matters in real projects
Understanding these building blocks makes everything else in Figma easier. Using frames instead of loose groups, and setting text and constraints correctly, means designs resize properly, handle real content and are easier for developers to understand. It is the difference between a picture of a screen and a working design.
A realistic example
A designer builds a phone sign-up screen using groups and fixed text boxes. When the team asks for a tablet version, every element has to be moved by hand, and a longer translated button label overflows.
Rebuilding with frames, auto-height text and constraints, the header stretches across, the logo stays centred and the button stretches with side margins. Resizing the screen frame now produces a sensible tablet layout in seconds, and long text wraps instead of overflowing.
Step by step
Create a screen frame
Press F and choose a phone preset.
Add a header frame
Draw a frame inside for the header and give it a fill.
Add text
Create a heading (auto width) and a paragraph (auto height with fixed width).
Add an image
Draw a rectangle, add an image fill and set it to fill.
Set constraints
Make the header stretch left and right; keep an icon pinned to the right.
Resize the screen
Drag the frame wider and check everything behaves.
Common mistakes
Mistake Using groups for layout.
Instead Use frames, which have their own size and layout settings.
Mistake Fixed-size text boxes for paragraphs.
Instead Use auto height so text wraps and grows.
Mistake Ignoring constraints.
Instead Set them so designs resize predictably.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 45 min
Resizable screen
Build a recipe detail screen that resizes from phone to tablet width.
Steps
- Build the screen with frames, text and an image.
- Set text to auto height where needed.
- Set constraints on every element.
- Resize to tablet width and fix anything that breaks.
Deliverable
A screen that resizes cleanly, with before and after resize screenshots.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Frames are containers and screens.
- Shapes, text and image fills build the content.
- Choose text sizing to fit the content.
- Constraints control behaviour when frames resize.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
Your notes
Marking complete updates your course and roadmap progress.