Introduction to Figma and the Prototyping Workflow

Figma has rapidly become one of the most widely adopted tools in UI/UX design, and for good reason: it runs entirely in the browser, requires no installation, and keeps every collaborator working on the same live file simultaneously. Before diving into frames, components, or interactions, it pays to understand how the application is structured and how a well-organised file makes every subsequent stage of the design process smoother. This topic walks through the core areas of the Figma interface, explains how files and pages should be organised for a multi-screen project, unpacks the collaboration features that make Figma distinctive, and then maps out the four-stage workflow that this module follows — from a blank canvas all the way to a testable, shareable prototype.

Understanding the interface is not just about knowing where buttons live. Each panel in Figma has a specific role, and recognising which panel to reach for at any given moment keeps your workflow efficient and reduces the frustration of hunting for a setting that is hiding in plain sight.

The Left Panel: Layers, Pages, and Assets

The left panel is your primary navigation and structural hub. It operates across three tabs — Layers, Assets, and (when you have a file open) the page list at the very top of the panel.

• Layers tab: Every object you place on the canvas — a frame, a rectangle, a text node, an image, or a component instance — appears as an entry in the Layers panel. Objects are nested hierarchically: a frame contains groups, groups contain shapes and text, and so on. Renaming layers with descriptive labels (for example, Card / Product / Image rather than Rectangle 47) is one of the highest-return habits you can build early, because it makes selecting elements, reading the prototype flow, and handing off to developers dramatically easier.
• Assets tab: This tab surfaces all components available to you — both those defined within the current file and those published from connected team libraries. When you need to drop a button, an icon, or a navigation bar onto the canvas, you search for it here rather than copy-pasting from another frame. The Assets panel also shows local styles (colours, text styles, effects) that have been published for reuse.
• Pages list: Sitting above the Layers and Assets tabs is a compact list of every page in the file. Clicking a page name switches the canvas view entirely. Pages are described in more detail below, but it is worth noting here that the left panel is where you create, rename, reorder, and delete them.

The Canvas: Infinite and Multi-Page

The canvas is the central workspace — the large area where you actually place and arrange design elements. A few properties of the canvas are worth internalising from the start:

• The canvas is effectively infinite in all directions. You can zoom out with Ctrl/Cmd + Scroll or the zoom control in the top-right corner and keep placing frames far apart without hitting an edge. This makes it practical to lay out an entire user flow horizontally across one page, allowing you to read the journey at a glance.
• A single Figma file supports multiple pages. Each page has its own independent canvas, so you might dedicate one page to a mobile flow, another to a desktop variant, and a third to a component exploration or a style guide — all within one shareable URL.
• Zooming and panning are non-destructive. Pressing Shift + 1 fits the whole canvas in view; Shift + 2 zooms to a selected object. These keyboard shortcuts become second nature quickly.
• The canvas background colour can be changed in the right panel when nothing is selected, which is useful when you want dark frames to be distinguishable from the canvas itself.

The Right Properties Panel: Contextual Controls

The right panel is entirely context-sensitive — its contents change depending on what you have selected (or not selected) on the canvas. This is one of Figma's most elegant design decisions, because it surfaces only the controls relevant to your current task rather than overwhelming you with every possible setting at once.

• Nothing selected: The panel shows file-level settings — canvas background colour and prototype device settings (the device frame shown in presentation mode).
• A frame selected: You see dimensions, position (X/Y coordinates), corner radius, clipping behaviour, fill, stroke, effects (drop shadows, blurs), and — critically — the Auto Layout controls if Auto Layout has been applied to that frame.
• A text layer selected: Font family, weight, size, line height, letter spacing, alignment, and text truncation options all appear.
• A component instance selected: You see the instance properties, any exposed component properties, and a link back to the main component.
• Prototype tab active: The right panel switches to show interaction triggers, animation settings, and scrolling behaviour — the panel literally transforms to support a different mode of work.

