Learn How to Design a Website in Figma

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.

What's inside

Syllabus

Figma Essentials (File Setup)

Create a Figma Account

Figma Browser vs App

Web Design

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Uses Figma, a leading design tool, which is essential for modern web and app design, making it highly relevant for those entering the field

Focuses on basic principles and workflows through a hands-on design project, which builds a strong foundation for beginners in Figma

Covers prototyping and developer hand-off, which are crucial steps in the web design process, ensuring practical application of learned skills

Includes sections on both website and dashboard design, which broadens the scope of skills and knowledge for different types of projects

Features an updated section on Autolayout, which is a key feature in Figma for creating responsive designs, keeping the content current

Teaches how to make it easy for developers to export assets, which streamlines the design-to-development workflow and improves collaboration

Reviews summary

Figma website design for beginners

According to learners, this course provides a solid foundation perfect for beginners looking to learn Figma for web and dashboard design. Students frequently highlight the clear and concise explanations provided by the instructor, who is often described as knowledgeable and easy to follow. The practical, hands-on projects, particularly the website and dashboard designs, are seen as a major strength, helping learners apply concepts immediately. While some reviews mention the content is quite introductory, most agree it successfully teaches the essential Figma tools and workflows needed to start designing, making it a great starting point.

Focuses on basics, may need more advanced study.

"While great for beginners, it doesn't go into very advanced Figma techniques or complex UI patterns."

"It covers the basics well, but you'll need to look elsewhere for truly in-depth or niche topics."

"Good introductory level, but not sufficient if you're looking for intermediate or expert level Figma skills."

"The course provides a foundation; further learning is needed for more complex design challenges."

Teaches core Figma tools and workflows.

"The course does a great job covering the essential tools and features you need in Figma."

"I learned all the fundamental Figma skills required to start designing thanks to this course."

"It covers the core concepts like frames, components, prototyping, and layout effectively."

"Provides a solid overview of Figma's main capabilities needed for web design."

Instructor is knowledgeable and experienced.

"You can tell the instructor knows his stuff. His experience shines through the lessons."

"Pierluigi's expertise is evident. He teaches best practices and efficient workflows."

"A very knowledgeable instructor who clearly has real-world experience in design."

"The instructor's tips and tricks were super valuable, showing his deep understanding of Figma."

Hands-on projects are valuable learning tools.

"Building the website and dashboard project was incredibly helpful. Applying what I learned felt natural."

"The project-based approach is fantastic. I feel like I actually designed something real by the end."

"Loved the practical exercises. They helped solidify my understanding of Figma workflows."

"Designing along with the instructor on actual projects made the learning very effective and engaging."

Instructor explains concepts clearly and effectively.

"The instructor explains things in a very clear and understandable way. Made complex tools seem simple."

"Pierluigi is great at explaining the concepts step-by-step. His teaching style is easy to follow."

"I really appreciated the clarity of the explanations throughout the course. No jargon, just clear instructions."

"The instructions are precise and easy to replicate, which is crucial for beginners learning a new tool."

An ideal starting point for newcomers.

"This course is perfect for someone who is a beginner in Figma. I was able to follow along easily and learn the basics."

"Definitely recommend this for beginners wanting to get into UI/UX design using Figma. It covers the essentials well."

"As a complete novice, I found this course easy to understand and follow. It really breaks down Figma for beginners."

"Perfect for getting started with Figma. The pace is just right for absolute beginners."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Learn How to Design a Website in Figma with these activities:

Review Basic Design Principles

Show steps

Reinforce your understanding of fundamental design principles to improve your Figma designs.

Show steps

Read articles or watch videos on design principles.
Analyze existing websites and identify design principles in use.
Practice applying design principles in simple design exercises.

Read 'Don't Make Me Think' by Steve Krug

Show steps

Learn about usability and user experience principles to create more user-friendly website designs in Figma.

View Don't Make Me Think, Revisited: A Common Sense... on Amazon

Show steps

Obtain a copy of 'Don't Make Me Think'.
Read the book and take notes on key usability principles.
Apply the principles from the book to your Figma designs.

