Yes. Figma has a free Starter plan that lets you work on up to 3 projects with unlimited collaborators in view mode. Paid plans unlock more projects, version history, and advanced team features.

Is Figma good for beginners?

Figma is widely considered one of the most beginner-friendly design tools available. It runs in the browser, needs no installation, and its interface is logical enough to pick up the basics in a day or two.

How long does it take to learn Figma?

You can learn the core interface and basic design tasks in a few hours. Getting comfortable with components, auto layout, and prototyping typically takes a few weeks of regular practice.

Do UX designers use Figma?

Yes - Figma is the industry-standard tool for UX and product designers. It is used for wireframing, high-fidelity design, component libraries, and interactive prototypes shared directly with developers.

Figma for Beginners: A Step-by-Step Guide

Figma is the design tool the industry has converged on - and the good news is that it is genuinely approachable for beginners. This step-by-step guide takes you from creating your first account to building a simple interactive prototype, with no prior design experience assumed.

If you want background on what Figma is and why it matters, read our what is Figma primer first. Otherwise, let us get started.

What Figma Actually Is

Figma is a browser-based design tool used by UX designers, product designers, and teams to create wireframes, interfaces, and interactive prototypes. Because it lives in the browser, there is nothing to install and your files are automatically saved to the cloud. You can share a link and collaborators can view or comment in real time - no exports needed.

It is used across the full design process: from rough sketches and wireframes all the way to pixel-perfect handoff files for developers.

Step 1 - Create Your Figma Account

Go to figma.com and sign up for a free Starter account using your email address or a Google account. The free plan is genuinely useful and gives you enough room to learn and build a portfolio.

Once you are in, you will land on the Figma home screen, sometimes called the dashboard. This is where your files and projects are organised.

Click "New design file" to open the editor.

Step 2 - Get Familiar with the Interface

The Figma editor has four main areas:

The Canvas

The large central area is the canvas - an infinite white space where all your design work happens. You can zoom in and out with Ctrl + scroll (or Cmd + scroll on Mac) and pan by holding the spacebar and dragging.

The Layers Panel (Left Sidebar)

Every element you place on the canvas appears in the layers panel on the left. Layers are stacked top to bottom, with elements higher in the list appearing in front. Grouping and naming layers well becomes important as your designs grow more complex.

The Properties Panel (Right Sidebar)

When you select an element, the right panel shows its properties: position, size, fill colour, stroke, corner radius, and more. This is where you make precise adjustments.

The Toolbar (Top)

Along the top you will find tools for selecting, drawing frames, placing shapes, adding text, drawing vector paths, and inserting components. The keyboard shortcuts shown here are worth learning early - they speed up your workflow considerably.

Step 3 - Create a Frame

In Figma, a frame is the container for your designs - roughly equivalent to an artboard in other tools. Frames represent a screen, a page, or any bounded area.

Press F (or select the Frame tool from the toolbar). You can either drag a custom size on the canvas, or click the Frame tool and then choose a preset from the right panel - iPhone, Android, desktop browser, and so on are all listed there.

Give your frame a name by double-clicking its label in the layers panel. Good naming habits save a lot of confusion later.

Step 4 - Add Shapes and Text

With your frame selected, you are ready to place elements inside it.

Shapes: Press R to draw a rectangle, O for an ellipse, or L for a line. Click and drag on the canvas to place them. Once placed, adjust fill colour, stroke, corner radius, and opacity in the right panel. Holding Shift while dragging constrains proportions to a square or circle.

Text: Press T, then click anywhere on the canvas to place a text element. Type your content, then use the right panel to set font family, size, weight, line height, and alignment. Figma connects to Google Fonts, so you have a broad range available on the free plan.

A practical exercise: try recreating a simple button - a rounded rectangle with a label centred inside it. This small task touches selection, sizing, colour, corner radius, and text alignment all at once.

Step 5 - Use Components and Styles

Once you start designing more than one screen, copy-pasting the same button over and over becomes a problem. Change one instance and you have to update them all manually. Components solve this.

Components

Select any element (or group of elements) and press Ctrl + Alt + K (Cmd + Option + K on Mac) to convert it into a component. It will appear in the Assets panel on the left with a purple diamond icon.

When you drag a copy of a component onto the canvas, you create an "instance". Change the main component - its colour, label, size - and every instance updates automatically.

