Module 1: Figma Foundations
Why Teams Use Figma
Product design is a team activity. Designers, developers, product managers, marketers and clients all need to see, discuss and build from the same designs. For years that meant emailing files back and forth, arguing over which version was latest, and exporting screenshots for feedback. Figma changed this by putting design in the browser, with one shared file that everyone can open at the same time. Understanding why teams choose Figma, and how it is organised, will help you use it the way professional teams do from your first day.
What makes Figma different
- Cloud-based and multiplayer: files live online. Several people can work in the same file at once and see each other's cursors. There is no "final_v7_REAL.fig" problem, because there is only one file.
- Runs anywhere: Figma works in a modern web browser on Windows, macOS, Linux and ChromeOS, with optional desktop apps. A developer on Linux and a client on a Chromebook can open the same link.
- Built for interfaces: features such as auto layout, components, variants and variables are designed specifically for screens and design systems.
- Design, prototype and handoff in one place: you can design screens, link them into a clickable prototype and let developers inspect measurements and code values without separate tools.
- Collaboration built in: comments, sharing links, version history and libraries are part of the product.
How Figma is organised
Figma's structure goes from broad to specific:
| Level | What it is |
|---|---|
| Team or organisation | A shared workspace for a company or group, with members and billing |
| Project | A folder of related files, such as "Mobile App" or "Marketing Website" |
| File | A single design document, which can contain many pages |
| Page | A section of a file, such as "Explorations", "Final screens" or "Components" |
| Canvas | The infinite working area on each page, where you place frames and layers |
Figma also has FigJam, an online whiteboard for workshops, flows and brainstorming, and Dev Mode, a view of design files tailored to developers. Plans and features vary and change over time, so check Figma's pricing page for what the free plan includes when you start.
A tour of the interface
When you open a design file you see:
- Toolbar (at the bottom or top, depending on the version): tools for moving, frames, shapes, pen, text and comments.
- Left sidebar: pages and the layers panel, which lists every object in a tree, plus assets such as components.
- Right sidebar: the properties panel for the selected object (position, size, layout, fill, stroke, effects, export), with tabs for Design and Prototype.
- Canvas: the central area where you work. Hold the space bar and drag to pan; use Ctrl or Cmd with the scroll wheel, or pinch on a trackpad, to zoom.
Useful shortcuts from day one: F or A for the frame tool, R for rectangle, T for text, P for pen, V to return to move, Shift+1 to zoom to fit everything, and Ctrl/Cmd+/ to search for any command.
Worked example: one week in a product team
Imagine a small Nairobi start-up building a savings app. On Monday, the product manager and designer run a FigJam session to map the "create a savings goal" journey with sticky notes. On Tuesday and Wednesday, the designer builds screens in a Figma file using the team's component library, while the product manager leaves comments directly on the screens. On Thursday, the designer links the screens into a prototype and shares it with five users, who test it on their phones. On Friday, the designer marks the final screens ready for development, and two developers inspect spacing, colours and text styles in Dev Mode, asking questions in comments rather than in long chat threads.
Everyone worked from the same file all week. No files were emailed, and the conversation stayed attached to the design it was about.
Common mistakes to avoid
- Treating Figma like a drawing app. Its real power comes from structure: frames, auto layout and components. You will learn these next.
- One giant page for everything. Use pages to separate explorations, final designs and components.
- Sharing with edit access by default. Give people view or comment access unless they need to edit.
- Ignoring layer names. "Rectangle 247" helps nobody. Name important layers as you go.
Exercise
Create a free Figma account, start a new design file and name it "Practice - Figma Course". Add three pages called Explorations, Screens and Components, then draw one frame, one rectangle and one text layer on the Explorations page, rename each layer sensibly, and find each command using the Ctrl/Cmd+/ quick search.
Key points
- Figma is cloud-based and multiplayer, so the whole team works from one shared file.
- Work is organised into teams, projects, files, pages and an infinite canvas.
- Learn the left layers panel, right properties panel and core shortcuts early.
- Structure, naming and sensible sharing permissions matter from the first file.