Because the right panel changes so fluidly, new users sometimes panic when a control they expect to see has disappeared. The answer is almost always that a different type of object is selected, or that the Design/Prototype/Inspect tab at the top of the panel needs to be switched.

The Toolbar: Quick Access to Core Tools

The toolbar runs horizontally across the top of the screen. It provides one-click (or one-keystroke) access to the tools you use most frequently:

• Move tool (V): Selects and repositions objects. This is the default mode.
• Scale tool (K): Resizes objects while preserving proportions — important when scaling a group of elements that includes strokes or effects.
• Frame tool (F): Creates a frame, which is Figma's fundamental layout container. Frames can represent screens, cards, modals, or any bounded region. When you draw a frame with the Frame tool, the right panel offers preset device sizes (iPhone 15, iPad, Desktop 1440, and many others) as a shortcut.
• Shape tools (R for rectangle, O for ellipse, L for line): Basic geometric primitives used both as visual elements and as masks.
• Pen tool (P): Vector path drawing, used for custom icons, illustrations, and any shape that primitives cannot produce.
• Text tool (T): Places a text layer. Clicking creates a single-line text node that expands as you type; clicking and dragging creates a fixed-width text box that wraps.
• Component tools: The toolbar also provides access to the Resources panel (a superset of Assets) and, depending on your plan, the widget and plugin ecosystems.
• Collaboration controls: To the right of the toolbar sit the share button, the zoom percentage, the Multiplayer avatars (showing who else is in the file), and the Presentation mode button.

Pages and File Organisation

A well-structured Figma file is one of the clearest signs of a mature designer. Pages act as tabs — much like sheets in a spreadsheet — and each page can represent a distinct stage, device size, or section of a project. Here are the conventions worth adopting from day one:

• Use pages to separate concerns, not to fragment work arbitrarily. Common page structures include: Cover (a thumbnail-ready overview), Design System / Styles, Wireframes, Mobile – Main Flow, Mobile – Onboarding, Desktop, and Archive. Keeping exploratory or rejected work in an Archive page rather than deleting it preserves decision history without cluttering the active workspace.
• Consistent frame naming enables correct prototype linking. When you connect screens with prototype interactions, Figma uses frame names as destination labels. A frame named Home – Default is navigable and understandable in the Prototype panel; a frame named Frame 312 is not. Establish a naming convention — such as ScreenName – State (e.g., Cart – Empty, Cart – Items Added) — and apply it before you start drawing connections.
• Sections and cover frames aid presentation mode. Figma's Sections feature (accessible from the toolbar or right-click menu) lets you draw a labelled bounding region around a group of related frames. In presentation mode or when sharing a file link, viewers can immediately see which frames belong together. Alternatively, placing a large, clearly labelled text frame at the start of a group achieves a similar orienting effect. This is particularly valuable when stakeholders are reviewing the file directly rather than watching a guided walkthrough.
• Frame order on the canvas matters for prototype flow. When Figma auto-generates a prototype flow, it follows frames from left to right. Arranging your screens in reading order (left to right, top to bottom for vertical sub-flows) keeps the prototype logical without requiring manual reordering later.

The table below summarises a recommended page structure for a typical module project:

Collaboration and Sharing Basics

One of Figma's foundational selling points is that it was built for collaboration from the ground up — not bolted on as an afterthought. Understanding the collaboration model is essential not just for teamwork, but for managing who can do what to your file.

