Foundations of Figma Course

Overview

• Superficial Courses: Most Figma courses cover only basic features without practical implementation.
• Course Aim: This course prepares you for the UX design industry with practical homework and resources at the end of each video.
• Structure: The course comprises 10 lectures progressing from basics to advanced levels in Figma.

Lecture 1: Understanding Figma from Scratch

Introduction

• Goal: To teach Figma comprehensively from scratch.
• Content Delivery: Released on website learnuiux.in with upcoming courses and meetups.

Topics Covered

• Why Learn Figma: Importance, age requirements, and necessary equipment.
• Figma UI Basics: Overview of the interface with demonstrations of key clicks and shortcuts.
• Installing Figma: Instructions to install via figma.com or use it on Google Chrome.
• Module Breakdown:
  • Module 1: Basics of Figma UI
  • Module 2: Nuanced details of Figma
  • Module 3: Practical implementation

Figma's Products

• Figma Design: Tool for designing apps and websites.
• FigJam: Tool for brainstorming and note-taking.
• Vector vs. Raster:
  • Vector Graphics: Scale without pixelation, used for logos and illustrations.
  • Raster Images: Pixelate when scaled, e.g., JPEGs and PNGs.

No Coding Required

• Degrees or Background: Not necessary to learn Figma.
• Employment: Knowledge of Figma alone won’t secure a job; requires understanding UX design as a discipline.

Platform Compatibility

• Figma can’t be used for designing on phones or tablets; best on a Windows or Mac laptop.

Pricing Plans

• Free Plan: 3 Figma and 3 FigJam files, unlimited collaborators.
• Professional Plan: For freelancers and companies, offers advanced features.
• Organization Plan: Not needed for beginners.

Figma Navigation

• Creating a Design File: Instructions on how to create and edit files.

Detailed Learning of Figma UI

Constraints and Frames

• Importance of frames over groups and the concept of constraints for responsive design.
• Explanation of horizontal and vertical constraints.
• Practical example: Creating buttons and setting constraints for responsive behavior.

Design Panel and Tools

• Overview of tools: Move, Scale, Frame, Shapes, Pen, Text, Resources, Plugins, and Widgets.
• Alignment and distribution of elements on the canvas.

Typography Panel

• Detailed breakdown of the typography settings including line height, letter spacing, text wrapping, and advanced settings.

Fills and Strokes

• Understanding fills, gradients, strokes, and blending modes.
• Practical example: Application on text and shapes.

Exporting Designs

• Overview of export settings: resolution, formats, naming conventions.

Figma Community

• Introduction to Figma Community: free UI kits, mockups, and resources.
• Applying downloaded Figma files in personal projects for better understanding.

Practical Implementation and Advanced Concepts

Auto Layout

• Advanced use of Figma in creating responsive designs.

Next Steps

• Recommendations to explore Figma's own documentation and starter playlists.
• Importance of documenting learning and progress on platforms like LinkedIn for growing as a designer.
• Engage with community and course resources for maximum benefits.

Upcoming Topics

• Detailed coverage of frames and auto layout in the next lectures.

Final Remarks

• Emphasis on contributing feedback for course improvement.
• Instructions on utilizing notion for taking detailed notes through the course.