Learn Figma In 14 Days Master Ui Ux And Prototyping

Quickly learn Figma to Design and Prototype an awesome looking Mobile App with screen transitions and hone UI UX Skills

Last updated 2022-01-10 | 4.4

- Introduction to Figma interface
- tools and tips to improve your design workflow
- Create Clickable interactive Prototypes with transition effects in Figma
- Wireframe and Design your own App idea using Figma

What you'll learn

Introduction to Figma interface

tools and tips to improve your design workflow

Create Clickable interactive Prototypes with transition effects in Figma

Wireframe and Design your own App idea using Figma

Understand usage of Layout Grid and Guides in User Interface Design

Use auto-animate in Illustrations or across two screens(artboards)

Common Shortcut keys to quickly learn Figma Tool

Design Collaboration with other Team members using Team Libraries

* Requirements

* Just a learning mindset

Description

Figma is one of the most powerful UI and UX Design tool that can even run in your browser. Figma’s power is hidden in its being cross-platform and its Collaboration feature where you can easily collaborate with other Designers and Developers. It works seamlessly on Windows and Mac Operating Systems with a Desktop Application. In recent times, it is one of the most powerful and popular User Interface Design App due to being a Cloud based App (saves your file version history) and its FREE to use too

This course will teach you all about User Interface Designing and also adding interactivity to your Designs with powerful prototyping features of Figma. First, we will learn about the basic tools, common keyboard shortcuts and familiarizing ourselves with the Figma’s interface.

Once you have solid basics, we will move on to Auto Layout, Responsive design and few advance things like viewing your Prototype live on an actual Mobile Device. I will show you everything step by step.

We will design together the User Interface and then the prototype of a “Recipe App called YUMMS” from the scratch and make it into a pro level design by multiplying Artboards, using reusable Styles and Components.

If you are Beginner in UI UX Design or a seasoned UI/UX Designer trying to switch from Sketch or Adobe XD, please join me in this learning experience.

Who this course is for:

Beginner Designers
Novice Designer
User Interface Designers
UX Designers
Newbies in the field of UI/UX design
Web Designers

Course content

5 sections • 61 lectures

Introduction 7 lectures

Introduction to the Course Preview 01:55

Introductory video for this Figma Course

Download and Install Figma App Preview 04:46

How to create account on Figma and how to download Figma's Desktop app for Windows or MAC

Figma's Interface and Hierarchy of Teams and projects Preview 09:08

Get familiar with Figma teams, projects, files, pages etc...its interface mainly

Important mesasge from Instructor Preview 01:46

How to ask me questions and how to learn with discussion

Assets, Pages Interface in Detail Preview 06:49

Inside a Project interface of Figma, assets, layers panel, code panel, design and prototype panels

Download Course Resources and Exercise Files Preview 00:04

Download all the exercise files, assignments, images and fonts used

Using Resources Files in your Figma Assignments Preview 02:48

How to use resources folder to submit your assignments

Master Basics of Figma tools 21 lectures

Frames and Artboards Preview 07:37

Using and managing Frames or Artboards in Figma

Figma Basic Tools Preview 12:56

Basic tools of Figma like Ellipse, Rectangle, lines and Arrow

Type Tool Preview 06:46

Type tool in figma to have better control on typography for your UI Designs

Pen Tool Preview 09:13

How to use pen tool in Figma to create basic shapes and Icons

Place Image Tool Preview 07:47

How to use Place image tool and how to speed up your workflow with images in Figma

Comment and Hand Tools Preview 05:07

Hand, Pencil and comment tools in Figma

Master Fill Colors in Figma Preview 07:46

How to use Fill color tool in detail? How to implement linear gradients and other types of gradients in Figma

► Gradient Button Assignment

Create two buttons with two different Color Gradients

Masking in Figma Preview 05:33

How to use Masks to hide and show the areas of your design or images in Figma

► Masking Image Assignment - Introduction please

Create your introduction screen by using Masking in your image and write few sentences about yourself

Creating reuseable Styles in Figma Preview 08:22

How to create styles guides and reusable styles in Figma for your colors, gradients, shadows and text, all kinds of styles

Applying Effects - Inset, Drop shadow etc.. Preview 09:46

How to use Drop shadow, inner shadow and other effects in Figma to your fullest

► Make 3 buttons by using Shadows and Effects

Create 3 different button styles by using Shadows and Effects

Components in Figma for UI Design Preview 09:10

Components are the major building block of any UI Design system so here you will learn how to create a component and then use it again and again in Figma

Constraints with Components in Figma Preview 05:45

How to use Constraints with Components to create responsive buttons and elements for User Interface Design within Figma

Common Shortcut Keys Part 1 Preview 06:52

Most commonly used Figma shortcut keys so you can pick up speed using this App

Common Shortcut Keys Part 2 Preview 10:55

Most commonly used Figma shortcut keys so you can pick up speed using this App

