Figma Basics · Lesson 1 of 6
Why Figma, and finding your way around
Understand what Figma is for and get comfortable with the canvas.
Figma is where interfaces are designed. It replaced Photoshop and Adobe XD for most of the industry within a few years for reasons that matter practically: it runs in the browser (so it works identically on any machine, which in Pakistan means no licence and no heavy install), several people can work in the same file at once, sharing is a link rather than an exported file, and developers can inspect a design for exact sizes and colours without asking the designer.
What it is NOT: an image editor. You do not retouch photographs in Figma. It is a tool for laying out interfaces, building reusable components, prototyping flows and handing work to developers.
The free tier covers everything in this course and most freelance work — the paid tiers add team features and version history depth rather than design capability. Sign up at figma.com; the browser version is fine, the desktop app is the same thing with better font handling.
THE INTERFACE, in four parts. The CANVAS is the infinite space in the middle where everything lives. The LAYERS panel on the left lists everything in your file as a tree, and keeping it named and ordered is the difference between a file a colleague can use and one they cannot. The DESIGN panel on the right shows the properties of whatever is selected — position, size, colour, typography. The TOOLBAR at the top holds the tools: move, frame, shape, pen, text, comment.
NAVIGATION, which frustrates beginners for one day and then disappears: space bar plus drag to pan, Ctrl/Cmd plus scroll to zoom, Shift+1 to fit everything on screen, Shift+2 to zoom to what is selected. Learn those four now and the tool stops fighting you.
The object you build everything inside is the FRAME (press F). A frame is a container — most often a screen, sized to a device. Figma provides presets, and the one that matters for Pakistan is a common Android phone size rather than the largest iPhone: design where your users actually are, which ux-design-basics insisted on.
One habit from the first minute: name your layers and frames as you make them. A file full of 'Rectangle 47' and 'Frame 12' is unusable by anyone including you in a fortnight.
Create a Figma account and a new file. Make three phone-sized frames named Home, Details and Login. Practise the four navigation shortcuts until they are automatic. Draw a few rectangles and text layers, then rename every single layer meaningfully — that discipline is the exercise.
Check what you learned
Create your free BvLogic ID to take the quiz and record your score.
Create your BvLogic ID