When you enroll through our links, we may earn a small commission—at no extra cost to you. This helps keep our platform free and inspires us to add more value.

Creativity & Inspiration
SkillShare logo

Figma UI/UX: Design a Website Hero Section with Prototype & Animation for Web & Mobile

Unlock creativity with Skillshare! Learn acrylic painting, AI writing, graphic design, and photography.

     0 |
  • Reviews ( 0 )
Free
Figma UI/UX: Design a Website Hero Section with Prototype & Animation for Web & Mobile

Related Courses

This Course Includes

  • iconskillshare
  • icon0 (0 reviews )
  • icon6 hours 33 minutes
  • iconenglish
  • iconOnline - Self Paced
  • iconcourse
  • iconSkillShare

About Figma UI/UX: Design a Website Hero Section with Prototype & Animation for Web & Mobile

Welcome to Hero Section Landing Page Design in Figma

Getting Started

Figma Interface - Part 1

Figma Interface - Part 2

Wireframing - Part 1

Wireframing - Part 2

Food Brand Hero Section Design (Beginning) - Understanding Layout

How to create a background

How to cut out images

How to create shadow & Blur

Leaves Effect

How to use & arrange Logos

Creating website top menu

How to import and use icons

Understanding Figma Auto layout

Creating the Log in & Sign up Button

Creating and using texts

Creating CTA Button

Creating the client's satisfaction section

Import & use arrow icons

Understanding how to use Figma component

Food Brand Hero Section Design Conclusion

Tech Brand Hero Section Design - Part 1

Tech Brand Hero Section Design - Part 2

Fruit Brand Hero Section Design

Real Estate Brand Hero Section Design

Food Brand Prototype, Animation, Motion Design & Interaction (Web) - Part 1

Food Brand Prototype, Animation, Motion Design, Interaction (Web) - Part 2

Real Estate Brand Prototype, Animation, Motion Design & Interaction (Web)

Tech Brand Prototype, Animation, Motion Design & Interaction (Web)

Fruit Brand Prototype, Animation, Motion Design & Interaction (Web)

Introduction to responsive design

Responsive Design ( Mobile & Tablet View) - Real Estate Brand

Responsive Design ( Mobile & Tablet View) - Food Brand

Reponsive Design ( Mobile & Tablet View) - Tech Brand

Responsive Design ( Mobile & Tablet View) - Fruit Brand

Food Brand Prototype & Animation (Mobile)

Tech Brand Prototype & Animation (Mobile)

Fruit Brand Prototype & Animation (Mobile)

Real Estate Brand Prototype & Animation (Mobile)

How to export images in Figma

Conclusion

What You Will Learn?

  • Do you want to learn how to use different techniques to Design and Create Professional, Unique and Modern Website Landing Page Hero Section with Prototype, Animation, Motion Design & Interaction both on Web and Mobile like a pro in Figma? This is the right course for you..
  • This course is exactly what you need and have been looking for. This comprehensive course will teach you all what you need to start your journey towards designing and creating best User Interface and User Experience with Prototype, Animation, Motion Design & Interaction in Figma. Whether you are just starting out on how to create and design in Figma, this course would help you speed up your progress..
  • This course is different form the other ones you’ll find on Udemy. Just wait and see, you’ll judge better for yourself!.
  • I'll take you step-by-step through engaging video tutorials and teach you everything you need to know to succeed as an Figma expert in Hero Section Landing Pages Design..
  • The course includes over 6 hours of HD video tutorials and builds your User Interface and User Experience knowledge with fun projects..
  • What will you learn from this course?.
  • You'll learn how to build a professional Hero Section of a Brand's landing page in Figma.
  • You'll learn how to use the Figma Prototype & Animation.
  • You'll learn how to make Motion Design and make elements interact.
  • You'll learn Auto layout, Variables and Components in Figma.
  • You'll learn how to create simple wireframes in Figma.
  • You'll work with fonts & colors in Figma.
  • You'll learn the principles of User Interface Design.
  • You'll learn easy-to-tweak designs using re-usable components & styles in Figma.
  • You'll learn UI/UX best practices using the latest trends in the industry.
  • You'll learn the Figma fundamentals.
  • You'll learn how to use free UI kits & plugins in Figma.
  • You'll learn how to use shortcuts professionally in Figma.
  • You'll learn how to export in Figma.
  • Why is this course different and special?.
  • I teach you from beginners’ level to advanced level step by step.
  • I teach you with fun projects for more understanding.
  • I elaborate and emphasize more on difficult topics and areas.
  • I gave you a downloadable resource file with exercise files and several fonts for you to follow along with me and enjoy the course.
  • By the time you finish this course you will be able to design and create Professional, Unique and Modern Website Landing Page Hero Section with Prototype, Animation, Motion Design & Interaction both on Web and Mobile like a pro in Figma. You will be a Pro in your field and surpass your other colleagues because you have learnt more advanced techniques and methods of designing and creating a Hero Section Landing Page..
  • Feel free to ask me any questions..
  • I can’t wait to see you in the next lecture!.
  • Go ahead and click the play button, and I'll see you in the next lecture.
  • You are welcome.
  • Enjoy!.
  • Download the resource files: https://drive.google.com/drive/folders/1utuhs3oKunHGNmg6Yb9WtgTltTOV0Aeq?usp=drive_link.