Figma – Interface, frames, wireframe, and Auto Layout

Goal

Get to know the basic Figma interface and the role of layers, pages, and frames, then build a functional, low-detail wireframe, and use Auto Layout to arrange related elements. By the end of the exercise, the wireframe for homework 6 is ready.

The Figma interface and basic concepts

Figma is a design tool that runs in the browser and as a desktop application. The interface has three main parts:

• Left panel: this is where the pages (Pages) and the layers (Layers) are. Pages are the chapters of the file; layers are the elements of a page.
• Canvas: the infinite workspace on which you draw.
• Right panel (Design / Prototype): the properties of the selected element (size, color, text, layout).

A UI element is a usable building block of an interface, for example a button, field, label, or icon. A Figma file can be divided into pages. It is worth keeping separate pages for sketches, for more final screens, and for reusable elements. Within a page, a layer is every independent element: text, shape, image, or another container. Descriptive layer names (for example "Search label", "Submit button") help your own later work and your teammates' orientation.

A frame is a container that can represent a screen, a coherent part, or a component state. Always start a mobile screen in a frame, because this way the size can be set (for example Figma's preset phone sizes), its content can be managed, and it can later be connected to a prototype. A group only moves the elements together; it is not the same as a screen or a layout system. If an element is inside another, a parent–child relationship forms between them: the outer frame is the parent, the label or icon inside it is the child.

Auto Layout

Auto Layout is rule-based arrangement of elements within a frame. You can set:

• the direction: vertical or horizontal order;
• the spacing (gap) between elements and the padding between the frame and the content;
• the alignment: left, center, right;
• the sizing behavior: the element adapts to its content (Hug contents), fills the available space (Fill container), or is fixed size (Fixed).

This is especially important in an accessible interface: a longer label, a larger font size, or an error message should not cover other content, but the frame should grow with it. Auto Layout does not automatically fix a bad information hierarchy, but it helps to preserve a good structure consistently.

Task: the wireframe for homework 6

1. Preparation

1. Create a new Figma file, name it, and create pages: "Wireframe", "Notes".
2. Open a mobile-sized frame (for example from the preset sizes for iPhone), and name it according to the step of the flow (for example "01 – Event list").

2. Building from simple shapes

3. Draw rectangles and texts corresponding to the layers of the screen (title, cards, main button). Do not use color; at most three shades of gray.
4. Use real text on buttons, labels, and error messages.
5. Name the layers descriptively (for example "Event card", "Price", "Register button").

3. Auto Layout

6. Select a coherent group (for example the elements of the card), and add Auto Layout to it (select and add Auto Layout). Set the direction, the spacing, and the padding.
7. Try out the behavior: lengthen the title text; the frame should grow with it. Change the width to "Fill container", and see what happens.
8. Repeat on the card, then on the list: the list of cards should also be an Auto Layout, so that new cards are arranged automatically when added.

4. The screens and states of the flow

9. Make the 3–5 screens following the steps of the flow: list, event details, registration, confirmation.
10. Work out at least two states (for example an error in the form, an empty list), and name the frame accordingly.
11. Connect the screens according to the flow: put arrows or references next to them on the "Notes" page; we learn the clickable connection in the prototype lesson (chapter 7).
12. Make a larger-screen version of the main screen, to see what a responsive transformation means.

5. Annotations

13. Write an annotation for complex elements: an assumption or behavior ("Only free appointments can be selected").
14. Share the file with the instructor (view access is enough).

Checklist

• Every screen is in a frame, the layers have descriptive names.
• There is no final color, photo, or decorative icon.
• Related elements are in Auto Layout, and longer text does not break the layout.
• At least two critical states are worked out.
• Both the mobile and the larger-screen version are visible.

Learning resources

• Design your first button – Figma Learn
• Parent, child, and sibling relationships – Figma Learn
• Guide to auto layout – Figma Learn