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.
Read more
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.
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.
What's inside
Syllabus
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
Read more
Syllabus
Ž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
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
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
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
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)
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
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
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
how to make compelling prototypes for your Figma masterpieces in ProtoPie
how to make web and mobile view prototypes in Figma
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
Here, we'll start working on our project and create it in Figma.
In this lecture, we'll create our own design system.
We'll create the login & register flow, home screen with chat and search option.
Creating the post, notifications, and profile with follow and following pages.
Connecting the screens with prototype settings.
Creating finalized versions of screens in "Wireframe Part 1"
Creating finalized versions of screens in "Wireframe Part 2"
Creating finalized versions of screens in "Wireframe Part 3"
Creating finalized versions of screens in "Wireframe Part 4"
Connecting all the components until the post-screen.
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
In this lecture, we'll share the top AI tools that will make your journey much easier.
In this lecture, you will:
Get support in your career growth
Develop new knowledge and enhance your existing web design skills
Traffic lights
Save this course
Save
Reviews summary
Practical figma for web & mobile projects
Includes useful tips for portfolio building and clients.
Well-structured, suitable for beginners and self-paced study.
Covers essential Figma tools and concepts effectively.
Hands-on projects provide valuable real-world experience.
Expert instructor delivers clear, easy-to-follow lessons.
Activities
Review Basic Design Principles
Show steps
Reinforce fundamental design principles to better understand and apply Figma's tools effectively.
Browse courses on
Color Theory
Show steps
-
Read articles or watch videos on design principles.
-
Analyze existing websites and apps, identifying design principles in action.
-
Practice applying these principles in simple design exercises.
Read 'Don't Make Me Think'
Show steps
Improve your understanding of usability principles to create more user-friendly and effective Figma designs.
View
Don't Make Me Think, Revisited: A Common Sense...
on Amazon
Show steps
-
Read the book, focusing on chapters relevant to UI/UX design.
-
Apply the book's principles to existing Figma designs.
-
Conduct usability testing on your designs to identify areas for improvement.
Read 'Refactoring UI'
Show steps
Improve your understanding of UI design principles and best practices to create more visually appealing and effective Figma designs.
View
Melania
on Amazon
Show steps
-
Read the book, focusing on chapters relevant to current projects.
-
Apply the book's advice to existing Figma designs, refactoring the UI.
-
Document the changes and the reasoning behind them.
Four other activities
Expand to see all activities and additional details
Show all seven activities
Recreate Existing UI Elements
Show steps
Improve your Figma skills by recreating common UI elements like buttons, forms, and navigation bars.
Show steps
-
Find examples of UI elements on popular websites and apps.
-
Recreate the elements in Figma, paying attention to detail.
-
Compare your recreations to the originals and identify areas for improvement.
Design a Landing Page
Show steps
Apply the skills learned in the course by designing a complete landing page in Figma, from wireframing to prototyping.
Show steps
-
Define the target audience and goals of the landing page.
-
Create wireframes to plan the layout and content.
-
Design the visual elements in Figma, using the course's techniques.
-
Prototype the interactions and animations.
-
Gather feedback and iterate on the design.
Write a Figma Tutorial
Show steps
Solidify your understanding of Figma by creating a tutorial on a specific feature or technique covered in the course.
Show steps
-
Choose a Figma feature or technique to focus on.
-
Research and gather information on the chosen topic.
-
Create a step-by-step guide with clear instructions and visuals.
-
Share the tutorial on a blog, forum, or social media platform.
Contribute to a Figma Plugin
Show steps
Deepen your understanding of Figma's capabilities by contributing to an open-source plugin project.
Show steps
-
Find an open-source Figma plugin project on GitHub.
-
Review the project's documentation and code.
-
Identify a bug to fix or a feature to add.
-
Submit a pull request with your changes.
Review Basic Design Principles
Show steps
Reinforce fundamental design principles to better understand and apply Figma's tools effectively.
Browse courses on
Color Theory
Show steps
- Read articles or watch videos on design principles.
- Analyze existing websites and apps, identifying design principles in action.
- Practice applying these principles in simple design exercises.
Read 'Don't Make Me Think'
Show steps
Improve your understanding of usability principles to create more user-friendly and effective Figma designs.
View
Don't Make Me Think, Revisited: A Common Sense...
on Amazon
Show steps
- Read the book, focusing on chapters relevant to UI/UX design.
- Apply the book's principles to existing Figma designs.
- Conduct usability testing on your designs to identify areas for improvement.
Read 'Refactoring UI'
Show steps
Improve your understanding of UI design principles and best practices to create more visually appealing and effective Figma designs.
View
Melania
on Amazon
Show steps
- Read the book, focusing on chapters relevant to current projects.
- Apply the book's advice to existing Figma designs, refactoring the UI.
- Document the changes and the reasoning behind them.
Recreate Existing UI Elements
Show steps
Improve your Figma skills by recreating common UI elements like buttons, forms, and navigation bars.
Show steps
- Find examples of UI elements on popular websites and apps.
- Recreate the elements in Figma, paying attention to detail.
- Compare your recreations to the originals and identify areas for improvement.
Design a Landing Page
Show steps
Apply the skills learned in the course by designing a complete landing page in Figma, from wireframing to prototyping.
Show steps
- Define the target audience and goals of the landing page.
- Create wireframes to plan the layout and content.
- Design the visual elements in Figma, using the course's techniques.
- Prototype the interactions and animations.
- Gather feedback and iterate on the design.
Write a Figma Tutorial
Show steps
Solidify your understanding of Figma by creating a tutorial on a specific feature or technique covered in the course.
Show steps
- Choose a Figma feature or technique to focus on.
- Research and gather information on the chosen topic.
- Create a step-by-step guide with clear instructions and visuals.
- Share the tutorial on a blog, forum, or social media platform.
Contribute to a Figma Plugin
Show steps
Deepen your understanding of Figma's capabilities by contributing to an open-source plugin project.
Show steps
- Find an open-source Figma plugin project on GitHub.
- Review the project's documentation and code.
- Identify a bug to fix or a feature to add.
- Submit a pull request with your changes.
Career center
User Interface Designer
Web Designer
Freelance Designer
Prototyper
Design Systems Manager
Interactive Designer
Mobile App Designer
Graphic Designer
Visual Designer
User Experience Designer
UI Developer
UX Researcher
Accessibility Specialist
Design Consultant
Art Director
Reading list
Share
Similar courses
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
