SP26 - Figma Foundation Workshop

SP26 - Figma Foundation Workshop Pratt Institute - School of Information (Note: To make the video easy to follow, we’ve edited the clips. For more details, please refer to the slide and the lecture summary document.) ⌛ Time Notes 00:00:00 Opening & Agenda (No Sound) 00:00:10 Why Figma 00:01:55 Where Figma Fits in the Design Process 00:04:40 The Statistical Reality of Industry 00:06:00 Understanding Key Elements 00:14:35 Let's Practice 00:18:00 Create Button Components 00:42:55 Create Card Components 00:59:00 Create a Navigation Bar 01:05:00 Consolidate the Elements into the Screen 01:10:30 Connecting the Screen 01:13:38 Common Beginner Mistakes to Avoid 01:16:10 Key Takeaway 01:16:43 Quick Quiz 01:17:45 Quiz 1 01:18:03 Quiz 2 01:18:25 Quiz 3 01:18:42 Quiz 4 01:19:01 Quiz 5 01:19:28 Upcoming Events 01:20:12 Ending ------------------------------------------------------- 🧑‍💻 From Blank Canvas to Polished Prototype Overview: Figma is the industry-standard tool for collaborative interface design, but its power lies in understanding the "how" and "why" behind its features. This foundational workshop is designed to take the intimidation out of digital design. We’ll move beyond simple clicking and dragging to help you build a structured, professional workflow that prepares you for real-world design challenges. --------------------------------------------------------- 💻 What You’ll Learn? The Figma Ecosystem: Navigating the interface, understanding the "Infinite Canvas," and managing layers without the mess. • The Power of Frames: Moving beyond "Groups" to understand how Frames act as the essential building blocks for responsive design. • Vector Networks & Shapes: Mastering the Pen tool and boolean operations to create custom icons and UI elements. • Typography & Color Styles: How to create a "Single Source of Truth" by setting up global styles for consistency across your project. • Intro to Auto Layout: A first look at Figma’s "magic" feature that allows your designs to grow, shrink, and reflow automatically. Prototyping Basics: Connecting frames with simple transitions to turn static screens into an interactive experience. --------------------------------------------------------- 🙋 Who This Is For? Complete Beginners: Students with zero experience in Figma. • The "Self-Taught": Those who have used Figma but feel their workflow is "messy" and want to learn best practices. • Analog Designers: Print or physical designers looking to translate their skills into the digital space. --------------------------------------------------------- ✏️ Key Takeaway By the end of this session, you won’t just have a file full of shapes—you’ll have a functional, organized design foundation and the confidence to start building your own digital products or portfolios.