Figma Workshops

I noticed a pattern where designers often skipped tools that could enhance their workflow because they lacked the time to learn them. However, their efficiency and work quality improved when they did. This was especially true with Figma’s Auto Layout, which led me to start running training sessions for my team.

Role

Instructor

Duration

Every 2 Weeks (2024)

Tools + Skills

Figma, Mentorship

Jump to:

A Need for Training

Due to tight deadlines and heavy workloads, many designers struggled to fully learn and explore Figma. This resulted in inconsistent design files, project delays, and frustration across both design and development teams.

The Problem

How can we make learning Figma worthwhile for busy designers?

Interactive Figma Workshops

To increase Figma skills throughout the team, I organized interactive workshops that introduced Figma basics. I tailored the sessions to be engaging and relevant, enabling both beginners and experienced designers to adopt new skills quickly.

Introducing Basic Concepts

I started the workshop with a brief introduction to auto layout, frames, and components. I shared examples of its benefits to show the value of learning Figma. I kept the initial information concise, avoiding a lecture-style approach. I saved the detailed explanations for the hands-on portion of the workshop.

Graphic comparing 'Frames' and 'Groups' in Figma under the title 'Figma’s Building Blocks.' On the left, a brief explanation notes that frames are containers for design elements and groups are for simpler, temporary organization. The table on the right compares 'Groups' and 'Frames,' highlighting their definition, use cases, characteristics, and ideal use. Groups are for basic grouping of elements, while Frames allow for advanced layout and design control, ideal for responsive design.

Explaining the difference between frames and groups.

Figma Basics slide deck titled 'Auto Layout Functions,' featuring diagrams and instructions on how to use auto layout features in Figma. The content explains parent-child relationships, vertical and horizontal alignment, adjusting padding and spacing, absolute positioning, resizing options, and gaps between items. Two example boxes illustrate layout behavior with numbered elements. Key functions such as 'Resizing,' 'Direction + Alignment,' 'Gap/Margin/Spacing,' and 'Absolute Position' are highlighted across several panels.

An overview of the basics.

Embracing Auto Layout

Getting designers to adopt Auto Layout was difficult because it seemed daunting, and many didn’t see its value. I showed examples of how it can be used for responsiveness and consistency to enhance workflow and accuracy.

Auto Layout in action

Hands-On Approach

After covering the basics, I dove deeper by showing how these concepts applied to real-world designs. I recreated familiar interfaces like Google Drive, allowing the team to see how they could build interfaces using these tools. This practical, step-by-step approach made it easier for them to grasp and apply the concepts.

Figma design interface showing a 'Suggested Item' layout with sections labeled 'Build,' 'Reference,' 'Hints,' and 'Results.' The 'Suggested Item' instructions on the left detail steps for setting up an auto layout for a header, footer, and image, converting it into a component, and creating interactions for hover states. The 'Build' section displays a simple layout with a colorful image and text reading 'Auto Layout Workshop.' The 'Hints' section offers additional tips on creating variants, individual padding, and hover interactions, while the 'Results' section shows the final 'Suggested Item' component.

Figma workspace displaying a design layout with three sections labeled 'Sidebar,' 'Build,' and 'Reference,' showing a UI wireframe for a file management system. The Sidebar lists step-by-step instructions for creating an auto layout and shortcut groups. The Build section contains a basic frame outline, while the Reference section provides a more detailed design with shortcut buttons and labels. At the bottom, the 'Results' section shows a completed wireframe with elements like 'Priority,' 'My Drive,' and 'Shared Drives.'

Workshop Screenshots

What Participants Learned

By the end of the workshop, participants had a solid understanding of Figma’s core fundamentals and specific features. They were able to:

Use Auto Layout to make designs more responsive.
Nest Auto Layout frames for complex designs.
Create components effectively to streamline design iterations.
Use advanced component settings like instance swap and nested instances.
Prototype interactive elements, including hover states.
Fill in placeholder content to create more realistic mockups.
Apply tips and shortcuts to work more efficiently in Figma.

Final prototype for the Google Drive Workshop

Ongoing Support

After the workshop, I hosted bi-weekly office hours where team members could ask questions and get feedback on their projects. I also prepared mini-workshops where I broke down how even more artistic designs could be created using auto layout to help designers understand its flexibility

These sessions created a supportive environment for discussing new features, sharing use cases, and addressing real-world challenges. The office hours were appreciated for their welcoming vibe, encouraging open discussion and continuous learning.

Figma workspace displaying website design mockups with two sections labeled 'Elements' and 'Build.' The 'Elements' section contains labeled parts like 'Pre-made,' and 'Section 1' through 'Section 6,' while the 'Build' section shows a full-page website layout featuring food-related images and promotional text for a meal service.

Recreating creatively-designed sites

A Culture of Continuous Improvement

The workshops and ongoing support had a significant impact on the team’s workflow:

Enhanced Consistency: Designers quickly adopted Auto Layout. Many began reworking their projects within days, resulting in time savings and higher-quality outputs.
Increased Efficiency: The training sessions streamlined design processes, allowing designers to reduce time spent on repetitive tasks. The immediate productivity improvement was evident across the team.
Positive Reception: The practical, hands-on approach resonated well with the team. The ongoing office hours were particularly valued, fostering interaction and a continuous learning environment.
Improved Collaboration: The workshops encouraged stronger team collaboration, ensuring designers of all experience levels could benefit and contribute to overall growth.

Takeaways

Accessible Training Elevates Everyone

Tailoring workshops to all skill levels ensures everyone can benefit, leading to broader team-wide improvements.
Hands-On Learning is Highly Effective

Practical, step-by-step exercises help participants quickly grasp and apply new skills, resulting in immediate workflow enhancements.
Support Encourages Growth

Ongoing resources like office hours foster a culture of continuous learning, allowing team members to refine their skills over time.

Her Figma training was so well received and made an immediate impact for other designers on the team. I appreciated her putting it together and sharing her knowledge with the team.