Videos

Chad shows how to use variables to change a variant on a component instance in your designs.

Christine Vallaure explains the basics of CSS Flexbox and how it translates to Figma’s Auto Layout. ​“Discover how to set up individual flex properties for items and explore the nesting capabilities of Flexbox. While Flexbox is great for component layout, CSS Grid offers more control for overall page layout. Find out how to use both in harmony for optimal design.”

Nice to see a free course updated with all the recent features! ​“A beginner’s guide to all the major 2024 functionality in Figma: frames, basic shapes and properties, text and text styling, named styles, colors, plugins, the pen tool/​vector editing, gradients, shadows, Auto Layout, components, prototyping, and Dev Mode!”

So excited for this episode of Ridd’s Deep Dives podcast with Molly Hellmuth! They get into the nerdier side of Figma and discuss adopting variables, making sure you don’t invest in a Figma strategy that you’ll regret later, Molly’s favorite design systems plugins, and how she’s building components differently in v8 of her UI Prep design system.

I’ve seen Penpot 2.0 being brought up in some Dev Mode conversations, and while their support for CSS Grid Layouts is something I’d love to see in Figma, I do not think one-off copy-pasting HTML/CSS snippets is the way to go. It’s a ​“no man’s land” between no-code solutions and framework-specific codegen plugins that could be customized for the organization’s needs and connected directly to the components in code. (Thanks Christine Vallaure for sharing the video!)

What a fun Figma launch video from 2016! That was way before I considered a switch from Sketch or even heard of Figma. (If you’re not familiar with Sandwich and Adam Lisagor’s work, check out their other commercials.)

The Designer Advocate team recently hosted another Office Hours AMA focused on the use of variables in Figma. Watch Lauren Andres, Luis Ouriach, Chad Bergman, and Shana Hu discuss nested instance variant binding, applying boolean variables, and a few related questions.

Miggi goes over all of the basics when getting started with variables and modes for your design layouts. ​“Explore what it takes to use variables to create a dark and light mode experience, change the density of your spacing, vary the languages your design UI can accommodate, and so much more.”

In this interview, Figma CPO Yuhki Yamashita reflects on his journey as a PM and what he has learned trying to build products that people love.

Ana Boyer with a tutorial on how to create a range slider with Auto Layout.

A super useful video from Akbar, a Developer Advocate at Figma: ​“Want to sync your Figma Variables with your codebase? In this video, we’ll show you how to use our Variables GitHub Action example repo to sync your Figma Variables to your codebase and vice versa.”

Double Glitch presents the video tutorial on cursor tracking technique as the first part of his series on advanced prototyping in Figma. You might remember his demo of this effect from a few months ago. A smart way to achieve the effect with a grid of interactive components!

Ridd interviewed Nikolas Klein and Garrett Miller from the prototyping team at Figma. Together, they provide a behind-the-scenes look at everything that led up to the advanced prototyping release at Config 2023. For a few takeaways on two types of prototypes and the use of variables, see this thread by Ridd.

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.”