• Post category:StudyBullet-3
  • Reading time:6 mins read


Learn how to design a modern and trending website in Figma step by step from scratch.

What you will learn

Introduction to Latest Figma interface, tools & plugins

Learn why we use the latest feature like auto layout & master component

Learn How to read product briefly before approaching design

Learn professional techniques & shortcuts

Understand usage of Layout Grid

Learn how to design webpages & landing pages in Figma

Description

Hello, Creative Minds,

In this course, you will learn the process of Web Design with Figma, which starts at the product brief and ends with a beautiful design.

You are requested to follow the course and start working in Figma in parallel. The course covers the following steps:

  • Understanding Clientโ€™s Design
  • Explore Figma Interface & Tools
  • Understanding Plugin Market & feature like auto-layout & master component
  • Designing the Modern Webpages &ย Landing Page
  • Use Figma specific features like Auto Layout to speed up your workflow

Figma is a web-based graphics editing and user interface design app. You can use it to do all kinds of graphic design work from wire-framing websites, designing mobile app interfaces, prototyping designs, crafting social media posts, and everything in between. Figma is different from other graphics editing tools.

By the end of this course, you will create trending websites with a clean & modern look.

We will design an Ed-Tech startup website from scratch and I will share with you all the techniques and hidden secrets you need for web design.


Get Instant Notification of New Courses on our Telegram channel.


You will learn theย essentials of web design and Figma.

I have shared resources for your inspiration so you can design a website for any industry/domain easily.

This course is specifically aimed at beginners to help them get expert in Figma.

See you inside the courses!

English
language

Content

Introduction
Introduction
Figma Introduction & Explore Interface
Figma Introduction
Create Frame & Rename It
Frame Explanations And Examples
Rectangle Tool with Colour Fill
Ellipse/Circle Tool And Polygon Tool
Line And Arrow Tool Explained
Text & Typography Explained
Other Remaining Tools
PROJECT 1 : Design Ed-Tech Website : Navbar
Product Brief & Navbar Design
Learn To Install Plugin & Complete Navbar
PROJECT 1 : Design Ed-Tech Website : Hero Section
Create Hero Section & Learn How To Create Global Style
Create Button With AutoLayout
Create Course Pricing Title
PROJECT 1 : Design Ed-Tech Website : Class Details Section
Create Heading
Create Class Detail Card With OverLay Gradient
Duplicate Card & Change Images And Text
Create Filter Button With Master Component & AutoLayout
Create Sliding Button & Learn Scale Tool
PROJECT 1 : Design Ed-Tech Website : Mentor Details Section
Design Mentor Details Section
Design Why To Join Section
Copy & Change Text
PROJECT 1 : Design Ed-Tech Website : Footer Section
Footer Design
PROJECT 1 : Share Your Design & Prototype
Share Design Files
Create Prototype With Sharable Link
PROJECT 2 : Travel Agency Website : HomePage
Travel Website Hompage Design
PROJECT 2 : Travel Agency Website : Travel Activities
Travel Activities Details Page
Travel Activity Details Complete