Introduction to the Course
  • Introduction to the Course
  • Using the Exercise Files
Learning the Figma Interface
  • Section Introduction
  • What is Figma?
  • Where to find Figma
  • The Browser App vs. The Desktop App
  • The Start Screen
  • Introduction to the Interface
  • Importing and Exporting Files
  • Using Templates
  • The Toolbar
  • The Layers and Pages Panel
  • The Assets Panel
  • The Design Panel
  • The Prototype Panel
  • The Code Panel
  • The Canvas
  • Using Keyboard Shortcuts
  • Working with the Version History
Setting up a new project
  • Creating a New Project and File
  • Importing Sketch Files
  • Working with Teams
  • Working with Templates
Adding and Editing Content
  • Working with Frames
  • Working with Shapes
  • Drawing Icons using the Pen Tool
  • Drawing Shapes Using the Pencil Tool
  • Working with Text
  • Masking Images and Shapes
  • Importing Icons and other Graphics
  • Working with Color
  • Working with Styles
  • Setting up Components
  • Using Constraints for Responsive Design
  • Working with Version Control
Completing the Design
  • Designing a Slide-out Menu
  • Designing an on-screen Overlay
  • Designing a comments section
  • Designing Multiple Artboard States
  • Give this design it's own unique personality
Prototyping, Sharing, and Exporting
  • Creating a prototype
  • Viewing your prototype on a mobile device
  • Live device preview
  • Sharing your design
  • Allowing others to comment on your design
  • Exporting graphics and assets
Conclusion
  • Next Steps