Learn How to Design a Website in Figma

Name: Learn How to Design a Website in Figma
Rating: 4.6 (815 reviews)

Design a Website and Dashboard app from Scratch using Figma

Created byPierluigi Giglio

Last updated 10/2021

English

English [Auto],

What you'll learn

Figma Basic & Advanced principles
How to Use Icon Libraries for UI Design
Pro UI UX Design Workflows
Website and Apps Design Best Practices
How to Design a Website in Figma

Course content

4 sections • 12 lectures • 1h 55m total length

Create a Figma Account0:40
Sign up for Figma by visiting figma.com, choose sign up with Google or email, then access the main dashboard to continue with the next video.
Figma Browser vs App4:18
Explore creating a Figma file, organizing content with pages and layers, and using shapes like rectangles, stars, and polygons to manage document hierarchy.

Web Design: Homepage17:15
Design a website homepage in Figma by building a home frame, applying a 12-column layout, and implementing header buttons, dark mode, and a dashboard illustration with shadows.
Web Design: Contacts11:58
Design a contact us UI in Figma from scratch, reusing the home base, with inputs for name and email, a terms link, and a map with address via content real.
Web Design: Sign In / Sign Up Flow11:49
Learn to design a log in and sign up flow in figma, including log in with google and email options, with icons and call-to-action buttons.
Dashboard Design: Part 123:37
Design a dashboard in Figma by building a top-level menu, a side menu, icons, and typography. Create panels with avatars, bitcoin charts, and color gradients for structure.
Dashboard Design: Part 212:00
Design a bitcoin dashboard in Figma from scratch, using free assets from Atlas graphics called Blatner, build a graph with a main line and dashed lines, and prototype a state.

Creating the Prototype10:08
Rename frames to organize home, contact, log in, sign up, and dashboard. Create a prototype with hotspots and a master component for the menu to connect screens and enable transitions.
Cleaning Up and Mockups + Developer Hands-off12:08
Clean up the Figma file and organize layers, rename components, and group elements for a developer handoff, then share access, explain inspector mode, and export assets like HTML and CSS.

How to Make it EASY for Developers to Export Assets in Figma4:21
Share a Figma project with developers, grant view access, and use code stub to obtain font family, weight, size, line height, and layout spacing; export svg icons and png assets.
Autolayout (Updated)4:02
Explore autolayout in Figma by grouping buttons into frames with an outer layout, adjusting vertical and horizontal padding, spacing, and behavior for responsive compositions.
Extra Help in Figma2:57
Discover how to get extra help in Figma using the top-right help menu or top-left search, locate layers and components, and access official docs and community Q&A.

Requirements

Internet Access
You should know your way around computer basics

Description

In this course you’re going to learn how to design a website and dashboard app using Figma.

This course is perfect it if you’re a beginner with Figma and you’re looking to learn the basic principles and workflows by actually creating a design project at the same time.

We are going to design everything from scratch using the latest design tools and workflows and we'll finish up by fully prototyping the website and app.

But why should you learn Figma UI UX from me?

I’ll briefly introduce myself: my name is Pierluigi and I’m a full-time designer with over 8 years of experience.

After graduating with a BA Graphic Design from one of the top Design Universities in London I worked and managed hundreds of design projects for companies of all sizes and tech backgrounds, from Fortune 500 companies to Million-Dollar Companies that needed to raise their next round of funding.

On the side, I have also designed over 20 design products and my designs have been downloaded over 50000+ times.

I also have a design channel on Youtube with over 300 videos and I’m active on Dribbble and Instagram with over 30000 followers.

I had a deep passion for design ever since I was in high school and since this industry gave me so much, I want to give back by sharing the knowledge I gathered as a designer over all these years.

So join me today in this course and let's learn Figma, so that you can bring your designs to the next level.

Who this course is for:

Beginner UI/UX Designers
Design Students
UI/UX Designers
Graphic Designers
Web Designers
Entrepreneurs

Learn How to Design a Website in Figma

What you'll learn

Explore related topics

Course content

Figma Essentials (File Setup)2 lectures • 5min

Web Design5 lectures • 1hr 17min

Prototype and Presentation2 lectures • 22min

In Conclusion3 lectures • 11min

Requirements

Description

Who this course is for: