Course description

Figma is a design tool for planning website pages and app screens. This course teaches you to use it properly, and to think like a UX designer while you do: finding out what people need, planning pages and steps, sketching and wireframing, building flexible layouts with Auto Layout, reusable components and styles, finished designs that are accessible, clickable prototypes, and a simple usability session before anything is built.

It's a full, hands-on course, not a quick tour. There are 10 sections and 50 written lessons, each with a worked example, common questions and a short task to do in Figma. You follow Ailith, a former hotel reservations manager in Malvern moving into design, as she designs a home page for an upholstery workshop and booking screens for a children's swim school, including the mistakes she made and how she put them right. Every section has a practice pack with a worksheet, key points and the files the lessons use: briefs, starter content, wireframe sketch sheets, persona and journey templates, component inventories, checklists and sample pictures drawn for the course. There are no ready-made Figma files: you build everything yourself, from an empty canvas.

Figma changes often, so the course describes what each tool does and where it usually lives, and says plainly what was true at the time of writing. Everything except Dev Mode and variable modes can be done on Figma's free plan at the time of writing.

What you'll learn

• Getting started: what Figma and FigJam are, how plans and seats work in general terms, the browser and the desktop app, files, pages, frames and the canvas, and a tidy naming routine.
• Shapes, text and images: shapes, fills, strokes, corners and shadows, text that copes when the words change, placing and cropping pictures, frames, groups and alignment.
• UX basics before you design: user needs and business goals, a one-page brief, short conversations with users, personas, journey maps, information architecture, sitemaps and user flows.
• Wireframes: quick paper sketches, frames and layout guides, a grey wireframe for a home page and four app screens, and a review with the owner.
• Auto Layout and different screens: padding, gap, flow and alignment, hug, fill and fixed sizes, constraints, and one page at desktop, tablet and phone widths.
• Components, styles and variables: components and instances, variants and properties, colour and text styles, variables and modes in plain terms, and a small design system with a component inventory.
• High-fidelity designs: brand colours, type and pictures, every state of an app screen, icons, labels and alt text, and the accessibility checks that belong in a design.
• Prototyping: connections, triggers, actions and animations, overlays, fixed headers, Smart animate, simple interactive components, and viewing on a phone.
• Feedback, handoff and exporting: sharing and comments, a usability session with five people, turning what you saw into a fix list, handoff and Dev Mode in general terms, and exporting assets.
• Final project: a home page and a booking task for a business of your choice, or a practice brief, from research to handoff, plus Figma's AI features and plugins in general terms.

Who it's for

Career changers who want to move into web, app or UX design, and small business owners planning a website or an app who want to design it themselves or brief someone well. You don't need any design experience, just a computer and some confidence using it. The course keeps colour and typography theory and accessibility law short and points to Rootlet's other courses for more. It gives general information, not legal advice. Rootlet isn't connected to Figma. The people and businesses in the course are fictional.

What will I learn?

• Set up Figma in a browser or the desktop app, find your way round files, pages, frames and the canvas, and keep your work tidily named
• Draw shapes, set text that copes when the words change, place and crop pictures, and line everything up to a spacing scale
• Write a one-page brief, talk to a few users, and turn what you hear into personas, a journey map, a sitemap and a user flow
• Sketch on paper, then build grey wireframes for a website page and a set of app screens, and review them with the owner
• Build buttons, cards and whole pages with Auto Layout and constraints so they work at desktop, tablet and phone widths
• Make components with variants and properties, save colour and text styles, and use variables and modes in simple ways
• Turn wireframes into finished, accessible designs with brand colours, real words, every state designed and contrast checked
• Prototype a task with connections, overlays, Smart animate and interactive components, and view it on a phone
• Run a small usability session with five people, turn what you saw into a fix list, and prepare a clear handoff with exported assets
• Design a home page and a booking task of your own, from research to handoff, ready to show in a portfolio

Frequently asked questions