Figma Training for non-designers

Ya-Ching
6 min readOct 24, 2022

--

Have you ever joined a new team and realized your stakeholders don’t know how to use Figma or other design tools? They often pin you asking for design files’ because they have a hard time finding the rightFigma files.

In the following article, I will share my experience in offering a Figma training session for stakeholders who are new to this tool. I facilitated a 1.5-hour Figma training session for coworkers in my product team. This article will highlight the problems and pain points that novice users have and how you could build a tool training session that is engaging and informative.

This is how the story started:

My manager asked me to offer a Figma training for stakeholders in my product space which includes 10+ Product managers, 50+ developers, and 2 agile leads. What jumps into my mind immediately is: what’s the pain point that people have while using Figma and what are the most important things they should know in order to complete their tasks efficiently?

In order to understand the problems better, these are my steps to frame the scope and the structure of the training:

  1. Knowing your users: in order to know my co-workers' pain points using Figma, I set up quick calls with different roles in my team, including 2 agile leads, 3 developers, and 2 PMs.
  2. Knowing where you are as a team: This is a stage to align the designers on your team and ensure you have a consistent approach using Figma. I set up quick calls with other designers on my team to understand:
  • How do they use Figma to collaborate with stakeholders?
  • Is there any framework that has been used widely by our team already?
  • Is there any framework that is good and hasn’t been introduced to other designers but we could adapt in the future?

You may wonder if it is a good idea to have individuals follow the same process as designers usually have their own approach when it comes to design and collaboration. I totally agree with you and I would say that, in this stage, just keep your team’s approach at a high level — how you name design files, how you set projects and files in your workspace, and how you use pages in design files — if you haven’t already.

3. Knowing your organization’s Figma Plan and how your organization structures the Figma workplace: This is an important stage that is often forgotten by us. Each Figma plan is different, it affects how your organization’s workplace and the users’ access to files. It took me a while to learn that with my organization plan and settings, my co-workers can’t see our project space. What they have been seeing for a long time is only the “recent” panel on Figma, and this explains why they have difficulties finding the right files — because our mental model of the tool is totally different.

Resource: Figma plan

After collecting the information I need, I started to draft my training material. There are many great resources online already. A lot of the content I created was inspired by an open source shared by the dropbox design team. (I also borrowed the presentation theme from it).

I break my training into 4 different sessions as below:

  1. Login: The first part of the training shows your audience how to set up a Figma account properly using SSO and how to log in if you are a first-time user. This is a very short session I put at the begging of the training intentionally. 2 reasons here: It might be daunting for people who haven’t used Figma if we jump right into the interface. Setting an account up can help first-time users get ready, and also make people who already know this step feel confident enough to move forward. This is also a stage to ensure everyone has their Figma open properly. But it really depends on how experienced is your audience, you can also replace this with a fun warm-up activity using Figma.
  2. Structure: This is a step to build a mental model for your audience. Introducing how the workplace is set up based on your organization’s plan. Things I included in this section: How many types of users are there, and where are the design teams’ projects located? Stay high level in this stage and don’t get into too much detail unless your audience is expert user.
Example of Figma structure in an organization plan

In this section, I also walk my coworker through the “recent” panel, explaining how we named our design file, and how can they manage the recent panel by changing views or deleting outdated files.

Example of structure slide

3. Navigation: This is a section I put more focus on. Based on what I have observed, many of my co-workers quit the tool because they don’t know how to navigate themselves in a design file. I break this session into 3 parts:

  • Navigation in a design file: In this section, I covered how to go to different pages, and use breadcrumb, the toolbar, and the property panel to access Inspect & comments.
Page panel, Breadcrumb, Toolbar, and property panel introduced
  • Using shortcuts to navigate on a PC: Most of my co-workers are using virtual desktops on PC and that experience is very different from MAC users. It’s not that easy to zoom in/out and also not very flexible using the scrollbar to scroll up /down to select objects in a virtual machine environment. How to select frames and using deep links are very important for developers when they are looking at your design and codes.
Example of shortcut introduction
  • Comment Feature: we all know how important the comment feature is when collaborating asynchronously. To make sure everyone has a chance to learn this feature, I borrow a virtual office template for my co-workers to decorate and leave comments to each other. This was a very fun and engaging moment, people were very into this section and asked many good questions. You would also learn if they know other techniques they learned in the previous sections.
Comment Activity

4. Advanced: This is a session where I introduce features that are nice to learn but not a requirement while collaborating. I included branches, real-time watching, and version history. The whole point of this session is to help my audience understand designers’ workflow a bit better: how we use branching, and how can we retrieve old designs (if things are deleted by accident!)

This was a 90 minutes training with 30+ coworkers, and I ended the session with a 5 mins retro because I want to know what people are interested in or feel confused about, this will help me to tailor other training in the future. I am pretty sure I am not going to solve all the problems after this training so continuous improvement and feedback are very important :)!

I found this training had built bonds between the UX team and other teams in my product area. I would highly recommend spending some time with your stakeholders, and teaching them how to use Figma if they don’t know already! Figma also offers different levels of training sessions for companies but I think we as designers know our team better and are able to dive deep into the problems! If you have done similar training for your team before, welcome to share your experience with me!

--

--

Ya-Ching

UX Designer works in financial industry, designing internal tools for employees