Figma Resources

Workplace Context

As a new team member at a digital agency, you will be expected to familiarize yourself with Figma, one of the most widely-used tools in web design and development. Figma is essential not only for design but also for efficient handoffs between designers and developers. By mastering Figma’s tools and best practices, you will ensure that the designs you create or receive from colleagues are easy to interpret, modify, and implement. This lab will guide you through foundational Figma resources, preparing you to leverage Figma for team collaboration, prototyping, and design implementation.

Learning Objectives

By the end of this lab, you will be able to:

• Explain the basic design flow in Figma.
• Identify and use important Figma tools and controls.
• Build simple prototypes using Figma.

Overview

In this lesson, you will explore a curated list of resources that provide foundational knowledge about Figma’s design process, tools, and prototyping features. Once you have completed the required viewing, you will apply what you have learned by creating a simple design in Figma, leveraging the tools and techniques covered.

Required Viewing

The following videos are required viewing in order to prepare you for future assignments and assessments. These videos last under an hour in total, but feel free to pause, rewind, and review them at your own pace, following along in your own Figma designs, if time allows.

These videos, the Figma for Beginners tutorial series, were put together by Figma to introduce new Figma users to the core concepts of working with Figma: exploring ideas, creating designs, building prototypes, and working with a team.

What’s Figma?

Figma For Beginners: Explore Ideas

Figma For Beginners: Create Designs

Figma For Beginners: Build Prototypes

Figma For Beginners: Prepare for Handoff

Tip: As you watch these videos, try to replicate what you see in your own Figma file. This hands-on practice will help solidify your understanding of the tools and techniques introduced.

Once you have finished viewing the above, you are done here! However, we have included additional resources below that you are encouraged to review as time allows.

Optional Additional Resources

After completing the required viewing, your task is to create a simple Figma design that demonstrates your understanding of the tools and concepts covered. This design can be a basic wireframe or prototype that incorporates essential elements, such as frames, text, shapes, and interactions.

Assignment Instructions:

1. Open Figma and start a new design project.
2. Create a basic layout that includes:
   • At least two frames representing different screens or sections.
   • Text elements with labels or headings.
   • Shapes that represent buttons or interactive elements.
3. Add a simple prototype link between frames to simulate navigation or interaction.

Note: This is a basic assignment aimed at reinforcing the foundational concepts covered in the videos. Your design does not need to be polished or complex.

(Optional) Step 3: Additional Resources

The Figma Best Practices resource contains an index of guides to help you make the most of Figma, from creation to collaboration and more. There are guides on:

• Design branches , which act much like git branches, allow you to safely explore new features without altering your main file.
• The designer-developer workflow , explains how designers and engineers can work together to create more robust products with more efficient collaboration.
• …and much more!

The Figma Community is another must-visit resource that contains a massive collection of templates, plugins, UI kits, design inspiration, visual assets, and complete designs for development practice!

Finally, this 30-minute “Figma Masterclass for Beginners” by Jesse Showalter dives into the basics of Figma from another perspective, which you may find helpful when attempting to grasp the simplicities and complexities of a software like Figma.

Knowledge Check

Summary

In this training, you explored essential resources that will guide you in using Figma effectively. From understanding Figma’s core tools to building prototypes and using community resources, you now have a foundation to create designs and prototypes that communicate effectively with both designers and developers. Mastering these resources will enhance your confidence as you continue to work on design projects throughout the course.

References

• Figma Help Center 
• Figma YouTube Channel