Practice Figma Shortcuts

Show steps

Improve your efficiency in Figma by mastering essential keyboard shortcuts.

Show steps

Create a list of common Figma shortcuts.
Practice using shortcuts while working on small design tasks.
Review and reinforce shortcuts regularly.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Read 'Refactoring UI' by Adam Wathan and Steve Schoger

Show steps

Improve your understanding of UI design principles by reading a popular book on the topic.

View Melania on Amazon

Show steps

Obtain a copy of 'Refactoring UI'.
Read the book and take notes on key concepts.
Apply the principles from the book to your Figma designs.

Explore Advanced Prototyping Techniques

Show steps

Deepen your prototyping skills in Figma to create more interactive and realistic website demos.

Show steps

Find tutorials on advanced Figma prototyping features.
Follow the tutorials to create interactive prototypes.
Experiment with different prototyping techniques.

Redesign an Existing Website in Figma

Show steps

Apply your Figma skills by redesigning a website to improve its UI/UX.

Show steps

Choose a website to redesign.
Analyze the existing website's strengths and weaknesses.
Create a new design in Figma based on your analysis.
Prototype the redesigned website.

Create a Figma Plugin Guide

Show steps

Share your knowledge of Figma plugins by creating a guide for other users.

Show steps

Research popular and useful Figma plugins.
Write a guide explaining how to use the plugins.
Include screenshots and examples in your guide.
Share your guide online.

Career center

Learners who complete Learn How to Design a Website in Figma will develop knowledge and skills that may be useful to these careers:

Web Designer

A Web Designer plans, creates, and codes internet sites and webpages, many of which combine text with sounds, pictures, graphics, and video clips. This course is a direct pathway into web design as it encompasses the entire process of designing a website in Figma. You will gain experience with the latest design tools and workflows, which are directly applicable to creating modern websites. If you have an affinity for visual aesthetics and seek to build functional and appealing websites, this course is a great place to start.

See salaries and explore the career path for Web Designer

User Experience Designer

A User Experience Designer enhances user satisfaction by improving the usability, accessibility, and desirability of websites and applications. This course helps you understand how to design user flows within Figma, a crucial skill for UX design. Through designing a website and dashboard app from scratch, you can learn how to create intuitive and user-centered designs. If you're keen on understanding user behavior and translating that into effective designs, this course will show you how to do just that.

See salaries and explore the career path for User Experience Designer

User Interface Designer

A User Interface Designer focuses on the aesthetics and layout of digital interfaces, ensuring they are visually appealing and easy to navigate. This course helps build a portfolio piece for your website, showing a practical approach to UI design using Figma. Because the course explores the latest design tools and workflows, you can apply these insights to create intuitive, engaging user interfaces. If you are passionate about creating seamless and visually pleasing digital experiences, then this course is right for you.

See salaries and explore the career path for User Interface Designer

Graphic Designer

A Graphic Designer creates visual concepts, using computer software or by hand, to communicate ideas that inspire, inform, and captivate consumers. This course helps enhance your digital design skills, specifically in Figma, a leading tool in the graphic design industry. You will learn to design a website and dashboard app, providing you with practical experience in digital design. If you are aiming to expand your graphic design portfolio with web-based projects, this course offers a focused and effective learning experience.

See salaries and explore the career path for Graphic Designer

Visual Designer

A Visual Designer is responsible for the aesthetic elements of a digital product, including layout, typography, and color schemes. This course enhances your visual design skills by guiding you through the process of creating a website and dashboard app in Figma. You will refine your ability to create visually appealing designs and understand how to translate design principles into digital interfaces. If you're aiming to improve your design skills, this course would be a great stepping stone.

See salaries and explore the career path for Visual Designer

Interaction Designer

An Interaction Designer focuses on the way users interact with digital products, aiming to create intuitive and engaging experiences. The website and app prototyping aspects of this course will provide insights into how to design effective user interactions within Figma. You can learn to design and prototype interactive elements, enhancing your understanding of user-centered design. If you are interested in shaping how users connect with technology, this course may hone your design thinking skills.

