Watch One & Only Mobile App UI/UX Design Masterclass with Figma Free Online - Full Video Classroom | MJ Accedemy

Udemy – One & Only Mobile App UI/UX Design Masterclass with Figma 2022-10

Download Course (Free)

Lecture 36/94

00:00/00:00

Lecture 36 of 94

Grids

Download Course (Free)

Course Content

0 / 94 completed

Section 1: Introduction7 videos

Figma Interface Overview

19m

Introduction

Offline Mode

21m

Adjust Figma Interface Size

Desktop vs Browser Version

Download and Install Figma

Canvas Background and Theme

Section 2: Figma Basics11 videos

Navigating around the Canvas

Frame Tool

17m

Slice Tool

MoveScale Tool

PenPencil Tool

15m

Arc Tool

Boolean Operations

Shape Tools

20m

Layers Panel

Custom Thumbnail

Measure distances between objects

Section 3: Image6 videos

Image Tool

Image as a Fill

17m

Import Multiple Images at once

Pasting an Image

Masks

15m

Image Effects

33m

Section 4: Text7 videos

Formatted Lists

Text Tool

22m

Emojis within a Text

Convert Text into a Vector

Creating a Link

Managing Text Styles

10m

Icons as a Text

Section 5: Layout Tools8 videos

Groups

Guides

Smart Selection

Constraints

14m

Grids

20mNow Playing

Nudge Values

Outlines Mode

Auto Layout

1h 30m

Section 6: Styles and Components8 videos

Color Styles

12m

Text Styles

13m

Other Styles

Introducing with Components

11m

Component's Text Property

Component's Boolean Property

Component's Instance Swap Property

Component Variants

34m

Section 7: Collaboration3 videos

Spotlight

Cursor Chat

Comments

13m

Section 8: Useful Resources4 videos

Fonts

10m

Colors

15m

Vectors and other Assets

28m

Interesting Plugins for Figma

46m

Section 9: Tic Tac Toe Game - UI Design Project30 videos

Color Styles for the Project

26m

Text Styles for the Project

Design Systems

27m

Design the Splash Screen

11m

Layout of an Onboarding Screen

18m

Design Onboarding Navigation Component Variants

37m

Design Onboarding Content Component

25m

Design Onboarding Image and Finish it

15m

Layout of a Preparing Screen

11m

Design Loading Progress Component

32m

Preparing Screen - Handle Internet Connection

23m

Design Sign in Screen & Button Component

46m

Design Bottom Bar Component

27m

Design Game History Component

43m

Home Screen - Design Score Component

24m

Design Scoreboard Component

44m

Design an Input Field and a Game History Screen

31m

Design Top Bar Component

35m

Design Date Picker Component

49m

Online Players - Empty State

23m

Online Players - Status & Small Button Components

39m

Online Players - Search Players

23m

Design Scoreboard Screen

38m

Small Button - Different States

37m

Design Friends Screen

25m

Online Players - Bottom Sheet

38m

Design Dialog Component

21m

Design Game Board Component

35m

Game Board - Dark Theme

36m

Finishing the Game Screen

51m

Section 10: Prototyping9 videos

About Prototyping

13m

Flow 2 - Sign in without On Boarding

Flow 1 - On Boarding

31m

Flow 3 & 4 - Preparing Screen

12m

Flow 5 - Home and Scoreboard

23m

Flow 5 - Home and Game History

54m

Flow 7 - Friends

28m

Flow 6 - Online Players

1h 9m

Flow 8 - Game

44m

Section 11: Homework1 videos

Your Homework

15m

About this Lecture

Section: Layout Tools • Size: 44.74 MB • Duration: 20m

Course Summary

