4.44 out of 5
4.44
687 reviews on Udemy

Figma Design Course 2023. Your Website from Start to Finish

Step-by-step guide for beginners on how to go through the process of creating your project on Figma from start to finish
Instructor:
Anton Voroniuk
34,096 students enrolled
English [Auto]
How to use Figma to assist on your projects
How websites are structured and how you can learn from it
How to automate your workflow
How to make responsive Web and Mobile view
How to create a working design system that helps you finish your project easily
How to create wireframes and import them in Figma
Proper structure for the projects
Follow up with new trends in the industry
Knowledge to complete a client’s project
How optimize your portfolio and start getting clients
Udemy APAC

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?

  1. Figma gives you universal design skills.
  2. You will learn how to create in Figma from experienced designer Željko Milivojević.
  3. Željko Milivojević is UI & UX Designer focused on mobile and web design and brand identity with 8 years of experience in the design industry.
  4. You will design your first website from start to finish!
  5. Study anywhere, anytime, at your own pace.
  6. This course is suitable for both beginners and experienced users.
  7. 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!

Getting Started

1
Introduction to the Course
  • Željko Milivojević is UI & UX Designer and your course instructor

2
Software Usage
  • telling about Figma and Whimsical

  • where to download apps

  • why you should create accounts to follow the course

Web Structure

1
How Websites Work
  • going into inspect element mode

  • showing how the website is structured in order

  • showing how nothing can move without any interruption

2
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


3
Website Sections
  • examples for each section of the website

4
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

Into the Figma

1
Main Screen
  • when you load up the Figma you see many things to worry about, the instructor will cover the basics of each section

2
Community Tab
  • community area of Figma

  • what things you can find there

  • what is useful the most

3
Creating the First Project
  • choosing the button for the new design file

4
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

Tools in Action

1
Basic Shapes
  • creating your first shapes and moving them around

  • adding, moving, scaling, duplicating

2
Properties of Object
  • how to use coordinates, scaling, corner radius, fill, stroke, effects, and export

3
Useful Shortcuts
  • how to copy, duplicate, delete, group, frame, holding shift, alt, etc

4
Frames and Groups
  • differences between frames and groups

  • examples

5
Typography
  • typing in Figma

  • cooperating with the properties bar

  • how to change font settings

6
Playing with Pictures
  • adding the pictures and setting up the properties for them

7
SVG files
  • what are SVG files

  • what is the difference between SVG files and raster

  • how to manage SVG files in Figma

8
Exercise 1
  • simple exercise to go over everything we talked about

  • creating easy elements just to get comfortable with the Figma

Auto Layout

1
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

2
Auto Layout Tools
  • directions, spacing, padding, alignment - advanced layout options

3
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

4
Exercise 2
  • alert pop-up (with the linked text “close” and “learn more")

5
Exercise 3
  • big modal pop-up (left side pic - right side with texts, close, cta)

Preparing for the Project

1
Examples of Real Projects
  • showing the examples of real projects in Figma

  • what is important in real projects

2
Moodboard
  • how to set up a good mood board for the project

  • colors, inspirations, ideas

3
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

4
Choosing Typeface
  • talking about typefaces, serifs, sans, what sizes to choose from and much more

Wireframes

1
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


2
Exploring the Space
  • creating a new document and exploring different tools

3
Developing First Sections
  • how sections work and how we are going to structure them

  • creating a navbar

  • creating a hero section

4
Web View
  • wireframe for the rest of the web view for all pages

5
Mobile View
  • creating all remaining wireframes for the mobile screens

6
Exporting the Wireframes
  • how to export the wireframes

Starting the Project

1
What is a Design System
  • definition of design systems in the UI industry

  • why should you use design systems

2
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

3
How to Import Your Icon Design System
  • importing icon packs

  • how to make a variant component of icon packs

4
First Element
  • the first elements to design are buttons

5
Setting up the First Frame
  • how to create a frame

  • which frame to choose

  • set up the proper grid

6
What is Navigation Panel?
  • setting up the navigation panel for web view

  • proper auto layout

  • creating the component

7
Creating Hero Section
  • the hero section of website

  • auto layout the text, adding the buttons, keeping it within the container

8
First Page
  • design for the rest of the page

9
Creating Web View
  • completing the whole website web view

10
Creating Mobile View
  • completing the whole website mobile view

After the Design

1
Finishing Touches
  • how to check if is everything alright

  • how to check grid, layouts, responsivity, pages, design system

2
Sending a Project to a Client
  • how to work with a client on the project

  • how to send the project to a client

3
How to do Reviews with a Client
  • what is important to show to the client when working on the project

Portfolio Management

1
Why is it Important?
  • why high-quality portfolio is essential

  • how to create a high-quality profile pic, banner, good description and much more

2
Where to Present Your Project?
  • best websites for creators

  • important tips

3
How to Present Your Work?
  • templates

  • how to manage high-quality export

4
Final Message
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.4
4.4 out of 5
687 Ratings

Detailed Rating

Stars 5
337
Stars 4
243
Stars 3
88
Stars 2
13
Stars 1
6
0a73131763bf71a6e41805722ed3e631
30-Day Money-Back Guarantee

Includes

6 hours on-demand video
1 article
Full lifetime access
Access on mobile and TV
Certificate of Completion

External Links May Contain Affiliate Links read more

Join our Telegram Channel To Get Latest Notification & Course Updates!
Dekker Fraser Marketing Courses Biggest SALE (LIVE)ENROLL
+ +