Videos

Speaking of Diagram, Ridd interviewed Marco Cornacchia — the founding designer at Diagram, and now a product designer at Figma. “In this episode, Marco shares how he (accidentally) created a new trend of animated bento grids. And we also get a behind the scenes of what it was like being the founding designer of Diagram and ultimately getting acquired by Figma.”

Tutorial Tim dissects a beautiful Fey website and shows how to leverage developer tools in the web browser to extract CSS values and implement them in Figma.

A new webinar is a panel discussion with Hugo Raymond, a Designer Advocate at Figma, and three guests: Karl Kech, Design Engineer at DuckDuckGo; Amber Feinerman, Design Systems at Netflix; and Pranathi Peri, Product Designer at Graphite. They discuss the evolving role of design engineers and technologists in the tech industry, career progression, impact, specialization, and navigating the gap between design and engineering.

“Discover how you can import all of your existing Jamboard files to fully editable FigJams! From sticky notes to sketches, watch as we demonstrate how to seamlessly transition your Jamboard content into FigJam, where you can harness the full range of FigJam’s interactive capabilities.”

A workshop by Miggi and Alex exploring ways to use FigJam like a pro, including shortcuts, deep-dive features, and ways to speed up your workflow — both independently, and when collaborating with others!

“Prototyping in Figma allows us to create realistic designs to test on real users, but there’s a lot that goes into taking designs from static to something that looks functional. Join our team for a Q&A focused on bring your designs to life with prototyping and user testing.”

“In this livestream, Figma designer advocates, product managers, engineers, and designers will take you through everything we launched — from new on-canvas previews for the font picker, to fun new ways to collaborate in FigJam and time-saving prototyping updates.”

Luis shows how to make slot components more useful by “outsourcing” the component composition to a main component, whilst still allowing for completely flexible content within.

“In Figma, scroll position defines how individual objects behave when you scroll past them. There are three types of scroll positions: scroll with parent, fixed, and sticky. In this tutorial, we’ll focus on sticky scroll and see how we can use it make our prototypes even more dynamic.”

Jake goes into the relationship between design and development in product creation and illustrates it using a quadrant model, dividing the process into four key areas: product design, design patterns, product development, and development patterns. Successful collaboration requires trust and a deep understanding of each other’s perspectives.

“Figma can be a magical place to collaborate, build, and ship, but if you’re just starting out, it can be overwhelming. Join our team for a Q&A focused on the need to know features for those just getting started to help you build out your Figma designs successfully and efficiently.”

A short tutorial from Figma on using variables, interactive components, and conditional logic to build a prototype. These advanced features help prototype faster, reduce memory usage, and minimize maintenance time.

“Need help aligning on what to build next? When product teams need to figure out what to prioritize, user journey maps can help them see where their attention is needed most. In our new user journey map video, we’ll show you how to quickly customize a user journey map session using templates in FigJam.”

Miggi shows how to incorporate video prototyping into your designs and make interactive presentations. “Using video in Figma prototypes can create a more realistic experience, and add a level of polish when testing designs. We will dig into some real-life examples and walk through the many ways you can interact with, and use video to drive your interactions. We’ll cover aspects of video prototyping such as adding video to the canvas, previewing and adjusting video on the canvas, state management and video continuity across frames, and advanced interactions like “when the video hits”.

A deep dive into Figma’s various license tiers and the features/capabilities available in each.

A recording of Miggi’s recent Twitch livestream on interactive components.

A new video in the Introduction to design systems course by Figma explains design tokens.

Christine shows how to use a Scroll To action to seamlessly connect navigation on a single-page website, create horizontal scroll effects, and scroll in multiple directions.

Luis shows how to descope and unpublish primitive variables from the design system.

Christine Vallaure just published a free 1-hour course on YouTube. Topics include Figma’s file structure, creating files and frames, shapes, text, components, and general design setup. A fantastic resource for beginners, and it even comes with an exercise file.