Lecture: Foundations of Figma

Introduction

• Issue with most Figma courses: Superficial, only covering basic features without practical implementation or use cases.
• Course Goal: Teach Figma from scratch to advanced levels, preparing students for UX design industry work.
• Structure: 10 lectures with homework and resources at the end of each video, focusing on practical and actionable learning.

Lecture 1: Understanding Figma from Scratch

• Website: All modules will be available on learnUIux.in for people aiming to build better products (product managers, designers, and developers).

Course Overview

• Module 1: Basics of Figma UI and why learning Figma is important.
• Module 2: Beyond basics, nuanced details about Figma interface.
• Module 3: Practical implementation to understand real application of Figma.
• Setup: Use figma.com, install Figma on a computer or use it on Google Chrome for full functionalities.

Module 1: Basics of Figma UI

Figma Products

• Figma Design: Design apps, websites, brochures.
• FigJam: For brainstorming, research, and collecting notes.

Raster vs. Vector Graphics

• Raster Graphics: JPEGs, PNGs that get pixelated upon zooming in.
• Vector Graphics: Does not pixelate upon zooming in; used for logos and digital illustrations.

Practical Considerations

• Laptop Requirements: Any decent laptop (Windows or Mac) can run Figma.
• Offline vs. Online: Choose based on internet connectivity; online via Google Chrome is recommended for fast switching between tabs.
• Collaboration: Multiple users can work on a single Figma file in real time.

Pricing Plans

• Free Plan: 3 Figma and 3 FigJam files, unlimited collaborators, and access to plugins and templates.
• Professional Plan: Recommended for freelancers and companies.
• Organization Plan: Advanced, not needed for beginners.

Practical Sessions

• Creating Your First File: Demonstration of creating a blank Figma file, frames, and objects.

Module 2: Beyond Basics of Figma

Constraints in Figma

• Horizontal and Vertical Constraints:
  • Align elements within parent containers or responsive design applications.
  • Center, Top, Bottom, Left, Right, Scale and their purposes.

Practical Examples Using Constraints

• Examples of applying constraints on app designs and buttons to make them responsive.
• Contraints enable elements to dynamically respond to changes in screen size.

Layers and Navigation

• Layers Panel: Organize elements.
• Constraints Panel: Responsive design parameters
• Sorting and Batch Renaming: Manage multiple elements and frames for efficient workflow.
• Shortcuts: Enter, Tab, Return for navigating layers; Shift + Enter to ascend layers.

Practical Use of Figma Community

• Free Design Systems and UI Kits: Explore and utilize free resources available in Figma Community.

Module 3: Practical Implementation

• Real Project Application: Illustrations of using Figma in real projects with frames, buttons, and typographic considerations.

Exporting Options

• Explaining export settings, suffixes, resolutions to ensure high-quality outputs.
• Use of svgs for icons, 2X resolution for outputs.

Advanced Topics and Features

• Typography Panel:
  • Text styles, typefaces, font weights, sizes, line heights, letter spacing, text wrapping.
• Fills and Strokes: Layer visibility modes, gradients, images, and video fills.
• Export Options: Different formats and resolutions, naming conventions for organized exports.

Homework and Next Steps

• Comment Feedback: Suggestions for next videos.
• Documentation and Learning: Figma documentation, experimenting with constraints and UI kits.
• Sharing Progress: Encourage documenting learning and sharing on LinkedIn.
• Upcoming Lectures: Next topic will be on frames and auto layout.

Closing Remarks

• Encouragement to stay committed and complete the course.
• Importance of documenting learning and sharing achievements.
• Mention of advanced topics and resources that will be covered in future lectures.