Figma Essentials Course Notes

Introduction

• Instructor: Dan Scott
• Course Overview: Learn UX Design using Figma from scratch
• Course Goals:
  • Create beautiful interfaces
  • Build engaging prototypes
  • Understand real-world UX expectations

Course Structure

1. Start with UX persona and brief
2. Create wireframes
3. Implement colors and images in Hi-Fidelity mockups
4. Font selection for web and mobile apps
5. Create UI components (icons, buttons, etc.)
6. Learn about components, constraints, and variants
7. Utilize free UI kits and plugins
8. Build a style guide for hand-off
9. Create micro-interactions and animations
10. Prepare interactive prototypes for user testing
11. Collaborate with team members and export files

Course Requirements

• Download exercise files and print shortcut sheet
• Use the free version of Figma throughout the course
• Keep an eye out for Figma updates and changes

Understanding Figma

• Figma Features:
  • Excellent for rapid prototyping of websites and apps
  • Allows for quick changes based on user testing
  • Cannot code directly but produces design files for developers

UI vs. UX

• UI (User Interface):
  • Focuses on how a product looks
• UX (User Experience):
  • Focuses on how a product works
  • Involves testing and user feedback

Getting Started with Figma

• Download Figma and set up your exercise files
• Create your first design file and establish frames
• Importance of wireframes before Hi-Fidelity designs
• Wireframes Characteristics:
  • Basic layout without distractions (colors, images)
  • Focus on user flow and task flow

UX Design Concepts

• User Persona:
  • Represents target user, helps guide design decisions
• Task Flow:
  • Step-by-step process for user tasks

Designing in Figma

• Use frames as pages or artboards
• Implement basic shapes, rectangles, circles, and text
• Learn about layers and how to organize them

Prototyping

• Transition between frames using interactions
• Set up transitions (Instant, Dissolve, Move In)
• Easing Options:
  • Ease In, Ease Out, Ease In and Out

Collaboration and Sharing

• Use Figma Mirror to test prototypes on mobile devices
• Share prototypes with clients and team members through links
• Set permissions for editing and commenting

Class Projects

• Create your own brief based on a project generator
• Design wireframes and Hi-Fidelity mockups
• Test and gather feedback from peers or stakeholders

Conclusion

• This course provides a foundation in Figma and UX design
• Additional resources and links provided for continued learning
• Encouragement to practice and experiment with Figma features