First edition, 2026

Mastering UI/UX Design

Learn UI and UX Design in Figma by Building Real Projects

New on the Hub · no reviews yet

Beginner → Advanced11 chapters · 66 projectsBy Syed Ahmed Ul Hassan

About this book

This hands-on course guides you through designing a complete, clickable coffee ordering app in Figma, from initial sketch to polished prototype. You will master the core principles of UI/UX design by solving a real-world client problem, building a robust portfolio piece along the way.

“I believe craft should be teachable, that strategy without execution is decoration, and that the fastest way to learn anything is to put it in front of a real person. This book will not stop at the software, because the job of a designer is not just to make pretty screens, but to solve real human problems. You will learn by doing, building a full app one step at a time, just like real product teams do. My hope is that you close this book, open Figma, and redesign one small thing that annoys you, then put it in front of someone and watch them get stuck, because that is where the real learning happens.”

— Syed Ahmed Ul Hassan, from the introduction

Owning the book unlocks its portal on the Hub: the Smart mentor, project evaluations with a graded report for all 66 projects, chapter-by-chapter progression, and the certificate.

57% OFF · LIMITED TIME LAUNCH OFFER

~~$35~~$15one time

The whole book to read online, as soon as your payment is approved
Each chapter's PDF, yours to download as you complete it
The complete 11-chapter course portal
24/7 tutor · 1,000 tokens included
All 66 projects graded with reports
Printable, verifiable certificate

Got a printed copy? Redeem its code instead

10% of this purchase ($1.50) goes to workshops and printed books for kids in Northern Pakistan.

Everything $15 unlocks

Not just a book. A complete system.

📕

The complete book, online

All 11 chapters to read in your portal from the moment you are approved, on your phone or laptop. Printed copies carry the same access code.

📦

Chapters you keep, as you earn them

Finish a chapter's project and that chapter's PDF unlocks for you to download. Complete the course and the whole book is yours.

🤖

24/7 tutor, for life

A tutor that knows every page and never sleeps. The Regular tutor is free forever; 1,000 Smart tokens are included for deep, personalised help.

📊

Project assessments

Submit every project and get a graded report out of 10: what you nailed, what to fix, exactly how.

🏆

Progression + certificate

Chapters unlock as you finish real work, ending in a verifiable certificate signed by the author.

🎯

Meet the Author 1 on 1

Book a live 30-minute Zoom session for career counselling or portfolio review whenever you need it.

Where you end up

By the last chapter, you will…

✓Understand the core principles of UI/UX design and the difference between them.

✓Design and build a complete mobile application from initial sketches to high-fidelity screens in Figma.

✓Create and manage design systems using Figma's components, variants, and variables.

✓Develop interactive prototypes that simulate real user experiences, including animations and overlays.

✓Conduct basic usability testing, analyze feedback, and iterate on designs based on user insights.

✓Prepare and present a professional UI/UX design case study for a portfolio.

The timing

Why this skill, why right now

TODAY

The demand for skilled UI/UX designers is rapidly growing as businesses increasingly rely on intuitive digital products.
Mastering Figma, the industry standard tool, makes you immediately employable in product teams worldwide.
Learning to design for real user needs, not just aesthetics, is critical for creating successful and impactful digital experiences.
This course teaches a practical, hands-on approach directly applicable to current industry workflows and client expectations.

THE NEXT 5 YEARS

As AI and automation evolve, the human-centered design skills taught here will become even more valuable for crafting meaningful interactions.
The ability to build flexible design systems in Figma will be essential for scaling products and collaborating in increasingly complex tech environments.
Understanding user behavior and iterating based on feedback will remain a core competency, transcending specific tools or technologies.
The principles of accessibility and inclusive design learned will be crucial for creating products that serve diverse global audiences.

Look inside · free

Read a full chapter, free

No signup needed. This is a complete chapter exactly as it appears in the book, layout and all, with the kind of project you build at the end of every chapter. Learn it, then build it.

Loading page 1…

Page 1 of 9

CHAPTER 1 GUIDED PROJECTMeet Merriem: Persona Card

The guided project of Chapter 1 (Hello, Designer!). This chapter introduces the fundamental differences between UX (user experience) and UI (user interface), outlines the design process, and presents five key rules of good design. Students will set up their Figma project file and create their first design: a persona card for the client's key customer.

Owners submit this for a graded report out of 10, plus five practice briefs per chapter. Three submissions unlock the next chapter.

What's inside

The 11 chapters

Hello, Designer!

This chapter introduces the fundamental differences between UX (user experience) and UI (user interface), outlines the design process, and presents five key rules of good design. Students will set up their Figma project file and create their first design: a persona card for the client's key customer.

Think with a Pencil

This chapter emphasizes the importance of sketching before digital design, guiding students through brainstorming ideas with the Crazy 8s method. Students will then learn to map a user's journey using a user flow diagram and translate their paper sketches into initial digital concepts.

Blueprints: Low-Fidelity Wireframes

Students will learn about design fidelity levels and the significance of wireframes for establishing screen structure before aesthetics. This chapter covers phone screen sizes, safe areas, and the thumb zone, culminating in building six low-fidelity wireframes for the Beanbag app.

Words that Work: Typography

This chapter explores typography as a core element of visual hierarchy, teaching the anatomy of letters and main type families. Students will build a type scale, save it as Figma text styles, and apply these styles to their wireframes, transforming them into mid-fidelity screens with clear, purposeful text.

Colour with Confidence

Students will learn about color theory, including hue, saturation, brightness, and color harmonies, applying the 60-30-10 rule for balanced screens. The chapter emphasizes contrast for accessibility and guides students in creating a custom color palette as Figma variables with Light and Dark modes.

Room to Breathe: Spacing and Layout

This chapter focuses on intentional spacing, teaching the 8-point spacing system and principles like proximity, alignment, and repetition. Students will add layout grids to their frames and rebuild Beanbag's components using Figma's powerful auto layout feature for flexible and responsive designs.

Build Once, Use Everywhere

Students will learn to create reusable design elements by turning layers into Figma components and managing them with variants and component properties. The chapter guides the creation of a comprehensive UI kit for Beanbag, enabling efficient design updates across all screens.

Turn Up the Fidelity: High-Fidelity Screens

This chapter focuses on transforming designs into high-fidelity screens by adding imagery, consistent icons, and depth through effect styles. Students will also design crucial empty, loading, error, and success states, polishing every pixel to create a realistic, finished product appearance.

Make It Move: Prototyping

Students will bring their designs to life by linking screens with interactive triggers, actions, and animations, including Figma's Smart Animate. The chapter covers creating interactive components, overlays, scrolling, and fixed elements, concluding with presenting and testing the prototype on a mobile device.

Test, Hand Off, Show Off

This final chapter covers crucial post-design phases: conducting usability tests with real users, analyzing feedback using an affinity map, and iterating on the design. Students will also learn to prepare their file for developer handoff using Figma's Dev Mode and build a compelling portfolio case study of their Beanbag app.

Final Boss: Three Client Briefs

This capstone chapter challenges students to apply all the skills learned throughout the book to real-world client briefs. Students will choose one or more briefs and independently take a project from initial concept to a fully tested, polished app with a complete case study, simulating a professional design studio experience.

Reviews

From students on this book

No reviews yet. Reviews come only from students who own the book.