Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Figma for Beginners: Design a Real E-commerce Landing Page

Name: Figma for Beginners: Design a Real E-commerce Landing Page
Rating: 3.3 (3 reviews)

Learn Figma from scratch and design a complete e-commerce landing page, step by step, with no experience needed.

Created byMirza Habib Ahmed

Last updated 10/2024

Hindi

What you'll learn

Figma Tools from Basics to Advance level
Working with Fonts, Styles and colors.
Create Landing Page design for E-commerce website.
Learn About Figma Layout building Tools such as Autolayout, Frames, Sections and groups.
Basics of prototyping
UI UX Design Basics

Course content

13 sections • 23 lectures • 3h 44m total length

Introduction to Figma6:28
In this introduction to Figma for beginners video, we're going to be taking a look at Figma, a software that is used for creating user interfaces. If you're new to the world of user interfaces and want to start working with them right away, then this video is for you!

How to use figma UI9:27
In this video I go through the Figma UI Basics and more specifically, just the structure of the dashboard area.
How to use Figma Toolbar14:16
In this video we are going to learn about Basics of Figma Toolbar and the Figma Toolbar Items it has. Also quickly learn more about shapes and how to combine them and share file links with team members.
How to use Figma Left Sidebar8:12
In this video, we are going to learn about How to use Figma Left Sidebar. How to create pages and manage layers. Also learn a little bit about components and instancing and the local components library.
How to use Figma Right Sidebar10:09
In this video, we will learn about How to use Figma Right Sidebar. How to create pages and manage layers. Also learn a little bit about components and instancing and the local components library.

How to use Basic Shapes and Boolean Operation in Figma9:51
In this video, I'm going to teach you How to use Basic Shapes and Boolean Operation in Figma. If you're new to Figma or are looking to expand your skills, this video is for you! By the end of this video, you'll be able to create basic shapes, manipulate them with boolean operations, and save and export your designs. If you're a designer looking to up your game, this video is for you!

How to use images in figma and import images form pexels8:46
In this video of the Figma tutorial series, we are going to learn How to use images in figma and import images form pexels. Apply different effects on images such as gradients and colors.
How to Use Text in Figma and Basics of Text Properties7:22
In this video of the Figma tutorial series, we will learn How to Use Text in Figma and Basics of Text Properties. Adjust text properties such as size, kerning, spacing, line height, and much more.

How to use Constraints in Figma6:03
In this video of the figma tutorial series, we will learn How to use Constraints in Figma for elements alignments. We learn both horizontal and vertical constraints inside frame.
How to Use Auto Layout Figma Properties to Create Beautiful User Interfaces12:44
In this video, we'll be taking a look at the How to Use Auto Layout Figma Properties to Create stunning user interfaces.

How to install and use Figma Plugins7:27
In this video we are going to learn How to Use Figma Plugins and how useful they are in UI design. See what kind of assets we can get from community and plugins. How to explore community.
Installing & Using Figma Widgets8:39
In this video we are going to learn How to Use Figma Widgets and how useful they are in big projects. See what kind of Figma widgets we can get from community and install them. How to explore Widgets.

Requirements

Internet Access
Basic of computer literacy and very little design experience.

Description

Figma is a powerful design tool that runs online. You can use it in your browser or with the desktop app for Windows and Mac. There are no platform limits.

Figma is similar to Sketch and Adobe XD. But it is more powerful for team collaboration and fast, responsive design. This is why more and more companies and freelancers are switching to Figma.

This course teaches you Figma from the ground up, using one real project: an e-commerce landing page. You won't just learn tools and buttons. You will use them right away to build something real. By the end of this course, you will have your own e-commerce landing page design in your portfolio.

This course is made for complete beginners. No design background needed. No prior Figma experience needed. It is also great for seasoned designers who want to switch from Sketch or Adobe XD.

What you'll learn:

Introduction to the main interface of Figma
How to use the top toolbar and left and right panels
Figma frames and grouping
Basic shapes and Boolean options
How to use images and import from stock footage
Text and text properties
Constraints and Auto Layout
Figma Community, plugins, and widgets
Basic UI/UX design concepts
How to design a complete e-commerce landing page

By the end of this course:
You will know the many tools Figma has to offer. You will be able to design engaging UI/UX for mobile and website mockups. You can turn these into live, interactive prototypes for your own projects or for your clients.

Requirements:

A computer with internet access
A free Figma account
No design or coding experience needed

Who this course is for:

Complete beginners who want to learn Figma
Anyone who wants to start a career in UI/UX design
Freelancers who want to design landing pages for clients
Designers switching from Sketch or Adobe XD
Students who want a real project for their portfolio

Who this course is for:

User Interface designers
Web Designers
Graphic Designers
UX Designers
Beginners looking to get into the UI/UX field

Figma for Beginners: Design a Real E-commerce Landing Page

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 6min

User Interface4 lectures • 42min

Grid System1 lecture • 5min

Frames, Groups and Sections1 lecture • 8min

Componets and Variants1 lecture • 8min

Working with Vector Objects1 lecture • 10min

Working with Images and Text2 lectures • 16min

Alignment and Auto Layout2 lectures • 19min

About Figma Community1 lecture • 6min

Figma Plugins & Widgets2 lectures • 16min

Requirements

Description

Who this course is for: