FREE PREVIEW · MODULE 1 · LESSON 1 · 15 MIN
The interface in fifteen minutes
Canvas, layers, properties panel and the toolbar, with the eight shortcuts worth memorising on day one.
Figma has four regions. The canvas in the centre is infinite and holds everything in a page. The left panel lists pages and layers, which are every object on the canvas arranged in a tree. The right panel shows properties of whatever is selected: position, size, fill, stroke, effects and text settings. The toolbar, which sits at the bottom of the canvas in current versions, holds the tools: move, frame, shapes, pen, text, and the comment tool. You will spend most of your time with the move and frame tools, the layers panel and the right-hand properties.
Learn eight shortcuts now and the rest as you need them. V for the move tool, F for frame, T for text, R for rectangle, and K for scale. Hold space to pan, use Cmd or Ctrl with scroll to zoom, and Shift plus 1 to fit everything on screen. Cmd or Ctrl plus D duplicates whatever is selected in place, which you will use constantly for repeating elements. Spend ten minutes doing nothing but creating frames, duplicating them and zooming around; the muscle memory pays back within a day.
Organise your work in files and pages rather than one giant canvas. A sensible structure for a non-designer is one file per project with pages named for stages, such as “Ideas,” “Working,” “Ready for review” and “Archive.” Move frames between pages as they progress. Name frames with what they are, for example “Pricing page, desktop, v3,” because unnamed frames called “Frame 148” make files unusable for anyone else within a week. Figma saves automatically and keeps version history; you can save a named version at any milestone from the file menu next to the file name.
Example: a coffee kiosk owner sets up her first file
Ama Owusu runs two coffee kiosks in Accra and wanted to stop paying a print shop for every menu change. She created one file, “Kiosk menus 2026,” with four pages: Ideas, Working, Ready for review and Archive. On Working she pressed F and drew three frames: a 1920 × 1080 menu screen, a 595 × 842 A4 flyer and a 1080 × 1080 post. She named them “Menu screen, Osu kiosk, v1,” “Flyer, opening hours, v1” and “Post, new pastries, v1.” She pressed Cmd+D to duplicate the menu screen for her second kiosk and renamed the copy. Whenever she got lost on the canvas, Shift+1 brought everything back into view. Setup took 25 minutes. When the flyer was finished she moved it to Ready for review, and her nephew, who handles printing, found the right frame without a single phone call.
Illustrative example: the business, people and figures are fictional.Key takeaways
- Four regions: canvas, layers, properties, toolbar
- Eight shortcuts cover most daily work: V, F, T, R, K, space, Cmd/Ctrl+D, Shift+1
- Use pages as workflow stages and name every frame
Exercise
Create a new file with four pages named Ideas, Working, Ready for review and Archive. On the Working page, draw three frames of different sizes, name them, and duplicate one using only shortcuts.
Continue with 11 more lessons, module quizzes and 3 downloads.
Produce clean mockups, social graphics and simple prototypes yourself, without waiting for a designer. One payment of $59.99, lifetime access, 14-day refund policy.
See the full course