Figma Design Course 2023. Your Website from Start to Finish
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 on your browser. This means you get to 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 project from start to finish. 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 aren’t mentioning 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 projects
-
How websites are structured and how you can learn from it
-
Automate your workflow
-
Make responsive Web and Mobile view
-
Create a working design system that helps you finish your project easily
-
Create wireframes and import them into Figma
-
Proper structure for the projects
-
Create Advanced Prototypes With ProtoPie and Figma
-
Follow up with new trends in the industry
-
Use knowledge to complete a client’s project
-
Optimize your portfolio and start getting clients
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?
-
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 creation in lessons
-
weekly educational and promotional announcements
-
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 projects!
Web Structure
Into the Figma
-
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
Tools in Action
-
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
Auto Layout
-
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
Preparing for the Project
-
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)
Wireframes
-
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
Starting the Project
-
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
After the Design
-
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
Portfolio Management
-
44
Finishing Touches
how to check if is everything alright
how to check grid, layouts, responsivity, pages, design system
-
45
Sending a Project to a Client
how to work with a client on the project
how to send the project to a client
-
46
How to do Reviews with a Client
what is important to show to the client when working on the project
