Introduction to Figma

Figma is a collaborative design tool used for creating user interfaces, website designs, and app prototypes. It allows multiple users to work simultaneously on a project, making it the industry-standard for UI works and collaboration.

Course Objectives

The primary objective of this course is to provide students with a comprehensive introduction to Figma, covering all the following areas:

  1. Interface and Tools
    Students will become familiar with the Figma interface and learn how to navigate the various tools and features available.

    1. What are Pages
    2. What are the differences between Frames and Groups
    3. What is Auto Layout
    4. What are components and how to set up a component library
    5. What are assets and how to use them effectively
  2. Design Principles
    The class will explore the fundamental principles of design, including composition, typography, and user experience design.
  3. Prototyping
    Students will learn how to create interactive prototypes using Figma’s prototyping feature, enabling them to simulate user interactions and test their designs.

    1. What are the different Interactions?
    2. How do you implement Overlays into your design?
    3. What are the different Animation Transitions? How do you capitalize on Smart Animate?

  4. Collaboration and Community
    Figma’s collaborative capabilities will be emphasized, teaching students how to work effectively in teams and capitalize on Figma’s community market.

    1. Where do you find Icons and Templates?
    2. What are UI Kits and Design Systems and how do you use them?
    3. How do you use Plugins?

  5. Real-World Applications
    Throughout the course, students will engage in practical exercises and projects to apply their newfound knowledge of Figma to real-world scenarios, such as but not limited to designing a website and/or mobile app interface all the way to posters and presentations.


Benefits for Students

  1. Practical skill development
    Students will acquire a valuable skill set in visual design, prototyping, and collaboration, which can enhance their academic and professional pursuits.
  2. Creativity and problem solving
    Figma fosters creativity and critical thinking by challenging students to find innovative solutions to design problems.
  3. Career exploration
    This class will expose students to the field of design and inspire them to consider design-related career paths in the future, such as Human Computer Interaction.

Portfolio building
By understanding how to use Figma, students are able to produce projects and build websites to aid in academic and professional developments.

Class Requirements

Prerequisites: No prior experience in design or Figma is required. This class is suitable for beginners who have a keen interest in visual design and digital creativity.

Equipment: Students will need access to a computer or laptop with an internet connection. Figma is a web-based application, and no installation is required. (Figma has a desktop application that students can download on both Mac and Windows, if that is what you prefer. The instructor would be primarily using the desktop application.)


Margaret Lu is an upcoming MHCI graduate student at Carnegie Mellon University and recent graduate from Georgia Institute of Technology with a BS in Industrial Design who has won multiple awards including but not limited to:

  • IDSA IDEA Contest, Final Round (In-progress), May 2023
  • IDEA Education Papers, In-progress, May 2023
  • IDSA Student Merit Award, School Finalist, March 2023
  • Launchpad Spring 2022, Best Project, May 2022
  • Launchpad Spring 2019, Best Project, May 2019
  • Stanford University Innovation Fellows, Lifelong Fellow, January 2019

She has extensive knowledge and practical experience with Figma, having used it in various professional projects at Design Bloc and NCR. Moreover, she has taught other design software in the Adobe CC suite prior at Springlight Education Institute like Photoshop and Illustrator.