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!
Getting Started
Željko Milivojević is UI & UX Designer and your course instructor
telling about Figma and Whimsical
where to download apps
why you should create accounts to follow the course
Web Structure
going into inspect element mode
showing how the website is structured in order
showing how nothing can move without any interruption
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
examples for each section of the website
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
when you load up the Figma you see many things to worry about, the instructor will cover the basics of each section
community area of Figma
what things you can find there
what is useful the most
choosing the button for the new design file
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
creating your first shapes and moving them around
adding, moving, scaling, duplicating
how to use coordinates, scaling, corner radius, fill, stroke, effects, and export
how to copy, duplicate, delete, group, frame, holding shift, alt, etc
differences between frames and groups
examples
typing in Figma
cooperating with the properties bar
how to change font settings
adding the pictures and setting up the properties for them
what are SVG files
what is the difference between SVG files and raster
how to manage SVG files in Figma
simple exercise to go over everything we talked about
creating easy elements just to get comfortable with the Figma
Auto Layout
definition of auto layout
why it should be implemented in every project
talking about time efficiency, project structure, efficient design systems
directions, spacing, padding, alignment - advanced layout options
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
alert pop-up (with the linked text “close” and “learn more")
big modal pop-up (left side pic - right side with texts, close, cta)
Preparing for the Project
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
setting up the colors for the whole project
talking about what colors are for what interface and what is their psychology
talking about typefaces, serifs, sans, what sizes to choose from and much more
Wireframes
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
creating a new document and exploring different tools
how sections work and how we are going to structure them
creating a navbar
creating a hero section
wireframe for the rest of the web view for all pages
creating all remaining wireframes for the mobile screens
how to export the wireframes
Starting the Project
definition of design systems in the UI industry
why should you use design systems
‘increments of 4’ to size and space out the elements on a page
why any defined height or width should be divisible by 4
importing icon packs
how to make a variant component of icon packs
the first elements to design are buttons
how to create a frame
which frame to choose
set up the proper grid
setting up the navigation panel for web view
proper auto layout
creating the component
the hero section of website
auto layout the text, adding the buttons, keeping it within the container
design for the rest of the page
completing the whole website web view
completing the whole website mobile view
After the Design
how to check if is everything alright
how to check grid, layouts, responsivity, pages, design system
how to work with a client on the project
how to send the project to a client
what is important to show to the client when working on the project
Portfolio Management
why high-quality portfolio is essential
how to create a high-quality profile pic, banner, good description and much more
best websites for creators
important tips
templates
how to manage high-quality export
