Physical ClassesProfessional Software & IT Training at Techbolic Faisalabad
UI/UX Product Design with Figma Course

UI/UX Product Design with Figma Course

Course Fee:

PKR 30,000

PKR 50,00040% OFF

Additional Details:

Level

Beginner to Intermediate

Duration

56 days

Qualification

Any Background / Creative Mindset

Seats Left

30

Complete the registration form below to secure your seat in UI/UX Product Design with Figma Course. Our admissions team will review your application and reach out with enrollment details.

Course Description

  • Master UI/UX design thinking from user research to production-ready interface designs.
  • Master Figma tools: Auto Layout 5.0, Component Sets, Variants, and Nested Properties.
  • Build comprehensive, scalable Design Systems with Design Tokens, Color Palettes, and Typography.
  • Create low-fidelity wireframes, interactive user flows, and site architecture maps.
  • Design state-of-the-art Web and Mobile interfaces (iOS Human Interface Guidelines & Android Material 3).
  • Craft advanced interactive prototypes with Smart Animate, Variables, and Micro-interactions.
  • Perform usability tests, evaluate user feedback, and optimize product conversion funnels.
  • Master developer handoff practices for smooth transition to frontend engineers.
  • Build a standout Behance & Dribbble case study portfolio to land high-paying clients and jobs.

What you'll learn in this course?

Master UI/UX product design in Figma in an intensive 8-week bootcamp. Learn Auto Layout, design systems, interactive prototypes, and portfolio creation.

Figma Mastery: Core Tools & Layout Architecture

  • Figma canvas navigation, frames, sections, and artboards
  • Vector networks, boolean operations, masks, and pen tool mastery
  • Setting up responsive 8pt / 4pt grid systems for Web and Mobile
  • Mastering Auto Layout directions, padding, gap, and alignment
  • Resizing modes: Hug Contents, Fill Container, and Fixed dimensions
  • Building flexible cards, navigation bars, and complex dynamic layouts

Visual Design, Typography & Color Systems

  • Selecting and pairing modern typefaces for digital screens
  • Modular type scales, line heights, letter spacing, and contrast
  • Creating reusable text styles in Figma
  • Primary, secondary, neutral, and semantic feedback color palettes
  • Accessibility standards (WCAG 2.1 AA/AAA compliance) and color contrast
  • Designing Dark Mode color schemes and variable styles

Building Scalable Design Systems in Figma

  • Creating master components and reusable component instances
  • Component properties: Boolean toggles, Instance swap, and Text properties
  • Building complex variants for buttons, inputs, modals, and tabs
  • Implementing Design Tokens for colors, spacing, radius, and modes
  • Figma Variables for light/dark mode switching and dynamic string values
  • Publishing and maintaining shared Figma Team Libraries

Advanced Interactive Prototyping & Micro-interactions

  • Connecting frames with triggers: On Click, On Hover, While Dragging, After Delay
  • Mastering Smart Animate transitions, easing curves, and duration
  • Building animated dropdowns, sidebars, swipe cards, and bottom sheets
  • Component-level states: Hover, Active, Focus, Disabled, Loading
  • Conditional prototyping logic using Figma Variables and Expressions
  • Recording video previews and presentations of interactive flows

UX Foundations, Design Thinking & Research

  • The role of a UI/UX designer and the 5 stages of Design Thinking
  • Understanding user-centered design and business goals
  • Competitive analysis, problem statements, and heuristic evaluations
  • Conducting qualitative and quantitative user interviews and surveys
  • Creating detailed User Personas and Empathy Maps
  • Mapping User Journey Maps and identifying pain points

Capstone Real-World Product Design Project

  • Applying iOS Human Interface Guidelines and Material 3 design patterns
  • Designing full onboarding, dashboard, transaction, and profile flows
  • Designing responsive desktop Web counterpart dashboards
  • Running usability testing sessions with prototype links
  • Collecting qualitative feedback and identifying usability friction points
  • Iterating designs based on user insights and quantitative metrics

Information Architecture & Wireframing

  • Site mapping, content hierarchy, and navigation structures
  • Card sorting techniques for intuitive taxonomy
  • Designing step-by-step user flows and task flows in Figma
  • Paper sketching and rapid wireframe ideation
  • Translating concepts into structured mid-fidelity digital wireframes
  • Validating structure and hierarchy before visual styling

Developer Handoff & Standout Portfolio Creation

  • Figma Dev Mode, CSS/Swift/Flutter code inspection, and asset exporting
  • Redlining design specs, spacing rules, and edge cases for engineers
  • Collaborating with engineering teams using Jira, Linear, and Loom
  • Structuring storytelling UX case studies: Problem, Research, Solution, Impact
  • Creating stunning 3D mockups and presentation slides
  • Crafting a standout portfolio to secure freelance clients and design roles

Course Fee:

PKR 30,000

PKR 50,00040% OFF

Additional Details:

Level

Beginner to Intermediate

Duration

56 days

Qualification

Any Background / Creative Mindset

Seats Left

30

Complete the registration form below to secure your seat in UI/UX Product Design with Figma Course. Our admissions team will review your application and reach out with enrollment details.

Other Courses

Full-Stack Ruby on Rails Web Development Course

Full-Stack Ruby on Rails Web Development Course

Master full-stack web development with Ruby on Rails 8, Hotwire, PostgreSQL, and modern deployment in an 8-week intensive bootcamp.
Flutter Mobile App Development Course

Flutter Mobile App Development Course

Master Flutter and Dart mobile app development in an intensive 8-week bootcamp. Build real-world apps with state management, Firebase, and store deployment.