4.44 out of 5
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
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

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

Software Usage
  • telling about Figma and Whimsical

  • where to download apps

  • why you should create accounts to follow the course

Web Structure

How Websites Work
  • going into inspect element mode

  • showing how the website is structured in order

  • showing how nothing can move without any interruption

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

Website Sections
  • examples for each section of the website

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

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

Community Tab
  • community area of Figma

  • what things you can find there

  • what is useful the most

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

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

Basic Shapes
  • creating your first shapes and moving them around

  • adding, moving, scaling, duplicating

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

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

Frames and Groups
  • differences between frames and groups

  • examples

  • typing in Figma

  • cooperating with the properties bar

  • how to change font settings

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

SVG files
  • what are SVG files

  • what is the difference between SVG files and raster

  • how to manage SVG files in Figma

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

  • creating easy elements just to get comfortable with the Figma

Auto Layout

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

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

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

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

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

Preparing for the Project

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

  • what is important in real projects

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

  • colors, inspirations, ideas

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

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


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

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

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

  • creating a navbar

  • creating a hero section

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

Mobile View
  • creating all remaining wireframes for the mobile screens

Exporting the Wireframes
  • how to export the wireframes

Starting the Project

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

  • why should you use design systems

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

How to Import Your Icon Design System
  • importing icon packs

  • how to make a variant component of icon packs

First Element
  • the first elements to design are buttons

Setting up the First Frame
  • how to create a frame

  • which frame to choose

  • set up the proper grid

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

  • proper auto layout

  • creating the component

Creating Hero Section
  • the hero section of website

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

First Page
  • design for the rest of the page

Creating Web View
  • completing the whole website web view

Creating Mobile View
  • completing the whole website mobile view

After the Design

Finishing Touches
  • how to check if is everything alright

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

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

  • how to send the project to a client

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

Portfolio Management

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

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

Where to Present Your Project?
  • best websites for creators

  • important tips

How to Present Your Work?
  • templates

  • how to manage high-quality export

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 out of 5
687 Ratings

Detailed Rating

Stars 5
Stars 4
Stars 3
Stars 2
Stars 1
30-Day Money-Back Guarantee


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
+ +