Learn Figma

Learn Figma with these hands-on guides. Master collaborative UI/UX design, prototyping, and team workflows with these easy-to-follow Figma tutorials.

Getting started with Figma

  • Introduction To Figma (Free Beginners’ Course)

    Introduction To Figma (Free Beginners’ Course)

    Adi Purdila
  • How to Create a Frosted Glass Effect in Figma

    How to Create a Frosted Glass Effect in Figma

    Adi Purdila
  • All Figma content:

    1. Figma Grids in Under 30 Minutes

      Figma Grids in Under 30 Minutes

      Course Beginner

      Figma is a superb tool for UI design, and one of the things it’s really good at is creating grids. Using a grid is a vital part of many design projects, so...

    2. New Course: Figma to HTML

      New Course: Figma to HTML

      Tutorial Beginner

      In our new course, Figma to HTML: Code Up a Single-Page Design, you'll master Figma by going through the process of converting a Figma website design to HTML.

    3. Figma to HTML: Code Up a Single-Page Design

      Figma to HTML: Code Up a Single-Page Design

      Course Beginner

      In this course, we’ll take a one-page design for a travel website in Figma and go through the process of converting it into HTML. In the process, we’ll...

    4. Create an Animated SVG Logo for International Women’s Day 2019

      Create an Animated SVG Logo for International Women’s Day 2019

      Tutorial Beginner

      To mark International Women's Day 2019 we’ll be creating an animated SVG version of the event’s logo you can use along with this year’s hashtag...

    5. Which of Figma’s Pricing Tiers is Right for You?

      Which of Figma’s Pricing Tiers is Right for You?

      Tutorial Beginner

      Figma is a free-to-use design application, but it also offers added features for paying subscribers. Let’s take a look at the differences between Figma’s...

    6. Create a Themeable Site Design in Figma

      Create a Themeable Site Design in Figma

      Course Beginner

      Figma is a superb vector-based tool for interface design. As part of its suite of functionality it includes a “styles” system, whereby various colors,...

    7. Quick Tip: How to Use Adobe Illustrator Files in Figma

      Quick Tip: How to Use Adobe Illustrator Files in Figma

      Tutorial Beginner

      In this quick tip I’m going to show you how to get an Adobe Illustrator file into Figma, without needing Adobe Illustrator.

    8. Collaborative Interface Design With Figma

      Collaborative Interface Design With Figma

      Tutorial Beginner

      In this article you’ll see for yourself why teams are taking such an interest in Figma, as we step you through how you can take advantage of its full gamut...

    9. Figma General and Miscellaneous Tips

      Figma General and Miscellaneous Tips

      Tutorial Beginner

      To wrap up our series of Figma tips and tricks, here are three quick tips which fall into the “miscellaneous” category.

    10. Figma Handoff and Testing Tips

      Figma Handoff and Testing Tips

      Tutorial Beginner

      Smooth collaboration with developers is a huge part of what Figma offers designers, so in this collection of tips and tricks we’ll be looking at handoff and...

    11. Figma Layout Tips

      Figma Layout Tips

      Tutorial Beginner

      When working with layouts in Figma (which will be often) you’ll need to be comfortable with resizing, measurements, spacing, alignment, and masking. Here are...

    12. New Course: Using Figma for SVG Design

      New Course: Using Figma for SVG Design

      Tutorial Beginner

      In our new short course, Using Figma for SVG Design, you’ll learn how to use Figma for vector editing with SVG in mind, and how to generate SVGs that...