Skip to main content
Career insights

Figma for Beginners: The UX Designer's Starting Point

7 min read

Figma is the industry standard design tool. Nearly every UX design team uses it, every design job listing mentions it, and the good news is that the basics are learnable in a week of focused practice. Here is what to focus on in your first seven days — and what you can safely ignore until later.

Week 1 only: the fundamentals

In your first week, ignore everything except: frames (Figma's version of artboards — use them for every screen you design), shapes and text (the building blocks of every UI), alignment tools (the toolbar buttons that distribute and align elements precisely), and the color panel (fill, stroke, and opacity). These four things let you build any static screen. Everything else is optimization. Learn to walk before you run.

Auto-layout: the most important feature in Figma

Auto-layout is what separates Figma from earlier design tools. It lets you create frames that resize and reflow automatically as content changes — the way a real UI behaves. A button with auto-layout will grow to fit its label text. A list will expand when you add items. Spend dedicated time on auto-layout in week one; it changes how you think about design. The official Figma YouTube channel has the clearest tutorials.

Components: what they are and why they save time

A component is a reusable design element. Create a button once as a component, use it fifty times across your screens, and when you change the master component every instance updates automatically. Components are how real design systems work — and understanding them early makes you dramatically more efficient. Start by converting your most-used elements (buttons, input fields, nav bars) into components.

Prototyping: linking screens for user testing

Figma's prototyping mode lets you connect screens with interactions — tap this button and navigate to that screen. The output is a clickable prototype you can share with a link, which is all you need to run basic usability tests. You do not need code. Switch to Prototype mode in the right panel, draw a connection from a button to the next frame, and preview it. Five minutes of setup gives you a testable flow.

Figma Community: thousands of free UI kits and templates

The Figma Community (community.figma.com) is a library of free files — UI kits, design systems, icon sets, and templates — created by designers around the world. When you are starting out, studying a well-built community file teaches you more than any tutorial. Open a popular iOS or Material Design UI kit, dig into how the components are structured, and reverse-engineer the decisions. It is the fastest way to learn best practices.

Keyboard shortcuts to learn first

A (frame tool), R (rectangle), T (text), V (move/select), K (scale), Ctrl/Cmd+D (duplicate), Ctrl/Cmd+G (group), Ctrl/Cmd+Shift+G (ungroup), Alt+drag (copy while moving), and Ctrl/Cmd+Z (undo). Learn these ten before anything else — they cover 90% of what you do in a typical design session.

Your first exercise

Pick an app you use every day — a banking app, a food delivery app, your email client — and redesign its login screen. Screenshot the original. Recreate it in Figma first to understand how it is built. Then redesign it: what would you change and why? Document your reasoning in a short write-up alongside the before and after. This single exercise, done well, is more valuable in a portfolio than five passive course completions.

Keep learning

Ready to make the move?

Explore structured learning paths for every non-coding tech role — free to start, no signup required.

Browse all roles
← All articles