Collaboration with Other Designers in Figma Preview 02:49

How to invite other team members in Figma and how two designers can work simultaneously

Figma learning Quiz

Lets see how much you have learned so far

Share Team Libraries in Figma Preview 13:03

How to use Shareable Team Libraries when working in a team - Share your design assets and Style guide across team in Figma

Community Tab in Figma - NEW FEATURE Preview 07:45

Latest addition, use UI Kits and Design Resources in your designs by duplicating them. Follow and share love in Figma Community

Must learn things in Figma for UI UX Designers 7 lectures

Using Guides, Global guides and layout Grid in Figma Preview 09:41

How to use Local and Global Guides and layout Grid in UI Design

Auto Layout in Figma Preview 05:23

One of the advanced feature of Figma which is Auto Layout. Learn how to create auto expanding buttons in Figma with just low effort

Groups vs Frames in Figma - When to use groups or Frames Preview 11:15

When to use groups and when to use frames in Figma. Major difference between Groups and Frames

Variants in Figma Preview 08:10

Latest feature of Figma which is variants with your components

Advance use of Variants inside Figma App Preview 05:55

Advance use of variants in Figma

Exporting Design Assets and Images Preview 09:16

How to export images and assets if your designing for IOS or Android Devices. When to use SVG, JPG or PNG image formats

Creating Bootstrap Grid in Figma for Website Design Preview 00:04

How to create Bootstrap 4 Website Grid in Figma

Prototyping in Figma 8 lectures

Basics of Prototyping - Linking Screens, transitions and Overlays Preview 11:36

Basics of prototyping inside Figma. How to link screens together and how to pop up an overlay with using auto-animate transitions

► Basics of Prototyping Assignment

Link 3 screens by using Auto animate and pop up one screen by using overlays

Swapping Overlays, Time Delays in Prototyping Preview 09:33

How and when to use Swap with action in Figma and how to use Time delays with pop ups or feedback chips

On Drag and how to use Hoirzontal Scroll in Figma Preview 12:21

How to use On Drag action in Figma's prototypes and how to enable a horizontal scroll inside a container

► Drag and Horizontal Scroll Assignment

Use on Drag and also use Horizontal scroll in a prototype and share the link with me

While Hovering Figma Prototype - Hover on Links and Buttons Exercise Preview 07:11

How to show hover over links and buttons transitions to your developers?

Scroll to animation in Figma Preview 08:46

How to use Scroll to in Prototyping using Figma

Figma Mirror - How to live preview your Design on actual Device Preview 05:26

How to preview your Prototype of your App live on an actual Device. Will show you the real screen of an actual device

UI UX Design of Yumms Recipe App - Wireframe, Design and Prototype 18 lectures

Plan your Design - Wireframes and Inspirations Preview 08:17

Wireframes is the last part of UX Design and first part of UI Design, so here I will discuss on how to create Wireframes and how to use design inspirations. What was my plan behind this design

Layout Grid and Guides preperation for your Mobile App Design Preview 07:27

Laying out guides and grid to further build up our Yumms Mobile App Design

Design Login Screen Preview 18:17

User Interface Design of Login Screen for Yumms Recipe App

Designing Meals Screen Part 1 Preview 19:10

Designing the main Meals screen and sliding top navigation in Figma

Designing Meals Screen Part 2 Preview 09:54

Designing the main Meals screen content and featured recipes section

Designing Meals (Home Screen) Part 3 Preview 25:32

Designing the UI of Desserts screen of the main meals section

Designing Salads Screen Part 4 Preview 04:21

Duplicating Screens and creating more screen by using Components and replacing image fills

Designing Meals (Healthy Screen) Part 5 Preview 02:19

Creating Healthy recipe screen with the top menu bar that moves right with this screen

Prototyping Meals, Desserts, Healthy Recipe Screen - Sliding Menu animations Preview 11:42

Creating Sliding menu and auto-animating images of recipes in Figma. Adding interactivity to your Static Interface

Design Search Filters Part 1 Preview 08:33

UI Design for the search filters for food allergies and diet plans

Design and Prototype Search Filters Transitions Part 2 Preview 15:55

Design the second selected filters screen along with filter selection transition animations

Designing Search Results Screen of your Recipe App in Figma Preview 14:25

After search is pressed, search results will popup and this is where that magic happens in Figma

Single Recipe Screen Design Preview 27:42

Design the single recipe screen with inner sub section of Ingredients and Preparation

Single Recipe Screen Design and Prototype Preview 15:10

Design Single recipe App and prototype the transition between main screen and recipe screen using Figma

Review Overlay Design and Prototyping Preview 10:06

How to use Overlay pop up and how to show and hide it with Prototyping using Figma App

► Final 6 to 10 Screens App Design challenge

Create your own App concept design and prototype it and share the link with me Use minimum 6 screens

Figma New Features and Updates on my YouTube Channel Preview 00:04

Whats Next Preview 01:04

Whats next to learn from me