Videos

A quick tip from Miggi on using grids to generate type scale and place graphics.

Noah Jacobus from Font Awesome shows how to preserve monotone and duotone icon overrides by maintaining consistent layer names and using boolean unions.

“How do Replit & Linear approach designer to developer collaboration? We’ll talk to two high-performing teams about streamlining design-to-code handoff for shipping better products. Learn insights on effective collaboration and ideal workflows with Figma’s Dev Mode, Linear, and Replit.”

If one Config wasn’t enough for you, here is a second one-day event at the Asia Pacific region, ​“full of keynotes, sessions, and programming designed to connect a dynamic community of builders to the future of product design & development.” Most of the talks were unique to this event.

In this episode of Dive recorded at Config, Ridd talks to Figma design engineer Vincent van der Meulen about how the new Visual Search feature was born from a mid-project pivot. Don’t miss Vincent’s original pitch video for visual search in Figma.

A very timely episode of Dive, where Ridd interviews Jordan Singer live at Config about his journey from the Diagram acquisition to Figma’s 2024 AI release. In the middle, they discuss how Figma’s generative features work and why they needed to create a UI kit. (A funny inception moment — at 45:22, I’m coming into view to take this picture.)

Ridd shows his advanced Raycast setup. One thing I adopted immediately is the Figma File Search extension he recommended — what a wonderful time-saver! The Color Picker and Ruler extensions might replace some of the third-party tools I’ve been relying on as well. 

I shared Lenny’s interview with Mihika a couple of months ago, but it’s worth recommending again now that it’s clear that this ​“0 to 1” product she talked about was Figma Slides.

“In this video, we’ll take a tour around the Figma Slides editor so you can start creating your own presentations.”

“When it comes to design handoff, communication is key. As designs change, designers need to be able to iterate while still providing clarity to developers about what’s new and what’s ready to build.”

This session is a must-see if you have time for only one. CEO Dylan Field’s opening keynote walks through how Figma rethinks product development from the ground up and introduces new methods to help you make great work.

A 2‑hour course by Meng To on building a real website from a Figma template using Codux. ​“You’ll master responsive design, collaborate with developers on a real React project, export CSS from Figma using Locofy, set up breakpoints with media queries, add CSS animations, improve SEO, create multiple pages with React Router, and publish your site. By following best practices, you’ll bridge design and development, improve your web design skills.” 

Double Glitch made a new tutorial on creating a real working parallax effect in Figma. Don’t miss the Community file as well! 

Ridd explains how to make your components easier to use by exposing nested instances.

Rob Hope interviews a design wizard Vijay Verma. ​“Vijay Verma is a talented designer renowned for his intricate Figma art and his extensive portfolio of free digital resources. In this episode, we explore his humble beginnings as an electrician in India and his rise to become one of the most beloved designers in the Figma community. Additionally, we have a special case study where Vijay walks us through his character design process, complete with a bonus time-lapse recording he sent after the interview.” 

The other day, I was looking for a tutorial on a specific animation technique and found this course by Tim Gabe. It’s free and has high-quality content — worth checking out!

What a fun project! A new interview series looking inside Figma files of the top designers. The first season includes six interviews with folks from Perplexity AI, LottieFiles, Bezi, and other companies. There is much value in just sharing the screen and walking through your actual work files instead of creating an idealized version of the design process.

“In this two part series, we’re using variables to build an advanced prototype of an interactive, configurable volume bar. Configurable prototypes are easily customized and adapted and allow us to edit and change interactions in less time. In this first video, we’re going to set up the foundation of our interaction.”

A new video in Luis Ouriach’s ​“My First Variable” series on the typography support within variables. He explains using string and number variables to set font weights, combining weights with styles such as italics, grouping text variables, aliasing font families, naming conventions, and more.

Christine Vallaure’s talk at last year’s SmashingConf on CSS Container Queries and how designers can tackle them using Figma. If videos are not your jam, see her article on Why UI designers should understand Flexbox and CSS Grid.