By the end of this lesson you can
- Find your way around the Figma interface: canvas, layers, properties and toolbar.
- Organise work into teams, projects, files and pages.
- Set up a file structure that others can understand.
The idea
Figma is a browser-based design tool used by most product teams. Other tools such as Penpot, Sketch and Framer share many of the same ideas, so the concepts here transfer.
The interface
- Canvas: the infinite space in the middle where you design.
- Layers panel (left): every object in the file, nested in a tree. Pages are listed above it.
- Properties panel (right): settings for whatever is selected, such as size, layout, fill and text.
- Toolbar (bottom or top, depending on version): tools for frames, shapes, pen, text and comments.
How work is organised
Figma organises work as teams (or workspaces) containing projects, which contain files, which contain pages. A file usually holds one product area or feature. Pages split the file into stages or topics.
A sensible page structure
Many teams use pages such as: Cover, Research and notes, Explorations, Ready for development, Archive. The cover page shows the file's name, status, owner and last update, so anyone opening it knows where things stand.
Why it matters in real projects
Design files are shared documents. Developers, product managers and other designers need to find the right screen quickly. A clear structure saves everyone time, prevents people building from outdated explorations, and makes your work look professional, including to hiring managers reviewing portfolio files.
A realistic example
A new designer joins a team and opens the "Checkout" file. It has one page with 300 frames, many duplicates and names like "Frame 482". Nobody knows which version is final.
The team reorganises: a cover page showing status "In development", a page for explorations, a page called "Ready for dev" containing only approved screens with clear names, and an archive page. Developers now go straight to "Ready for dev", and questions about which version to build stop.
Step by step
Create a project
Make a project for your learning work in your Figma team or drafts.
Create a file
Name it after the product area, for example "Plant app – onboarding".
Add pages
Create Cover, Explorations, Ready for review and Archive pages.
Design a cover
Add the file name, owner, status and date on a frame on the Cover page.
Explore the panels
Select objects and watch how the layers and properties panels change.
Learn key shortcuts
Practise F (frame), R (rectangle), T (text), and Shift+A (auto layout).
Common mistakes
Mistake Everything on one page.
Instead Split work by stage or topic into pages.
Mistake No indication of status.
Instead Add a cover page and label sections as exploration or approved.
Mistake Deleting old work instead of archiving.
Instead Move it to an Archive page so decisions can be traced.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 30 min
Set up a tidy file
Create a Figma file for a project you will work on through this stage.
Steps
- Create the file and name it clearly.
- Add at least four pages with a clear purpose.
- Design a cover with status and owner.
- Share view access with someone and ask if they can find the latest work.
Deliverable
A shared, well-structured Figma file.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Figma has a canvas, layers panel, properties panel and toolbar.
- Work is organised as teams, projects, files and pages.
- Use pages and a cover to show status.
- Well-organised files save everyone time.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
- Figma Learn (opens in a new tab)Figma
- Penpot user guide (opens in a new tab)Penpot
A free, open-source alternative with similar concepts.
Your notes
Marking complete updates your course and roadmap progress.