Hey I’m Seth!

Founder, No Code MBA
Each week I share the latest No Code MBA tutorials, interviews, and tool recommendations with 20,000 subscribers.
I'd love for you to join as well.
2 min read only
Practical lessons
Free access to content
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form...
Ends 5/2/24
Our Spring Sale is now live! Get 50% off an annual membership  →

Figma Fundamentals - Design Your Own Landing Page

4.5 hours of on-demand video

Created by
Adam Tossell
Figma Fundamentals - Design Your Own Landing Page

4.5 hours of on-demand video

Created by
Adam Tossell

Preview:

What's inside this tutorial?

Figma is an intuitive design tool that empowers you to craft beautiful, functional user interfaces. In this beginner-friendly project, you'll build a solid foundation in Figma by designing an impressive landing page from the ground up.

As you progress through the course, you'll learn crucial Figma skills such as navigating the interface with confidence, organizing your work with frames and groups, and creating responsive designs using auto layout. You'll also explore the creation of style guides for typography, colors, icons, gradients, and images, ensuring a cohesive and polished design.

By constructing the various sections of the landing page, including the navigation bar, hero section, feature sections, testimonials, FAQs, and footer, you'll gain practical experience in applying your Figma skills to a real-world project. You'll also discover how to create reusable components, like buttons, to optimize your workflow and maintain consistency throughout your design.

Here's a taste of what you'll learn:

  • Confidently navigating the Figma interface
  • Knowing when to use frames and groups for optimal organization
  • Using auto layout to create responsive designs
  • Developing style guides for typography, colors, icons, gradients, and images
  • Building reusable components to boost efficiency
  • Designing a professional landing page with a navigation bar, hero section, feature sections, testimonials, FAQs, and footer

By the end of this project, you'll have a firm grasp of Figma fundamentals and the skills to create stunning, professional-looking designs. These abilities are highly valued in various industries, from web design and app development to marketing and graphic design. Whether you're aiming to pursue a career in UI/UX design or simply want to level up your digital design skills, this project will provide you with a robust foundation to build upon.

Here's what you can expect:

  • Navigating the Figma interface with confidence
  • Using frames and groups effectively for organization
  • Leveraging auto layout for responsive designs
  • Creating style guides for typography, colors, icons, gradients, and images
  • Building reusable components to optimize workflow
  • Designing a professional landing page from scratch
  • Applying Figma skills to real-world projects
  • Gaining a strong foundation in UI/UX design

Who is this for?

  • Beginners who want to learn Figma from the ground up
  • Designers looking to expand their skills and create professional landing pages
  • Entrepreneurs and marketers who want to design their own websites
  • Anyone interested in pursuing a career in UI/UX design
Get full access with a 60-day money-back guarantee

About the instructor

Adam Tossell

Adam Tossell is a freelance product and web designer based in the U.K., specializing in Figma, Framer, Webflow, and Bubble.

Formerly the design lead at Buildcamp, Adam has a strong passion for creating end to end application and web designs with a strong emphasis on form & functionality.

His work features simple, clean and elegant UI with flair added in to complement the design. He always works with the user experience and the key app functionality as the primary focus and driver behind design decisions.

Lessons

1
.
Intro to the course
5:26
2
.
Navigating around Figma
24:37
3
.
When to use Frames and Groups
15:46
4
.
Auto Layout and why its a Figma superpower
22:51
5
.
Typography Style Guide
29:34

More projects included in

The Ultimate Guide to Figma

No related items.
Subscribe to our premium courses
Access this course + our full library of no-code and AI courses!
60-day money back guarantee
Over 350 step-by-step lessons
Join 4,500+ members
Existing user?
Login