Figma for frontend web developers

Boost your frontend web development skills with this beginner-friendly course about prototyping web projects using Figma.

Created 21st Jun 2024
English

Register Your Interest

I'm currently working on the final parts of this course , so enter your email below and I'll send you a message when it's been released.

Course Level beginner
Course Language English
Course Chapters 10 chapters
Course Videos 33 videos

Course overview

"Figma for Frontend Web Developers" is a comprehensive video course designed to bridge the gap between design and development. This course delves into the fundamentals of Figma, a powerful design tool that has revolutionised the way teams collaborate on UI/UX projects. Through a series of engaging lessons...

"Figma for Frontend Web Developers" is a comprehensive video course designed to bridge the gap between design and development. This course delves into the fundamentals of Figma, a powerful design tool that has revolutionised the way teams collaborate on UI/UX projects. Through a series of engaging lessons, you'll learn how to navigate the Figma interface, utilise essential features, and implement best practices to streamline your workflow.

Whether you're new to design tools or looking to enhance your skills, this course will guide you through the essentials of using Figma. We'll cover everything from installation and basic navigation to advanced features like components, auto layout, and exporting assets. By the end of this course, you'll be comfortable using Figma to create, inspect, and export designs for your web projects.
What you will learn
  • Understand what Figma is and how to install and access it.
  • Learn the differences between the cloud and desktop app versions of Figma.
  • Explore the benefits of free versus pro accounts.
  • Navigate and use the Figma interface effectively.
  • Learn basic and advanced navigation techniques in Figma.
  • Master the use of essential Figma tools.
  • Understand what Figma is and how to install and access it.
  • Learn the differences between the cloud and desktop app versions of Figma.
  • Explore the benefits of free versus pro accounts.
  • Navigate and use the Figma interface effectively.
  • Learn basic and advanced navigation techniques in Figma.
  • Master the use of essential Figma tools.
  • Understand core Figma concepts like frames, groups, and layers.
  • Create and apply text styles and understand font properties.
  • Create and manage colour styles, use gradients, and apply effects.
  • Inspect design elements, measure distances and sizes, extract CSS properties, and export assets.
  • Explore and use Figma plugins to enhance your workflow.
Table of contents

Below, you'll find the table of contents for all the videos available in this course. Click on a chapter to expand and see the videos included.

Course preview
Get a quick overview of what this course is about.
Course goals
The goals of this course are to assist you in setting up Figma and to provide a comprehensive introduction to Figma and its key features.
Course prerequisites
No prior experience of Figma required or any web development experience - this is a beginner-friendly course.
What is Figma
In this video, you'll learn what Figma is, its key features, and why it's a popular choice for designers.
Figma installation
This video will guide you through the installation process for Figma and show you how to access it both as a cloud application and a desktop app.
Figma cloud versus Figma desktop
Learn the differences between the cloud and desktop versions of Figma, and understand which one might be best for your workflow.
Free Figma account versus paid Figma account
Explore the differences between Figma's free and pro accounts, including the benefits and features of each.
Figma interface
In this video, we'll take a detailed tour of the Figma interface, helping you become familiar with its layout and features.
Basic navigation
Learn how to navigate around Figma, including zooming, panning, and using the toolbar to access different tools.
The layers panel
This video will teach you how to navigate and manage the layers panel, an essential part of working efficiently in Figma.
Selection tool
Discover how to use the Selection Tool to select, move, and resize elements in your Figma projects.
Frame tool
Learn how to create and manage frames, which are the building blocks of your Figma designs.
Shape tools
Explore the various shape tools in Figma and how to use them to create and edit basic shapes.
Text tool
Understand how to use the Text Tool to add and style text in your Figma designs.
Frames, groups & layers
Learn the differences between frames, groups, and layers, and how to use them effectively in your designs.
Layout grids
Discover how to use layout grids to create structured and consistent designs.
Auto Layout
Understand the Auto Layout feature and how it can help you create responsive and flexible designs.
Components
Learn how to create and use components to maintain consistency and efficiency in your designs.
Variables
Explore how to use variables in Figma to manage and update design properties easily.
Styles
Learn how to create and apply styles for colors, text, and effects in your Figma projects.
Constraints & resizing
Understand how to use constraints and resizing options to create responsive designs that adapt to different screen sizes.
Understanding font properties
Explore the different font properties available in Figma and how to use them to style your text effectively.
Creating & applying text styles
Learn how to create and apply text styles to maintain consistency in your typography.
Creating & applying colour styles
Learn how to create and apply color styles to ensure consistency in your design's color scheme.
Managing colour styles
Understand how to manage global color styles to make updates across your entire project.
Using gradients and applying additional effects
Discover how to use gradients and apply effects like shadows and blurs to enhance your designs.
Inspecting design elements
Learn how to inspect design elements to understand their properties and how they are constructed.
Measuring distances and sizes
Understand how to measure distances and sizes between elements to ensure accuracy in your designs.
Extracting CSS properties
Learn how to extract CSS properties from your designs to streamline the handoff process to developers.
Exporting assets
Understand how to export assets such as images and icons from Figma for use in your web projects, including different formats and settings.
Plugins overview
Explore the world of Figma plugins, learning how to browse, install, and use plugins to enhance your workflow and add new functionalities to your design process.
Popular Figma plugins
Let's a closer look at some of the more useful Figma plugins.
Course wrap up
That's it - we're done here! Well done on completing another frontend web development tutorial series!
Course FAQs
What is this?
This is a web development video course designed to help you improve your frontend development skills. The course is broken down into smaller chapters, and each chapter contains a series of related videos.
When can I enrol?
When the course is ready, the "Register your interest" button will be replaced with an "Enrol Now" button. Be sure to add your email via the "Register your interest" button to be notified when the course is ready.
Additional resources
  • Frontend web development projects

    Beginner-friendly projects focusing on HTML, CSS, and JavaScript.

    View Projects
  • Free website templates

    Collection of free, high-quality website templates for your next project.

    View Templates
  • Frontend web development quizzes

    Test your knowledge on frontend subjects such as HTML, CSS, and JavaScript.

    View Quizzes