What We Do

Company

Resources

Events

Blog

Free Consultation

ahoy@headway.io

(920) 309 - 5605

Figma Tutorials for Beginners

Learn Figma with the design team at Headway. A free course to get started in web and product design.

Lesson one

Learn the basics of Figma

In the first lesson, we will do a basic introduction to using Figma to get everyone familiar with the interface and the design tools within the application. We share tips, tricks, and our approach to designing websites and products as a team in Figma collaboratively at Headway.

View All Event Notes
Lesson two

Creating and managing components in Figma

Components are the building blocks of design systems. In this lesson, the design team at Headway shares best practices and recommendations for designing components with Figma so you can create better work and save time when working on large projects. Even with a large team involved.

View All Event Notes
Lesson three

Creating prototypes in Figma

In this third lesson, the design team at Headway will be sharing best practices and recommendations for creating interactive prototypes so that you can do user testing with Figma. This allows you to get feedback so you can make effective changes before a project is handed off for development.

View All Event Notes
Lesson four

User testing with Figma prototypes

In this final lesson, we share our process and approach to conducting a customer interview to get meaningful feedback on your designs. We conducted a live interview on a product we are working on so you can see first hand what it can be like and identify opportunities to create or improve your own process. After the interview, we had a Q&A and discussed past experiences, tools, key learnings, and what next steps would be on any project.

Become a Figma design system pro

We have a premium video course for product designers that want to master all aspects of design systems in Figma.

With our video course, you'll learn how to create a system that works for you—not against you.

Learn more about our design system course for Figma

20+ videos with Figma templates, resources, and guides, with more coming soon!

Who is this course for?

  • You're alone or on a small design team that collaborates with a lot of developers
  • You’re struggling to keep up with the ever-changing demands of adding new feature sets
  • You don’t have the time to scour the internet to keep up with evolving industry standards
  • You're comfortable working in Figma but want to leverage the power of design systems

Lessons included

Design system foundations

  • Why Design Systems?
  • Understanding Atomic Design
  • Sessions & Workshops to Run Before Starting a System
  • Abstracting Your Design System
  • Accessibility in Design Systems
  • Pitching a Design System to Stakeholders
  • Setting Up Your Files

Establishing building blocks

  • Establishing a Naming Convention
  • What are Design Tokens?
  • Establishing Type Tokens
  • Establishing Color Tokens

Component architecture

  • Component Properties
  • Base / Bulk Edit Components
  • Slot or Replace Me Components
  • Block Based Systems

Documentation and maintenance

  • Pattern Specific Documentation
  • Coordinating with Developer Handoff
  • Creating a Design System Governance Model
  • Advanced Design System Documentation
  • Measuring the Success of Your System

Learn more about the design system course for Figma

View All Event Notes

Learn the basics of Figma

In the first lesson, we will do a basic introduction to using Figma to get everyone familiar with the interface and the design tools within the application. We share tips, tricks, and our approach to designing websites and products as a team in Figma collaboratively at Headway.

View All Event Notes
Subscribe on YouTube

Creating and managing components in Figma

Components are the building blocks of design systems. In this lesson, the design team at Headway shares best practices and recommendations for designing components with Figma so you can create better work and save time when working on large projects. Even with a large team involved.

View All Event Notes
Subscribe on YouTube

Creating prototypes in Figma

In this third lesson, the design team at Headway will be sharing best practices and recommendations for creating interactive prototypes so that you can do user testing with Figma. This allows you to get feedback so you can make effective changes before a project is handed off for development.

View All Event Notes
Subscribe on YouTube

User testing with Figma prototypes

In this final lesson, we share our process and approach to conducting a customer interview to get meaningful feedback on your designs. We conducted a live interview on a product we are working on so you can see first hand what it can be like and identify opportunities to create or improve your own process. After the interview, we had a Q&A and discussed past experiences, tools, key learnings, and what next steps would be on any project.

Become a Figma design system pro

We have a premium video course for product designers that want to master all aspects of design systems in Figma.

With our video course, you'll learn how to create a system that works for you—not against you.

Learn more about our design system course for Figma

20+ videos with Figma templates, resources, and guides, with more coming soon!

Who is this course for?

  • You're alone or on a small design team that collaborates with a lot of developers
  • You’re struggling to keep up with the ever-changing demands of adding new feature sets
  • You don’t have the time to scour the internet to keep up with evolving industry standards
  • You're comfortable working in Figma but want to leverage the power of design systems

Lessons included

Design system foundations

  • Why Design Systems?
  • Understanding Atomic Design
  • Sessions & Workshops to Run Before Starting a System
  • Abstracting Your Design System
  • Accessibility in Design Systems
  • Pitching a Design System to Stakeholders
  • Setting Up Your Files

Establishing building blocks

  • Establishing a Naming Convention
  • What are Design Tokens?
  • Establishing Type Tokens
  • Establishing Color Tokens

Component architecture

  • Component Properties
  • Base / Bulk Edit Components
  • Slot or Replace Me Components
  • Block Based Systems

Documentation and maintenance

  • Pattern Specific Documentation
  • Coordinating with Developer Handoff
  • Creating a Design System Governance Model
  • Advanced Design System Documentation
  • Measuring the Success of Your System

Learn more about the design system course for Figma

View All Event Notes
Subscribe on YouTube

More design resources

The Manifest

Level up your mindset and skills for product strategy, design, and development from the Headway team. Subscribe to get updates on resources for startups and product teams.