Figma

$250 $200

Learn how to design beautiful and user-friendly interfaces with Figma, the industry’s leading UI/UX design tool.
Whether you're a beginner or looking to refine your design skills, this course will teach you how to wireframe, prototype, and collaborate on projects effectively.

Course Info: 📅 April 22 – May 2 | ⏰ 5:00 PM – 7:00 PM | 🗓 MWF | 🌐 Online
Enroll Now

2 Weeks

12 hours

3+ Group Projects

Online

Certification of Completion

Day 1: Introduction to UI/UX and Figma Basics

  • Overview of UI/UX design, differences between UI and UX, and the design process (research, wireframing, prototyping, testing).
  • Introduction to Figma: What it is, its benefits, and comparison with other design tools (Adobe XD, Sketch).
  • Setting up a Figma account and understanding cloud-based collaboration.
  • Figma Interface Tour: Quick tour of Figma’s workspace (Toolbar, Layers Panel, Properties Panel).

Day 2: Typography and Color Theory in UI Design

  • Typography principles: Choosing the right fonts, font pairing, hierarchy, line height, letter spacing, and alignment.
  • Understanding color psychology in design and creating a project color palette.
  • Accessibility considerations, including contrast ratios and color blindness.

Day 3: Wireframing and Layout Principles

  • Introduction to wireframing, its importance, and differences between low-fidelity and high-fidelity wireframes.
  • Tools for wireframing and using Figma to create basic wireframes with frames and placeholders.
  • Organizing layouts with grids, Auto Layout, and structuring content for usability and clarity.

Day 4: Prototyping and Interactive Designs

  • Introduction to prototyping, its importance in UI/UX, and creating interactive elements using links and transitions.
  • Building clickable prototypes by adding interactions between frames and using Smart Animate for smooth transitions.
  • Prototyping navigation, modals, and hover states.

Day 5: Components, Collaboration, and Developer Handoff

  • Creating reusable UI components and working with Variants for different states (buttons, inputs, toggles).
  • Maintaining consistency across a design system.
  • Real-time collaboration with teams using comments, feedback tools, and version control.
  • Preparing designs for developers, using the Inspect tool for CSS properties, spacing, and exporting assets.

Day 6: Adding Interactions and Animations

  • Using Smart Animate for advanced animations and creating hover effects.
  • Implementing scroll-triggered animations to enhance the user experience.

Student Learning Outcomes

  • Understand and efficiently use Figma’s design tools and workspace.
  • Design low-fidelity and high-fidelity user interfaces.

Course Objectives

  • Develop job-relevant skills with hands-on projects.
  • Earn a shareable career certificate from SE Factory.

Prerequisites

  • Age Requirement: 20+.
  • Language: Proficiency in English and/or Arabic (sessions may include both).
  • Basic Computer Skills: Ability to navigate emails, online forms, and video conferencing tools.
  • Willingness to Learn: Open-mindedness to self-reflection, goal-setting, and interactive exercises.

$200 (VAT might apply).

Nour Mshawrab
Nour is a Full-Stack Web and Mobile Developer and UI/UX Designer. She’s currently an instructor at SE Factory, teaching UI/UX and Web Development, and has successfully guided over 10 batches of students.
Her passion and dedication to seeing her students grow is what drives her success.
Through her career path, Nour has had the chance to work with several startup owners, collaborating on various projects and helping them bring their ideas to life.
She has made significant contributions to building intuitive user interfaces, seamless web and mobile experiences, and providing practical insights that have helped these businesses grow and succeed.