Videos

Jake returns with my favorite video series, this time explaining how to modify variable code syntax using JavaScript in the dev console. (Kudos to the video editor!)

Developer Advocate Akbar and Designer Advocate Tom talk about data as an often overlooked aspect of design. Real-world data not only shapes how designs appear but can also challenge initial ideas. This presents a valuable opportunity for designers and developers to collaborate, understand available data, and even imagine new possibilities. This deep dive features a real-world example from the development of Figma’s Library Analytics.

Vincent van der Meulen, Design Engineer at Figma, talks about Figma’s approach of complementing designers rather than replacing them as a part of the SaaStr AI Summit panel. They follow four key AI principles: improve existing user behaviors, embrace frequent iteration, systematic quality control, and foster cross-functional collaboration.

Disney’s Lead Product Designer Jeremy Dizon joins Designer Advocate Chad Bergman to talk about the underlying side of building, supporting, and evolving design systems.

A new episode of Figma’s series Bridging the Gap, where Developer Advocate Akbar Mirza chats with Designer Advocates to understand and improve the process behind their collaboration. In this conversation with Ana Boyer, they discuss starting and maintaining design systems that work for different teams.

Nick Babich shows how to create simple and advanced icons in Figma: ​“You will understand how to size and position icons properly in a frame, make the most of simple tools like geometric objects, and create and use key shapes to craft sophisticated icons. Lastly, you will learn how to export icons from Figma in SVG to use in your project.”

Developer Advocate Jake Albaugh gives a mind-blowing tip on running Plugin API code inside Figma’s JavaScript console. Even while I built a couple of Figma plugins in the past, I didn’t realize how easily accessible this API is for day-to-day tasks. Definitely going to adopt this in my workflow.

Alex and his team at Pixel Point make a cool YouTube channel with high-quality video tutorials on using Figma, Rive, AI, animations, and running a design agency.

I loved this example of going deep on a topic using FigJam. Tom Lowry, Figma’s Advocacy Director, shows how he approached researching and building a custom mountain bike by mapping out and thinking through every aspect of the build in FigJam.

Mal and Akbar discuss ways to bridge the gap between designers and developers.

Miggi shows three updates to frame presets in UI3: the first frame dropped onto a blank canvas will land at 0x0y coordinates; when clicking on the canvas to add a new frame, Figma will default to the size of the last-used frame; when using the frame tool, quick-add indicators will appear beside and between frames so you can quickly insert additional frames.

Jay from Sneak Peek asked Tim Van Damme (UI3), Tammy Taabassum (AI), and Kelly Li from Figma to share their working projects and walk him through their file organization. Tim had one of the most humble takes on the design collaboration and process.

Ridd interviewed Andrei Herasimchuk, who had one of the most enviable design careers as an interface designer of Photoshop, Illustrator, InDesign, and later the first designer at Figma, with stints at Twitter, Yahoo, and Booking in between. I’ve been following him since the Adobe days, but I had no idea he also contributed to Figma early on!

A new introductory Figma tutorial from Miggi, updated for UI3. It covers basic concepts like shapes, vector graphics, typography, resizing, Auto Layout, and applying them all to build a simple user interface card.

Steven Levy from WIRED discusses with Dylan Field how Figma is reinventing design tools to meet the needs of tomorrow’s creators and the evolving role of designers in an AI-driven world. I was so happy that Steven asked Dylan about his hoodie and let the fascinating nerdery unfold.

Dylan Field talks about startups and European regulation on stage at Slush 2024.

Nick Babich shows how to create a responsive grid system and explains the difference between Center and Stretch grid types, as well as how to calculate the right gutter and margin for different viewports. See also his layout grid cheat sheet.

Ridd brings up an important point — design systems became too complicated and associated with scale, but they’re still the perfect first step for startups. The solution is to keep things simple and focus on a few basic components and primitives in the ​“design toolkit”.

I had a few conversations about building design systems lately, and my general approach was to start from scratch only if a dedicated team is working on it. Most often, picking an open-source component library like shadcn/​ui or similar and customizing it to your needs is a much faster and more aligned approach.

Component properties can now be bound to variables, unlocking the ability to use translation strings in props. Learn how to bind them together in this video by Chad Bergman or this thread by Jacob Miller.

Really well-made video tutorial explaining masks in Figma: ​“We answer questions such as: What is a mask? How does it work? How do you use it in Figma? We demonstrate advanced usage and share real examples from our projects.”