How to Use Figma: UI Design Tutorial for Beginners

How to Use Figma: UI Design Tutorial for Beginners

Teacher's Tech via YouTube Direct link

Adding an image in Figma

17 of 31

17 of 31

Adding an image in Figma

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

How to Use Figma: UI Design Tutorial for Beginners

Automatically move to the next video in the Classroom when playback concludes

  1. 1 Introduction
  2. 2 What is UI Design
  3. 3 Signup for your FREE Figma account
  4. 4 Quick tour of Figma
  5. 5 Explore the Figma Community for templates
  6. 6 Finding and opening a template in Figma
  7. 7 Tools for modification and design
  8. 8 Rearranging the template
  9. 9 Deleting and naming
  10. 10 Adding frames to start your design
  11. 11 Setting your background color
  12. 12 Adding a shape
  13. 13 Adding a button with text
  14. 14 Naming the button layer
  15. 15 Grouping objects
  16. 16 Adding more text
  17. 17 Adding an image in Figma
  18. 18 Modifying images
  19. 19 Adding a logo
  20. 20 Cropping images
  21. 21 Figma Community - Find iPhone status bar
  22. 22 Adding second frame
  23. 23 Adding and modifying shapes
  24. 24 Curving corners of shapes
  25. 25 Explore Figma Community - Phone icons
  26. 26 Inserting shapes as image placeholders
  27. 27 Adding a circle shape with a stroke around
  28. 28 Adding more phone icons to the design
  29. 29 Adding shapes for image placeholders for multiple images at once
  30. 30 Pause the video here to create a frame on your own
  31. 31 Prototyping your design

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.