📌 From absolute beginner to a practical, professional UI designer — one lesson at a time.
Important This repository documents my self-guided journey learning Figma & UI/UX Design from scratch, structured through a phased master curriculum — starting from complete-beginner fundamentals and progressing to real, professional-level UI design practice.
Whether you're someone who has never opened Figma before, or a developer who wants to understand UI/UX from a designer's perspective, this repo tracks every lesson, exercise, and design decision made along the way.
Key highlights include:
- 📁 Lesson-by-lesson notes covering the full Figma curriculum
- 🧩 Practice exercises and follow-along tasks for every topic
- 🎯 Real design files and screen mockups built during the course
- 🧠 Concepts explained in a beginner-friendly, practical way
- 🌍 A public log of progress from zero design experience to a working UI designer skillset
Note This course is structured in progressive phases, each building on the last, moving from theory into hands-on practice.
- ✅ Phase 1 — Figma Fundamentals: Interface, tools, frames, shapes, and navigation
- ✅ Phase 2 — UI/UX Basics: Core design principles and user-centered thinking
- ✅ Phase 3 — Typography & Color: Building visual hierarchy and consistent color systems
- ✅ Phase 4 — Layout & Spacing: Grids, alignment, and spacing systems
- ✅ Phase 5 — Auto Layout: Responsive, flexible component structures
- ✅ Phase 6 — Components & Variants: Reusable, scalable design elements
- ✅ Phase 7 — Screen Design: Designing full app/website screens
- ✅ Phase 8 — Responsive UI: Adapting designs across device sizes
- ✅ Phase 9 — Prototyping: Interactive flows and clickable prototypes
- ✅ Phase 10 — Design Systems: Building a cohesive, reusable design language
- ✅ Phase 11 — Capstone Project: A complete end-to-end professional UI project
Each phase includes theory explanations, a Follow-Along Task, and a Practice Exercise with detailed step-by-step instructions.
- Structured markdown notes for every phase of the curriculum
- Beginner-friendly explanations of core UI/UX concepts
- Follow-along tasks recreated in Figma
- Practice exercises with step-by-step guidance
- Reusable component libraries built during the components phase
- A personal mini design system built from scratch
- A complete, production-style UI project applying everything learned
figma-learning-journey/
│
├── 01-fundamentals/
├── 02-ui-ux-basics/
├── 03-typography-color/
├── 04-layout-spacing/
├── 05-auto-layout/
├── 06-components-variants/
├── 07-screen-design/
├── 08-responsive-ui/
├── 09-prototyping/
├── 10-design-systems/
├── 11-capstone-project/
│
└── README.md
To go from zero design experience to being able to confidently design clean, functional, and professional-grade UI/UX for real-world apps and websites — and to document that growth transparently, lesson by lesson.
- Phase 1 — Figma Fundamentals
- Phase 2 — UI/UX Basics
- Phase 3 — Typography & Color
- Phase 4 — Layout & Spacing
- Phase 5 — Auto Layout
- Phase 6 — Components & Variants
- Phase 7 — Screen Design
- Phase 8 — Responsive UI
- Phase 9 — Prototyping
- Phase 10 — Design Systems
- Phase 11 — Capstone Project
🎉 Course Status: Completed — All 11 phases finished!