UI and UX Design with Figma

UI and UX Design with Figma

A Practical, Hands-On Workshop for Designing Modern Digital Experiences - 1 day

Great digital experiences begin with understanding users before creating interfaces. This workshop takes a practical approach to UI/UX design by guiding participants through the complete design process using Figma, from defining user requirements to building interactive prototypes. Rather than focusing on theory alone, participants will design, iterate, and refine a working interface while learning industry techniques used by product teams today.

Delivered by an instructor with over 30 years of industry experience, the course emphasizes practical skills, real-world workflows, and current industry best practices instead of purely academic concepts.

Learning Outcomes

Upon completion of this training, participants will be able to:

• Explain the roles of UI and UX design.
• Apply a user-centered design process.
• Create user flows and basic wireframes.
• Build responsive UI layouts in Figma.
• Create reusable components and styles.
• Develop clickable interactive prototypes.
• Conduct basic usability reviews.
• Apply accessibility and visual design best practices.
• Use selected AI-assisted Figma features to accelerate design tasks.

Prerequisites

• Basic computer skills
• Familiarity with websites or mobile applications
• No prior UI/UX experience required
• Figma account installed or accessible before class

Training Outline

1. UI/UX Fundamentals
   1. UI versus UX
   2. User-centered design
   3. Modern product design workflow
2. Getting Started with Figma
   1. Interface overview
   2. Pages, frames and layers
   3. Layout grids
   4. Auto Layout essentials
   5. Assets and libraries
3. User Experience Planning
   1. Defining users and goals
   2. User journeys
   3. User flows
   4. Information architecture
4. Hands-On Workshop: Wireframing
   1. Sketching screen layouts
   2. Low-fidelity wireframes
   3. Screen hierarchy
   4. Navigation design
5. Hands-On Workshop: UI Design
   1. Typography
   2. Color and spacing
   3. Icons and imagery
   4. Buttons, forms and navigation
   5. Responsive layouts
6. Building a Design System
   1. Components
   2. Variants
   3. Styles and variables
   4. Reusable design patterns
7. Interactive Prototyping in Figma
   1. Linking screens
   2. Interactions and transitions
   3. Prototype presentation
   4. Sharing designs
8. Usability and Accessibility
   1. Heuristic review
   2. Accessibility fundamentals
   3. Design improvements
   4. Iterative refinement
9. AI-Assisted Design in Figma
   1. Generating initial concepts
   2. Accelerating content creation
   3. Rapid iteration techniques
   4. Responsible use of AI in design
10. Capstone Practical Exercise
    1. Design a multi-screen web or mobile interface
    2. Build reusable components
    3. Create an interactive prototype
    4. Peer review and instructor feedback
11. Course Review
    1. UI/UX best practices
    2. Common design mistakes
    3. Industry workflows
    4. Questions and discussion

Disclaimer

This training outline serves as a professional guideline for course delivery. The instructor reserves the right to modify, reorder, expand, or tailor the content, practical exercises, tools, and delivery sequence to accommodate participant experience levels, organizational objectives, available time, and evolving industry practices without prior notice.