Menu
No Certificate / Course on Audit Track
This beginner-oriented course introduces Figma, a leading collaborative design tool, and guides learners through creating a portfolio website design. Starting with the Figma interface and basic features, the course progresses to practical design application, including layout creation, components, and responsive design techniques. The course uses publicly accessible YouTube videos to deliver instructional content and real-world application examples.
This course has been curated by Riphah International University faculty and staff using publicly available third-party content and Open Educational Resources (OER) for self-paced learning. Learners will engage with curated open-access materials to achieve the course learning outcomes. All third-party content is used under open-access or fair-use policies, while any original materials are developed specifically for this learning experience.
Source and Credits:
By completing this course, you will be able to:
No prior design or UI/UX experience required.
This course is designed for:
Course Overview
Introduction to the Figma Beginners Course (Reading)
Course overview: Figma Design for beginners (Video)
Creating and Accessing Your Figma Account
Setting Up Your Figma Environment (Reading)
Set up your Figma account (Video)
Understanding Figma Interface and Files
Navigating Files and Workspace in Figma (Reading)
Navigate Figma Design files (Video)
Introduction to Layout and Hero Sections
Understanding Hero Section Layout (Reading)
Create the landing page hero (Video)
Structuring a Case Study Layout
Designing Case Study Sections (Reading)
Create the case study page (Video)
Understanding Buttons in UI Design
Role of Buttons in Interface Design (Reading)
Create the button (Video)
Introduction to Components in Figma
Understanding Reusable Components (Reading)
Components Fundamentals (Video)
Designing Cards and Containers
Building Structured UI Containers (Reading)
Create the card and container system (Video)
Navigation and Footer in Web Layouts
Understanding Navigation and Footer Design (Reading)
Create the navigation bar and footer (Video)
Presenting Skills in Portfolio Layout
Designing Informational Sections (Reading)
Create the skills list (Video)
Combining UI Sections into Pages
Structuring Complete Portfolio Pages (Reading)
Assemble the portfolio pages (Video)
Introduction to Prototyping in Figma
Understanding Interaction and Flow (Reading)
Add prototype connections (Video)
Key Takeaways and Next Steps
Course Summary and Continued Learning (Reading)
Course Wrap Up (Video)
Approximately 2.5-3 Hours
Beginner
Fully Online (Asynchronous)
Self Paced
