Introduction to Figma Basics and Features

Oct 6, 2024

Foundations of Figma: Lecture 1 - Understanding Figma from Scratch

Course Overview

  • Most Figma courses are superficial, covering only basic features without practical implementation.
  • Foundations of Figma aims to prepare students for real UX design industry work.
  • Practical content with homework and resources at the end of every video.
  • Course Structure:
    • 10 lectures from basic to advanced levels.
    • Goal: Understand UX design applications and functionality of Figma.

Lecture Content

Lecture Objectives

  • Understand the necessity of learning Figma.
  • Discuss age and degree requirements.
  • Overview of the Figma UI and its components.
  • Explain the installation process and system requirements.

Figma Products

  • Figma has two main products:
    1. Figma Design: For designing apps, websites, brochures, etc.
    2. FigJam: For brainstorming, research, and note collection (not covered in this course).

Raster vs. Vector

  • Raster images (e.g., JPEG, PNG): Get pixelated when zoomed in.
  • Vector graphics: Do not pixelate when zoomed in; used for logos and digital illustrations.
  • Figma primarily utilizes vector graphics.

System Requirements to Learn Figma

  • No specific degree required; people from any background can learn.
  • Knowledge of coding is not necessary.
  • Recommended to use a laptop (Windows or Mac).
  • Figma can be used as a standalone application or through a web browser (e.g., Google Chrome).

Figma Pricing Plans

  • Free Plan: Up to 3 Figma design files and unlimited collaborators.
  • Professional Plan: Recommended for freelancers and organizations, providing advanced features.

Getting Started with Figma

Creating Your First Figma File

  • Visit figma.com to create an account and download the application.
  • Access your account to create design files.

Figma UI Overview

  • Canvas: Central area for designing.
  • Frames: Used to structure designs (like artboards).
  • Layers Panel: Displays the hierarchy of design elements.

Introduction to the Toolbar

  • Move Tool: For moving and scaling objects.
  • Frame Tool: Used to create frames for designs.
  • Shape Tool: Allows creation of rectangles, ellipses, and polygons.
  • Text Tool: For adding text elements.

Basic Features Explained

  • Alignment Tools: Align elements relative to parent containers or each other.
  • Distribution Tools: Evenly space multiple selected items.

Conclusion

  • Emphasis on hands-on practice: Experiment with Figma features, utilize resources from Figma Community.
  • Homework: Document learnings using Notion, engage with Figma documentation and community.
  • Encourage sharing the course and providing feedback for future lectures.
  • Next Lecture: Focus on frames and auto layout.