![Figma for UI/UX: Master Web Design in Figma [Video]](https://content.packt.com/V18690/cover_image_small.jpg)
Figma for UI/UX: Master Web Design in Figma [Video]
Subscription
FREE
Video + Subscription
$29.99
Video
$54.99
What do you get with a Packt Subscription?
What do you get with a Packt Subscription?
What do you get with Video + Subscription?
What do you get with a Packt Subscription?
What do you get with eBook?
What do I get with Print?
What do I get with Print?
What do you get with video?
What do you get with Audiobook?
Subscription
FREE
Video + Subscription
$29.99
Video
$54.99
What do you get with a Packt Subscription?
What do you get with a Packt Subscription?
What do you get with Video + Subscription?
What do you get with a Packt Subscription?
What do you get with eBook?
What do I get with Print?
What do I get with Print?
What do you get with video?
What do you get with Audiobook?
-
Free ChapterIntroduction to the Course
- Introduction
- What Is Figma and Why Is it Better than Other Design Programs?
- How to Get Help Fast
- The Welcome Screen in Figma
- Getting Started with Figma
- Best Ways to Move Around in Figma
- Exercise: How to Move Elements Around
- Solving the Exercise and a Few Pro Tips
- Discover Figma's Interface and Why Professionals Use It
- Create Your First Mini Website
- Editing Icons: Colors and Size
- Here Is Why So Many Beginners Give Up
- Why I Don't Code (And I Don't Plan To)
-
Discover the Most important Things about Figma
- Introduction
- Difference Between Figma and Other Programs
- Here's How You Create Buttons in Figma
- The Basics of Working with Color
- How to Work with Color Like a Pro
- How to Add Images: Frames Versus Rectangles
- Create a Gallery / Collage in Figma
- How to Mask in Figma
- Here Are the Three Types of Text in Figma
- Discover the Properties of Text Layers
- How to Work with Text Like a Pro
- Effects in Figma: Blur, Shadows, and More
- Everything You Need to Know about Grids
- An Overview of Components
- Drafts and Projects in Figma
- Here's What Makes You a Good Web Designer
- Conclusions
-
First Web Design Project
- Introduction
- Set Up the Desktop Version the Correct Way
- Create the Header
- Create the Main Menu
- Set Up The Search Box
- Create a Dropdown Menu
- Create the Most Important Item – The Card
- How to Improve the Cards
- Set Up Secondary Navigation
- Create the Pagination
- Create the Foundation for the Footer
- Adding Content in the Footer
- How to Handle Visual Imperfections
- Here's What You Need to Remember
-
The First Key to Great Web Design
- Introduction
- Best Settings and Website Components
- Case Study: Non-Standard Layouts
- Exercise: Create a Standard Website Layout
- How to Size Your Web Elements Correctly
- My Formula for Perfect Text
- Case Study: Text Layers
- What You Need to Know about Color Contrast
- Case Study: Colors – Part 1
- Case Study: Colors – Part 2
- How to Align Elements in the Hero Area
- Three Rules for Web Design Icons
- Case Study: Visual Balance
- Final Thoughts
-
The Second Key to Great Web Design
- Introduction
- What's the Point of the Website?
- The User Versus the Business Owner
- Analytics in Web Design
- Templates and Website Builders – The Web Designer's Death?
- Case Study: Four Versions of the Same Website
- Ecommerce Homepage Layout
- Ecommerce Product Details
- Ecommerce Checkout
- Why Aren't Websites Perfect?
- Case Studies: The Client's Needs
- Landing Page Versus a Website
- Lead Generation in Landing Pages
- Why Landing Pages Have a Bad Reputation
- Digital Product Landing Page
- Testing Landing Pages
- Case Study: My Landing Page
- Final Thoughts about the Client's Needs
-
The Third Key to Great Web Design
- Introduction
- What's UX?
- The Best Example of Good UX and Attention to Detail
- Improve the Checkout Process to Double Sales
- Improve the Mobile Version to Double Sales
- Seven Website Tweaks that Show Attention to Detail
- Upgrading the Mobile Product Page
- Doing 1-on-1 Sessions with a Coder
- Here's What You Need to Remember
-
Redesign an Ecommerce Business
- The Most Important Question When Starting a New Project
- How to Research/Find Inspiration for Your Project
- Set Up the Foundation of the Project
- Create the Top Bar
- Set Up the Header
- Decide on a Styling for the Header
- Create the Most Important Part – The Hero Area
- Create the Secondary Navigation – Product Categories
- Here's Where Sales Are Made…Or Not!
- Create the First Version of the Card
- Set the Style for the Card
- Finishing Touches for the Card Design
- Don't Forget about This Important Detail!
- Create the FAQ Section
- Here's Why Auto-Layout Is Awesome
- Create a Newsletter Sign Up Form
- Set Up the Footer's Foundation
- Finishing the Footer
- Explore Variations and Improve Your Design
- How to Approach the Interior Pages
- Set the Top Area for the Product's Page
- Adding Content to the Product's Page
- How to Add Clear Calls to Action for Visitors
- Main Content Area
- Create a Table for the Sidebar
- Conclusions
-
Responsive Design: From Desktop to Mobile
- Introduction to the Mobile Version
- How to Start the Mobile Version for the Homepage
- Create the Header for the Mobile Version
- How to Rearrange the Hero Area
- Set Up the Card for the Grid of Products
- Don't Skip This Step When Creating Product Cards
- Arrange the FAQ Section for the Mobile Version
- Recreate the Newsletter in a Narrow Space
- Create the Footer for the Mobile Version
- Conclusions
-
Discover How the Design Gets Transformed to the Live Version
About this video
Figma is a vector graphics editor and prototyping tool that is primarily web-based, with additional offline features enabled by desktop applications for macOS and Windows. The Figma mobile app for Android and iOS allows viewing and interacting with Figma prototypes on real-time mobile devices.
This course will teach you everything you need to know about modern web design using Figma, one of the best design programs. The course is beginner-friendly—we will take it step by step and learn through fun exercises. You will look at UI and UX—all the essential principles you have to know.
You will learn about responsive design: transform the desktop version into the mobile version. Check how to prepare the design for coding: make coders and clients happy.
See different design principles that can be applied to any project.
Finally, find out what clients want from you—what assets/deliverables and in what format. You will also use Zeplin to bridge the gap between designers and engineers. It takes designs from Figma and exports them into a format that generates code snippets, design specs, and assets.
By the end of this course, you will become a well-versed and confident individual to create modern web designs using Figma. You can get freelance projects in this arena and open up a new world in the field of web designing.
All the resource files are added to the GitHub repository at: https://github.com/PacktPublishing/Figma-for-UI-UX-Master-Web-Design-in-Figma
- Publication date:
- July 2022
- Publisher
- Packt
- Duration
- 11 hours 26 minutes
- ISBN
- 9781803246703