One & Only Mobile App UI/UX Design Masterclass with Figma is an interface design and user experience (UI/UX) training course published by Udemy Online Academy. User interface and experience (UI/UX) design refers to the process of designing the user interface (UI) and user experience (UX) of a digital product such as a website, mobile app, or software. The goal of user interface and experience (UI/UX) design is to create a visually appealing, intuitive, and user-friendly interface that enhances the overall experience for users. User interface and experience (UI/UX) design is a dynamic and iterative process that requires a deep understanding of users, effective collaboration, and a commitment to continuous improvement. A well-designed user interface and experience (UI/UX) contributes to user satisfaction, engagement and the overall success of a digital product. In this training course, you will learn how to use Figma for UI/UX design.At the beginning of this training course, you will get to know the basic concepts and principles of Figma and understand its features. Then you will learn practical work with this tool. In the continuation of this training course, you will face a project that will help you to practically implement the topics you have learned during the training course. In this project, you will get to know how to make various themes and on and off modes, and you will learn how to make reusable ones. This training course is recommended for Android and iOS application designers, interface and user experience (UI/UX) designers, and people who want to learn how to work with Figma.

Course Content

0 / 94 completed

Section 1: Introduction7 videos

Figma Interface Overview

19m

Introduction

Offline Mode

21m

Adjust Figma Interface Size

Desktop vs Browser Version

Download and Install Figma

Canvas Background and Theme

Section 2: Figma Basics11 videos

Navigating around the Canvas

Frame Tool

17m

Slice Tool

MoveScale Tool

PenPencil Tool

15m

Arc Tool

Boolean Operations

Shape Tools

20m

Layers Panel

Custom Thumbnail

Measure distances between objects

Section 3: Image6 videos

Image Tool

Image as a Fill

17m

Import Multiple Images at once

Pasting an Image

Masks

15m

Image Effects

33m

Section 4: Text7 videos

Formatted Lists

Text Tool

22m

Emojis within a Text

Convert Text into a Vector

Creating a Link

Managing Text Styles

10m

Icons as a Text

Section 5: Layout Tools8 videos

Groups

Guides

Smart Selection

Constraints

14m

Grids

20mNow Playing

Nudge Values

Outlines Mode

Auto Layout

1h 30m

Section 6: Styles and Components8 videos

Color Styles

12m

Text Styles

13m

Other Styles

Introducing with Components

11m

Component's Text Property

Component's Boolean Property

Component's Instance Swap Property

Component Variants

34m

Section 7: Collaboration3 videos

Spotlight

Cursor Chat

Comments

13m

Section 8: Useful Resources4 videos

Fonts

10m

Colors

15m

Vectors and other Assets

28m

Interesting Plugins for Figma

46m

Section 9: Tic Tac Toe Game - UI Design Project30 videos

Color Styles for the Project

26m

Text Styles for the Project

Design Systems

27m

Design the Splash Screen

11m

Layout of an Onboarding Screen

18m

Design Onboarding Navigation Component Variants

37m

Design Onboarding Content Component

25m

Design Onboarding Image and Finish it

15m

Layout of a Preparing Screen

11m

Design Loading Progress Component

32m

Preparing Screen - Handle Internet Connection

23m

Design Sign in Screen & Button Component

46m

Design Bottom Bar Component

27m

Design Game History Component

43m

Home Screen - Design Score Component

24m

Design Scoreboard Component

44m

Design an Input Field and a Game History Screen

31m

Design Top Bar Component

35m

Design Date Picker Component

49m

Online Players - Empty State

23m

Online Players - Status & Small Button Components

39m

Online Players - Search Players

23m

Design Scoreboard Screen

38m

Small Button - Different States

37m

Design Friends Screen

25m

Online Players - Bottom Sheet

38m

Design Dialog Component

21m

Design Game Board Component

35m

Game Board - Dark Theme

36m

Finishing the Game Screen

51m

Section 10: Prototyping9 videos

About Prototyping

13m

Flow 2 - Sign in without On Boarding

Flow 1 - On Boarding

31m

Flow 3 & 4 - Preparing Screen

12m

Flow 5 - Home and Scoreboard

23m

Flow 5 - Home and Game History

54m

Flow 7 - Friends

28m

Flow 6 - Online Players

1h 9m

Flow 8 - Game

44m

Section 11: Homework1 videos

Your Homework

15m