• Shareable links with scoped permissions: When you click the Share button in the top-right corner, you can copy a link and choose the permission level for anyone who opens it: Can view, Can comment, or Can edit. View-only links are appropriate for stakeholder reviews and developer handoff — recipients can inspect layers and copy CSS values but cannot modify anything. Comment-only links invite feedback without risking accidental edits. Edit links should be shared only with trusted collaborators who are actively contributing to the design.
• Live multiplayer with visible cursors: When two or more people have the file open simultaneously, their cursors appear on the canvas in real time, each labelled with the user's name. You can see exactly what a collaborator is looking at or working on. You can also "follow" a collaborator by clicking their avatar in the top-right toolbar — your view will mirror theirs, which is useful during design reviews or pair-design sessions. This feature makes remote design critiques feel genuinely synchronous.
• Pinned comments for contextual feedback: In Comment mode (triggered by pressing C or clicking the comment icon in the toolbar), any user with at least comment permission can click anywhere on the canvas to leave a note pinned to that exact spot. Comments can be directed at specific elements, can include @mentions to notify teammates, and can be marked as resolved once addressed. This creates a structured, traceable feedback loop directly within the design file — far more reliable than feedback scattered across email threads or chat messages.
• Version history for safe iteration: Figma saves your work continuously and automatically, but it also maintains a named version history accessible via File → Show Version History. You can manually save a named version at any significant milestone (for example, v1.0 – Stakeholder Review), and Figma also creates automatic checkpoints over time. If a design direction turns out to be a dead end, or if a collaborator accidentally deletes a section, you can browse the version timeline and restore the file to any earlier state. This makes experimentation genuinely low-risk.

From Mockup to Prototype: The Module Workflow

The rest of this module follows a deliberate four-stage progression. Each stage builds on the previous one, and jumping ahead — for example, trying to add prototype interactions before establishing a solid component structure — typically creates rework. Understanding the rationale behind the sequence helps you apply it confidently, not just mechanically.

• Stage One — Frame Setup and Screen Layout with Grids: Before placing any content, you create frames at the correct device dimensions and apply layout grids. A layout grid (added via the right panel when a frame is selected) overlays columns, rows, or a uniform grid onto the frame, giving you a visual reference for aligning elements consistently. For example, a mobile frame at 390 px wide might use a 12-column grid with 16 px gutters and 20 px margins — a system that ensures buttons, text blocks, and images all sit on the same invisible rhythm. Getting this right at the start means every subsequent element you place inherits a coherent spatial logic.
• Stage Two — Reusable Components: Once the layout scaffolding is in place, the next priority is identifying which UI elements will appear more than once — buttons, input fields, navigation bars, cards, icons — and converting them into components. A component is a master element defined once; every copy placed on the canvas is an instance of that master. When you update the master component, every instance updates automatically. This stage is about discipline: doing it before detailed design begins means you never have to retroactively synchronise dozens of manually placed copies.
• Stage Three — Auto Layout for Responsive Elements: With components established, you apply Auto Layout to the frames and components that need to respond gracefully to changing content. Auto Layout turns a frame into a flex-like container: its children stack horizontally or vertically, and the container grows or shrinks to fit its contents. A button with Auto Layout, for instance, will widen automatically if you change its label from OK to Save Changes. Without Auto Layout, you would manually resize the button every time the text changes — a small but multiplying source of inconsistency. At this stage you also define padding, gaps between elements, and resizing behaviours (fixed, hug contents, fill container) that will govern how designs respond as content varies.
• Stage Four — Prototype Interactions: The final stage switches Figma from design tool to prototyping tool. In the Prototype tab of the right panel, you draw interaction arrows between frames, specifying the trigger (on click, on hover, on drag, after delay), the action (navigate to, open overlay, scroll to, back), and the animation (instant, dissolve, slide in, smart animate). Smart Animate is particularly powerful: when two frames share layers with identical names, Figma interpolates the position, size, opacity, and other properties of those layers to produce smooth, app-like transitions without any code. The result of this stage is a clickable prototype accessible via a shareable presentation link — something a real user can tap through on their device to provide meaningful feedback before a single line of production code is written.

The diagram below summarises the four stages and their key deliverables:

Taken together, these four stages reflect a principle that underpins professional design practice: structure first, detail second, interactivity last. By the time you are placing prototype arrows in Stage Four, the underlying design should be solid enough that the connections accurately represent a real user experience — not a wishful sketch that will need to be redesigned after the first round of user testing. This module is designed to build those habits from the ground up, starting with the very interface and workflow orientation covered here.