Figma for Developers

Learn Figma for creating user interface prototypes. Make shapes and frames that will hold the different pieces of the UI. You’ll also learn how to use reusable styles, typography, and components that you can use to create prototypes to show colleagues or potential customers before you do the engineering work to build the entire application.

• Introduction
• Figma Basics
• Aligning Objects
• Groups & Frames
• Organizing Layout with Frames
• Selecting & Inspecting
• Inspect Tool Exercise
• Inspect Tool Solution
• Shared Styles
• Styler Plugin
• Creating Styles
• Constraints
• Constraints Exercise
• Constraints Solution
• Layout Grids
• Layout Grids Exercise
• Layout Grids Solution
• Auto Layout
• Nesting Auto Layouts
• Nesting Auto Layouts Exercise
• Nesting Auto Layouts Solution
• Components
• Components Exercise
• Components Solution
• Variants
• Variants Exercise
• Variants Solution
• Multiple Components & Swapping Instances
• Swapping Components Exercise
• Swapping Components Solution
• Component Recipe: Notification
• Component Recipe: Data Table
• Component Recipe: Menu Slot
• Prototyping
• Wrapping Up