Figma for beginners: learn the basics in 4 weeks

Day 1

Set up your workspace

Sign up at figma.com: the free plan covers this entire plan. You can work in the browser or install the desktop app. Create your first design file and spend an hour getting to know the interface:

• •left panel: layers and pages of the file;
• •right panel: properties of the selected object, such as size, colour, text and effects;
• •top toolbar: frame, shapes, pen, text, comments;
• •canvas: an endless workspace; zoom with Ctrl/Cmd and the mouse wheel.

💡 Open Figma Community and look through a few free files by other designers: it's the quickest way to see how tidy files are organised.

Week 1

Frames, shapes and text

A frame is the basis of every screen: a container that holds all its elements. Create a phone-sized frame and build a simple sign-in screen: a heading, two fields, a button and a link. Along the way, work out:

• •how a frame differs from a group and why screens need frames;
• •how to align elements and distribute the spacing between them;
• •how to set font, size and line height, and save it as a text style;
• •how to use spacing based on one unit (for example, 8 px) so the layout looks tidy.

Week 2

Auto layout

Auto layout (Shift + A) makes elements arrange themselves in a row or column and adapt to their content. Start with a button: text inside an auto layout frame with side padding. Make the text longer and the button should stretch on its own. Then rebuild the whole sign-in screen from week one with auto layout, and finally build a product card and a list of several cards.

💡 If the layout falls apart, check the element's resizing setting: fixed, hug contents or fill container. That's where most problems are.

Week 3

Components, variants and styles

A component is an element you create once and reuse as often as you like: change the main component and every copy updates. Turn last week's button, input field and card into components. Add variants: a button in default, hover and disabled states; a field that's empty, filled and showing an error. Move colours and text into styles or variables so you can change them in one place.

• •give components clear names, such as Button / Primary or Input / Error;
• •check that every component is built on auto layout;
• •assemble a new screen from your components and notice how much time it saves.

Week 4

A prototype and your first mini project

Build a short flow of three to five screens, such as sign-in → list → product card → cart. In Prototype mode, connect buttons to screens, add transitions and start the preview. Show the prototype to someone you know and ask them to complete a task without hints: wherever they stop is where you need to make changes.

💡 Share a link to your file in the community and ask for feedback on something specific: layer structure, auto layout or the flow logic. A specific question gets a useful answer.