Styles

Styles let you save a colour or text setting and apply it consistently across your file. For example, create a colour style called "Brand Blue" and apply it to multiple elements. If the brand colour changes, you update the style once and everything updates.

To create a style, select an element, click the four-dot icon next to Fill in the right panel, and save as a new style.

Components and styles together form the foundation of a design system - the building blocks that keep large projects consistent.

Step 6 - Auto Layout Basics

Auto layout is one of the most useful features in Figma and the one beginners most often skip. It lets frames and groups resize automatically as their contents change - essential for designing buttons, cards, lists, and navigation bars that need to behave responsively.

To apply auto layout, select a frame or group and press Shift + A. The right panel will show auto layout controls for direction (horizontal or vertical), gap between items, padding, and alignment.

A good exercise: create a button with a text label inside a frame, apply auto layout, then change the label text. Watch the button width adjust automatically. That single behaviour saves enormous amounts of manual resizing later.

Step 7 - Build a Simple Prototype

Figma has a built-in prototyping mode that lets you link screens together and preview interactions - no code needed.

Click the "Prototype" tab in the right panel (visible when nothing is selected, or when you have a frame selected). Now hover over an element on your frame. A blue handle appears on the right edge. Drag that handle to a second frame to create a connection. Set the trigger (on click, on hover) and the animation type (dissolve, slide, etc.) in the connection settings.

Press the Play button at the top right to preview your prototype in a new browser tab. You will see your design as a clickable mock-up.

For sharing with others, click "Share prototype" to generate a link that anyone can open in their browser - no Figma account required to view it.

Step 8 - Collaborate

Figma's collaboration features are a key reason the industry adopted it so widely.

Share your file via the "Share" button at the top right. You can invite specific people by email or generate a link. Set permissions to "can view" for stakeholders and clients, or "can edit" for fellow designers.

Viewers can leave comments by pressing C and clicking anywhere on the design. This makes design reviews much simpler than sending screenshots back and forth over email.

If you are working with a developer, point them to the Inspect panel (accessible in view mode on the right sidebar). It shows CSS-style specs, spacing values, and assets they can copy directly - no need to document measurements manually.

Beginner Tips Worth Knowing Early

Name your layers as you go. Figma names things "Rectangle 47" by default. Rename as you place them - you will thank yourself when the file grows.
Use the keyboard shortcuts. V (select), F (frame), R (rectangle), T (text), H (hand/pan), Z (zoom) - learning ten shortcuts cuts your working time noticeably.
Zoom to fit with Shift + 1. If you get lost on the canvas, this brings everything back into view.
Group related layers. Select multiple layers and press Ctrl + G to group them. This keeps the layers panel manageable.
Save component variants early. If you have a button that needs a hover state or a disabled state, use Figma's Variants feature to keep them tidy under one component.
Use the Community. Figma's Community tab (accessible from the home screen) has thousands of free UI kits, icon sets, and templates. Studying how experienced designers structure their files is one of the fastest ways to improve.

What to Learn Next

Getting comfortable with the basics above puts you in good shape for building simple screens. From here, the skills worth developing are:

Variables and tokens - Figma's newer approach to storing design decisions like colour and spacing at scale.
Advanced prototyping - conditional logic, scroll behaviour, overlays.
Component properties - exposing controls on instances so you can swap icons or toggle visibility without editing the main component.
Handoff to developers - understanding how developers read Figma files and how to structure yours to make their work easier.

Figma is a tool, not the whole skill. UX designers use Figma to solve problems - and the design thinking behind what you build matters as much as the execution. For a broader view of the discipline, read what is UX design and our UX design portfolio guide when you are ready to start documenting your projects.

Learn Figma Hands-On at UX Academy

Reading about Figma is useful. Using it on real briefs with expert feedback is how the skill actually sticks.

At UX Academy, our live online UX design courses teach Figma as part of a structured curriculum - not as a standalone tool tutorial, but as the medium for solving real design problems. Cohorts are capped at 15 people so every student gets direct time with the instructors.

The next cohort starts 5 September 2026. If you want to see what the course covers before committing, join our free UX/UI masterclass - a live session where you can ask questions and get a feel for how we teach.

View the Beginner UX Design course for the full syllabus, outcomes, and pricing.