NewRoleKit

Figma guide

Figma for beginners: learn the industry-standard design tool

Figma runs the design world. This guide gives you a practical week-by-week plan to go from zero to building real prototypes — no prior design experience required.

Why Figma matters for your career

It is not just a design tool — it is the shared language between designers, PMs, and engineers.

Figma is used at 90%+ of tech companies for UI design, wireframing, prototyping, and design system management. Its free tier is genuinely generous — you can build a full portfolio without paying anything.

UX Designers use it to create high-fidelity mockups and interactive prototypes. Product Managers use it to sketch ideas and communicate requirements visually. Even engineers use it to inspect designs and pull exact measurements without asking the designer twice.

If you are entering any non-engineering tech role, Figma fluency is a genuine competitive advantage — and it is learnable in a week.

Week 1 essentials: what to learn first

Follow this order. Each day builds directly on the one before it.

  1. Day 1

    Frames, shapes, text

    The 3 core building blocks of every Figma file. A Frame is like an artboard — it defines a screen or section. Shapes are the raw material. Text layers bring words to life. Master these and you can recreate any UI.

  2. Day 2

    Constraints and alignment

    Learn to make layouts that respond gracefully when you resize a frame. Constraints let you pin elements to edges or centers. The alignment panel snaps things to a grid. This is what separates a rough mockup from a polished one.

  3. Day 3

    Components

    Reusable elements that save enormous time. Create a button once as a component, then drop instances across your file. Edit the main component and every instance updates instantly — the same idea as a design system at small scale.

  4. Day 4

    Auto-layout

    Figma's most powerful feature. Think of it as CSS flexbox inside a design tool — elements stack, wrap, and space themselves automatically. Once you understand auto-layout, everything you build becomes resizable and maintainable.

  5. Day 5

    Prototyping

    Connect frames, add interactions like 'on tap navigate to', and share a clickable prototype link. Stakeholders and users can experience the flow in a browser without a single line of code. This is how ideas get validated before engineering starts.

  6. Days 6–7

    Real project

    Redesign one screen from an app you use every day. Screenshot it, recreate it from scratch in Figma, then improve it. Document what you changed and why. This one exercise teaches more than five days of tutorials.

Key keyboard shortcuts to memorize

These nine shortcuts cover 80% of your daily Figma work. Learn them early and your speed will compound.

ShortcutAction
FFrame tool
RRectangle
TText
VMove tool
Cmd+GGroup selection
Cmd+Shift+GUngroup
Cmd+DDuplicate in place
Cmd+[ / ]Move layer order up or down
Alt+dragCopy a layer

Figma features PMs use every day

You do not need to be a designer to get value from Figma. These four features are where PMs spend the most time.

FigJam

Figma's whiteboard tool. Great for brainstorming sessions, affinity mapping, journey mapping, and any collaborative workshop you would previously have done with sticky notes on a wall.

Dev inspect

Click any element in a Figma file and the inspect panel shows the exact measurements, colors, fonts, and spacing. PMs use this to give engineering precise specs without needing to guess.

Commenting on designs

Drop a comment anywhere on a frame and tag a teammate. This makes async design reviews fast — no more back-and-forth emails describing 'the button in the top right corner'.

Prototypes for validation

Share a prototype link with users before asking engineering to build anything. A 30-minute usability test on a Figma prototype saves weeks of rework. PMs who do this ship better products.

Free Figma resources

Everything below is free. Start with the Community and the official tutorials.

  1. Figma Community

    Thousands of free UI kits, icon sets, and design system templates. Search for any app or style and you will find something useful.

  2. Google Material Design UI kit

    The official Material 3 component library, free on Figma Community. Industry-standard components you can use directly or study.

  3. Apple iOS UI kit

    Apple's Human Interface Guidelines translated into a Figma file. Essential if you plan to design mobile apps for iPhone or iPad.

  4. Figma official tutorials on YouTube

    Short, well-produced videos from the Figma team themselves. Start with 'Getting started with Figma' — it covers the fundamentals in under an hour.

Your first project: redesign an app screen

Pick any app you use daily — your banking app, a food delivery app, your favourite social feed. Take a screenshot of one screen. Then open Figma and recreate it from scratch.

Once you have the original rebuilt, improve it. Change the layout. Simplify a flow. Fix the information hierarchy. Make one deliberate design decision and be able to explain why.

Write two or three sentences documenting what you changed and why. This annotation — your design rationale — is what turns a Figma file into a portfolio piece. Hiring managers are not looking for pixel-perfect work from beginners. They are looking for evidence that you think like a designer.

Put Figma to work

Apply these skills in the UX track

Figma is your canvas — the UX learning path gives you the full toolkit: user research, wireframing, usability testing, and portfolio development.

Explore the UX track