Learn Figma - UI/UX Design Essential Training
Course description
Figma is a very powerful application that runs online. There are virtually no platform boundaries when it comes to using figma because you can design within a web browser or using their desktop application made for windows and macs. Figma is similar to Sketch and Adobe XD but is the more powerful of the three when it comes to team collaboration and responsive, fast paced design.
Read more about the course
This course will cover user interface designing using the powerful tools within Figma. In the first section, I'll cover the Figma interface and where you can find powerful tools like constraints to make your designs responsive, and components to build a library of design elements to use throughout your projects. I'll also go over real-time team collaboration and how you can use figma to work closely with others in the same project.
Later on I will guide you through designing and prototyping a "Chef's Recipes" App which will include multiple artboards, custom icon designs, editing images and text, and everything else you need to create a polished realistic design.
Please join me as a beginner in design or as a seasoned UI/UX designer wanting to switch from other tools like Sketch or Adobe XD
- Internet Access
- You should know your way around computer basics
- User Interface designers
- Web Designers
- Graphic Designers
- UX Designers
- Beginners looking to get into the UI/UX field
What you'll learn:
- Design Websites
- Design mobile and desktop apps
- You will have a fully interactive design and prototype at the end of this course
- You will learn how to reuse design elements for future projects
Watch Online
| # | Title | Duration |
|---|---|---|
| 1 | Introduction to the Course | 00:35 |
| 2 | Using the Exercise Files | 01:07 |
| 3 | Section Introduction | 00:19 |
| 4 | What is Figma? | 00:49 |
| 5 | Where to find Figma | 00:31 |
| 6 | The Start Screen | 01:22 |
| 7 | The Menu Bar | 17:01 |
| 8 | The Tools Panel | 13:22 |
| 9 | The Layers and Pages Panel | 05:55 |
| 10 | The Components Panel | 03:56 |
| 11 | The Team Library Panel | 06:30 |
| 12 | The Design Panel | 12:02 |
| 13 | The Prototype Panel | 02:58 |
| 14 | The Code Panel | 02:32 |
| 15 | Creating a New Project and File | 01:39 |
| 16 | Importing Sketch Files | 02:46 |
| 17 | Working with Teams | 03:42 |
| 18 | Working with Templates | 01:45 |
| 19 | Working with Frames | 06:06 |
| 20 | Working with Shapes | 17:59 |
| 21 | Drawing Icons using the Pen Tool | 07:49 |
| 22 | Drawing Shapes Using the Pencil Tool | 03:44 |
| 23 | Working with Text | 07:34 |
| 24 | Masking Images and Shapes | 06:39 |
| 25 | Importing Icons and other Graphics | 07:47 |
| 26 | Working with Color | 06:28 |
| 27 | Working with Styles | 06:15 |
| 28 | Setting up Components | 20:51 |
| 29 | Using Constraints for Responsive Design | 10:30 |
| 30 | Working with Version Control | 02:05 |
| 31 | Designing a Slide-out Menu | 03:54 |
| 32 | Designing an on-screen Overlay | 11:49 |
| 33 | Designing a comments section | 12:29 |
| 34 | Designing Multiple Artboard States | 05:17 |
| 35 | Give this design it's own unique personality | 03:20 |
| 36 | Creating a prototype | 06:46 |
| 37 | Viewing your prototype on a mobile device | 00:44 |
| 38 | Live device preview | 01:13 |
| 39 | Sharing your design | 01:19 |
| 40 | Allowing others to comment on your design | 01:17 |
| 41 | Exporting graphics and assets | 04:05 |
| 42 | Next Steps | 00:35 |
Comments
0 commentsSimilar courses
Complete Web Design: from Figma to Webflow to Freelancing
Design a Responsive Airbnb Website with Figma
Advanced Figma Video Course + Let's Design Together Add-on
Mastering Figma
Want to join the conversation?
Sign in to comment