Mô tả

You will learn how to create beautiful mobile & web user interfaces that you can then turn into live prototypes with the help of Figma.


Figma is a leading design software, helping teams and individuals create designs faster and more efficiently. Figma is free and you can use it right on your web browser, on Mac and Windows.


[NEW] This course has been updated for 2022 to include all the latest Figma Features for your convenience and to keep the course fully up to date with Figma.


Is this course for you?

You're in the right place if any of these apply to you:

  • You’re interested in user interface & user experience design (UI/UX) but not sure where to start.

  • You’re an entrepreneur with an app idea and want to turn your idea from a sketch to a realistic mockup and prototype.

  • You want to brush up your design skills to get the job that you want at companies like Airbnb, Google, Apple, etc.

  • You’re already designing and want to jump into Figma and take your designs to the next level.

  • You’re interested in earning income as a freelance designer.

  • You simply want to enter a new career path, and graphic design has interested you.


By the end of this course:

You will have learned the many great tools Figma has to offer and you will be able to design engaging mobile and web mockups, that you can turn into live interactive prototypes, for your own projects or for your clients.


What do I need?

This course is for both beginners & experienced designers looking to expand their skills.
All you need is a computer and a web browser.

About your instructor:

This course is taught by entrepreneur & designer Nima Tahami. Nima has more than 10 years of experience designing and developing dozens of mobile apps and web apps for both clients and startups of his own. Nima's current startup, ShiftRide, has been covered in many news outlets, including Forbes, where his app was highlighted for its ease of use.


Nima has created this course to help people become the best designer they can be. Design is part of the foundation of many things from great products & websites to great advertisements and everything in between. Nima has also designed and developed an open-source iPhone development library by the name of FCAlertView, helping 350,000+ app developers use beautiful customizable alert prompts within their applications.


Course Overview:

The course is broken down into 3 main parts: Learning all about Figma, Designing a Full Mobile Mockup, and Designing a Simple Web App Mockup.


Learning All About Figma:

  • Understanding why Figma is great

  • Signing Up for Figma

  • Going over the basics of the software

  • Importing Files from Sketch

  • Creating Frames, Shapes, and exploring with Drawing Tools


Designing a Full Mobile Mockup:

  • Designing the Mobile App UI for a laundry delivery service called Clean Kangaroo

  • Creating reusable design components

  • Using constraints to create responsive designs for any size mobile device

  • Applying easy-to-change styles for colours and typography

  • Turning our mockup into an interactive prototype

  • Testing our prototype on a real device

  • Adding animations, overlays, links, and more to our prototype to make them more usable

  • Sharing & Exporting our designs

  • Working live with a team inside Figma


Designing a Simple Web Mockup:

  • Designing a 3-Page Web App UI for Clean Kangaroo

  • Using Auto-Layout to create smart dynamic designs

  • Filling in our designs with sample data using Plugins


So what are you waiting for?

Let’s get started learning how to design real-world projects using Figma and take our design skills to a whole new level together.

Bạn sẽ học được gì

How to use Figma on web & desktop

Designing full mobile & web mockups (UI Design)

Creating great experiences with applications of UX Design

Building interactive prototypes to share with co-workers and clients

Seeing your prototypes live on your own mobile phone

Creating easy-to-tweak designs using re-usable components & styles

How to pick colour schemes and unique typography for your designs

Working with your clients/team right within Figma

Yêu cầu

  • A Computer (Mac or Windows)
  • Internet Connection

Nội dung khoá học

11 sections

Introduction

1 lectures
Introduction to Course
01:30

Getting Started with Figma

5 lectures
What's Figma?
00:52
Let's Sign Up!
00:04
The Basics
02:56
Creating New Files
02:52
Importing from Sketch
01:06

Exploring Figma

4 lectures
The Main Toolbar
02:37
The Properties Panel
02:55
The Layers Panel
01:26
Useful Shortcuts
00:37

Figma Tools in Action

7 lectures
Frames
03:26
Grids & Guides
03:26
Creating Shapes
07:16
Pen & Pencil Tools
05:26
Boolean Operations
03:40
Boolean Exercise Solution
01:36
Alignment Tools
02:36

Designing Our First Mobile UI

20 lectures
Mockup Requirements
03:07
Mockup Files
00:34
The Wireframe
05:20
Setting Up Our Frames
09:41
Images & Overlays
09:22
Adding Icons
10:37
Choosing a Color Scheme
06:56
Setting Up Color Styles
05:14
Tutorial Page
10:55
Components
15:07
Button Components
05:36
Using Pages to Organize
05:14
Using Variants to Create Component Groups
08:13
Variants Exercise Solution
04:38
Exploring Variants Even More
00:26
Payment Page
08:19
Constraints
06:46
Constraints Exercise Solution
04:44
Plugins
04:52
Completing Our Map Page
06:11

Completing Our Mobile Mockup

17 lectures
User Experience Design (UX)
06:12
Using Templates
03:03
Using Apple Templates & Fonts
01:39
Working on Our Main Pages
07:25
Designing a Tab Bar for Navigation
06:07
Using Variants for Tab Bars
00:15
Request Page
09:09
Store Cards
11:56
Adding Constraints to the Request Page
03:40
Profile Page
07:37
Applying Constraints to the Profile Page
02:05
Services Page
07:57
Adding Sample Data from Google Sheets
04:31
Finding Custom Fonts to Use
03:07
Creating Text Styles
07:29
Applying Text Styles Everywhere
07:14
Finishing Touches
06:46

Prototyping

14 lectures
Creating Prototypes
03:07
Adding Connections between Frames
03:35
Scrolling in Prototypes
04:27
Testing on a Real Device
01:51
Using Overlays for Tutorial Cards
06:00
Openning Links
02:23
Adding Animations
02:53
Page Transitions
02:18
Interactive Maps
01:53
Playing GIFs
03:20
Smart Animate
05:57
Interactive Components
05:02
Interactive Components Exercise Solutions
02:19
Creating New Flows
03:54

Teams & Sharing

2 lectures
Sharing Our Files
02:25
Working with Teams
03:49

Exporting from Figma

2 lectures
Creating Exports
03:34
Code Handoff
01:20

Designing a Web App UI

9 lectures
Project Outline
02:24
Starting with a Template
05:17
Login Page
08:46
Image Masks
02:28
Dashboard Page
09:07
Auto-Layout
08:18
Adding Sample Data
07:44
Full Web Mockup
00:11
Version History
02:00

Conclusion

1 lectures
Well Done!
01:06

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.