See salaries and explore the career path for Interaction Designer

Product Designer

A Product Designer focuses on the overall design and function of a product, whether it's a physical item or a digital application. This course may give you additional insight into the design process, showing you how to design a website and dashboard app from scratch using Figma. You can learn how to prototype and refine designs based on user needs and business goals. If you are interested in being part of the end-to-end design and strategy of digital products, you can develop applicable skills here.

See salaries and explore the career path for Product Designer

Art Director

As an Art Director, you will be responsible for the visual style and images used in various projects, ensuring they align with a brand's identity and message. This course will empower you to understand the intricacies of website and dashboard app design in Figma, enabling you to provide informed guidance to design teams. You will learn to design from scratch using the latest design tools and workflows, which will help guide your visual concepts. If you're aiming to enhance your understanding of digital design, this course will likely be helpful.

See salaries and explore the career path for Art Director

Information Architect

An Information Architect organizes and structures content on websites and applications to ensure usability and findability. The website and dashboard design aspects of this course can provide insights into how to structure information effectively within Figma. You can learn to design user flows and navigation systems, enhancing your understanding of information architecture principles. If you are interested in maximizing the accessibility of digital products, this course is a possible option.

See salaries and explore the career path for Information Architect

Creative Director

As Creative Director, you're responsible for overseeing the creative direction of projects, ensuring they meet strategic goals and maintain brand consistency. This course may allow you to understand the fundamentals of website and dashboard app design in Figma, enabling you to provide valuable insights to design teams. You can learn to design from scratch using the latest design tools, enhancing your ability to guide visual strategies. If you're aiming to broaden your design knowledge, this course can be of some help.

See salaries and explore the career path for Creative Director

Brand Manager

As Brand Manager, you will manage a brand's image and messaging to increase brand awareness and loyalty. This course may introduce you to the principles of website and app design, allowing you to better understand the visual elements that contribute to brand identity. By learning the design process in Figma, you can collaborate more effectively with design teams to ensure brand consistency across digital platforms. If you want to augment your knowledge of design, this course is a possible option.

See salaries and explore the career path for Brand Manager

Frontend Developer

A Frontend Developer implements visual elements and user interfaces of a website or web application, often translating designs into code. This course helps you understand design principles and how designs are created in Figma, which facilitates better collaboration with designers. Learning the basics of website and dashboard app design can improve your ability to implement designs accurately and efficiently. If you're looking to enhance your understanding of the design process, this course may be useful.

See salaries and explore the career path for Frontend Developer

Digital Strategist

A Digital Strategist develops and implements digital strategies to achieve business goals, including website and application development. This course may enable you to understand the fundamentals of website and app design, allowing you to provide informed insights during strategy development. By learning to design in Figma, you can gain a deeper appreciation for the visual elements of digital strategy. If you want to enhance your understanding of the design process, this course might be a decent match.

See salaries and explore the career path for Digital Strategist

Motion Graphics Designer

A Motion Graphics Designer creates animated graphics and visual effects for various media, including websites and apps. This course may introduce you to the basics of designing interfaces in Figma, which can be a useful skill for incorporating motion graphics into web designs. You can learn about layout and design principles that are foundational to creating visually engaging animations. If you're seeking to broaden your skillset, then gaining knowledge of Figma may improve your design workflow.

See salaries and explore the career path for Motion Graphics Designer

Digital Marketing Specialist

A Digital Marketing Specialist develops and implements marketing campaigns to promote products and services online. This course may allow you to understand the basics of website and app design, enabling you to better collaborate with design teams on marketing materials. By learning to design in Figma, you can gain a deeper appreciation for the visual elements of digital marketing. If you want to enhance your understanding of the design process, then this course might be a match.

See salaries and explore the career path for Digital Marketing Specialist

Learn How to Design a Website in Figma

What's inside

Syllabus

Traffic lights

Save this course

Reviews summary

Figma website design for beginners

Activities

Career center

Reading list

Share

Similar courses

Udemy Buyer Protection & Guarantee

Free Lecture Previews

30-Day Money-Back Guarantee

Verified Academic & Industry Partner