Complete Figma Course: Web & Mobile Projects from Scratch
- Description
- Curriculum
- FAQ
- Reviews
Figma is a web-based design tool that enables users to create interactive, collaborative designs. You can use it to do all kinds of graphic design work, from wireframing websites, designing mobile app interfaces, prototyping designs, crafting social media posts, and everything in between. Figma works directly in your browser. This means you can access your projects and start designing from any computer or platform without having to buy multiple licenses or install software. What makes it so attractive is the fact that it’s free to use.
If you’re still not familiar with this wondering web-based app, you’ve come to the right place. You will learn through recorded lessons, practical exercises, and tips by UI & UX Designer Željko Milivojević, reviewing content at your own pace.
You will go through the process of creating your design project in Figma from start to finish, covering both website and mobile app designs. You are also going to manage your portfolio and set it up to get more clients and proposals. The course instructor will go over all the small details that can really make a difference, but most people don’t mention them. There is a lot to learn along the way, so we would love to take you on this journey.
In this Figma course, you will learn how to:
-
Use Figma to assist with your design projects
-
Understand both website and mobile app structures and learn from them
-
How websites are structured and how you can learn from it
-
Automate your workflow in Figma
-
Make responsive web and mobile views in Figma
-
Create a working design system that helps you finish your Figma project easily
-
Create wireframes and import them into Figma
-
Build flows for mobile and web wireframes
-
Proper structure for the projects
-
Create prototypes with interactive animations in Figma
-
Use knowledge to complete a client’s project
-
Optimize your portfolio and start getting clients by making Figma designs
Why should you choose this Figma course?
-
Figma gives you universal design skills.
-
You will learn how to create in Figma from experienced designer Željko Milivojević.
-
Željko Milivojević is UI & UX Designer focused on mobile and web design and brand identity with 8 years of experience in the design industry.
-
You will design your first website from start to finish!
-
Study anywhere, anytime, at your own pace.
-
This course is suitable for both beginners and experienced users.
-
The course comes with in-depth videos, important tips, and additional useful links.
What else do you get?
-
course checklist
-
lifetime access to the course and its updates
-
structured step-by-step lessons and practical exercises
-
additional folders and files that contain assets that the instructor used for the website and mobile app creation in lessons
-
a certificate from Udemy upon completion of the course
Enroll now!
Want to start now? Click the “Buy now” button and learn how to use Figma to assist with your design projects!
-
3
How Websites Workgoing into inspect element mode
showing how the website is structured in order
showing how nothing can move without any interruption
-
4
Box Elements
talking about and going over the code to present how everything is created by div blocks
box model for CSS
what are margins, paddings, etc
-
5
Website Sections
examples for each section of the website
-
6
Modern Trends
going on Dribbble
presenting modern designs that are popular in the industry
talking about what should you focus on and what is fake
-
7
Main Screen
when you load up the Figma you see many things to worry about, the instructor will cover the basics of each section
-
8
Community Tab
community area of Figma
what things you can find there
what is useful the most
-
9
Creating the First Project
choosing the button for the new design file
-
10
Explore first Canvas
talking about what is seen by the user and how to access previous pages
main menu, frames, shapes, comments, changing the name, sharing
where we can set properties to objects
where we can move our objects around and place them via z coordinates
-
11
Basic Shapes
creating your first shapes and moving them around
adding, moving, scaling, duplicating
-
12
Properties of Object
how to use coordinates, scaling, corner radius, fill, stroke, effects, and export
-
13
Useful Shortcuts
how to copy, duplicate, delete, group, frame, holding shift, alt, etc
-
14
Frames and Groups
differences between frames and groups
examples
-
15
Typography
typing in Figma
cooperating with the properties bar
how to change font settings
-
16
Playing with Pictures
adding the pictures and setting up the properties for them
-
17
SVG files
what are SVG files
what is the difference between SVG files and raster
how to manage SVG files in Figma
-
18
Exercise 1
simple exercise to go over everything we talked about
creating easy elements just to get comfortable with the Figma
-
19
What is the Auto Layout
definition of auto layout
why it should be implemented in every project
talking about time efficiency, project structure, efficient design systems
-
20
Auto Layout Tools
directions, spacing, padding, alignment - advanced layout options
-
21
Creating the First Component
talking about what it is and what the “main” component is
how it works around the project
component variants
showing how to create multiple variants and why to use them, offering a few good examples
-
22
Exercise 2
alert pop-up (with the linked text “close” and “learn more")
-
23
Exercise 3
big modal pop-up (left side pic - right side with texts, close, cta)
-
24
Examples of Real Projects
showing the examples of real projects in Figma
what is important in real projects
-
25
Moodboard
how to set up a good mood board for the project
colors, inspirations, ideas
-
26
Colors Psychology and Usage
setting up the colors for the whole project
talking about what colors are for what interface and what is their psychology
-
27
Choosing Typeface
talking about typefaces, serifs, sans, what sizes to choose from and much more
-
28
Visual Workspace
Whimsical is the visual workspace for thinking and collaboration, combining flowcharts, wireframes, sticky notes, mind maps, and docs
creating the account on there and what are other alternatives
-
29
Exploring the Space
creating a new document and exploring different tools
-
30
Developing First Sections
how sections work and how we are going to structure them
creating a navbar
creating a hero section
-
31
Web View
wireframe for the rest of the web view for all pages
-
32
Mobile View
creating all remaining wireframes for the mobile screens
-
33
Exporting the Wireframes
how to export the wireframes
-
34
What is a Design System
definition of design systems in the UI industry
why should you use design systems
-
35
4pt Grid System
‘increments of 4’ to size and space out the elements on a page
why any defined height or width should be divisible by 4
-
36
How to Import Your Icon Design System
importing icon packs
how to make a variant component of icon packs
-
37
First Element
the first elements to design are buttons
-
38
Setting up the First Frame
how to create a frame
which frame to choose
set up the proper grid
-
39
What is Navigation Panel?
setting up the navigation panel for web view
proper auto layout
creating the component
-
40
Creating Hero Section
the hero section of website
auto layout the text, adding the buttons, keeping it within the container
-
41
First Page
design for the rest of the page
-
42
Creating Web View
completing the whole website web view
-
43
Creating Mobile View
completing the whole website mobile view
-
45
Project Prototyping
how to make web and mobile view prototypes in Figma
-
46
Finishing Touches
how to check if is everything alright
how to check grid, layouts, responsivity, pages, design system
-
47
Sending a Project to a Client
how to work with a client on the project
how to send the project to a client
-
48
How to do Reviews with a Client
what is important to show to the client when working on the project
-
49
Creating the project
Here, we'll start working on our project and create it in Figma.
-
50
Design system
In this lecture, we'll create our own design system.
-
51
Wireframes - Part 1
We'll create the login & register flow, home screen with chat and search option.
-
52
Wireframes - Part 2
Creating the post, notifications, and profile with follow and following pages.
-
53
Wireframes flow
Connecting the screens with prototype settings.
-
54
Final Design - Part 1
Creating finalized versions of screens in "Wireframe Part 1"
-
55
Final Design - Part 2
Creating finalized versions of screens in "Wireframe Part 2"
-
56
Final Design - Part 3
Creating finalized versions of screens in "Wireframe Part 3"
-
57
Final Design - Part 4
Creating finalized versions of screens in "Wireframe Part 4"
-
58
Prototype & Animations
Connecting all the components until the post-screen.
-
59
Why is it Important?
why high-quality portfolio is essential
how to create a high-quality profile pic, banner, good description and much more
-
60
Where to Present Your Project?
best websites for creators
important tips
-
61
How to Present Your Work?
templates
how to manage high-quality export
-
62
TOP 90 AI Tools in 2024-2025In this lecture, we'll share the top AI tools that will make your journey much easier.
-
63
Final Message
