Videos

Last week, we discussed exports; now it’s time to examine imports! This short tutorial shows how to import files into the file browser or add assets directly to a design file.

Lauren Andres shows how Dev Mode, although built for developers, can also be a game-changer for designers and help drive organizational alignment, consistent product quality, and team efficiency.

MDS recorded a detailed walkthrough of the process of designing custom templates for ConvertKit: ​“I cover everything from choosing colors and creating backgrounds to adding layer effects and highlights. I also provide tips and tricks for achieving the desired look and feel.”

If you can watch only one, here Miggi compares how editing objects across multiple frames works now and how it used to work previously. He covers some of the most significant changes — scaling and rotating multiple objects, the ability to select matching layers across a series of frames (Option-Command-A or Ctrl-Alt-A), reliance on the layer name and position, editing text across multiple frames (Enter), how editing works with Auto Layout, and using sections to scope selection of matching layers.

Multi-edit is a powerful feature with many nuances when it comes to editing a series of related mockups or updating component variants, so Miggi prepared an entire playlist of videos covering every aspect in full depth. I highly recommend setting aside 30 minutes to watch them all in order.

“Effective product development hinges on a well-defined process and seamless team communication. However, implementing these concepts can be more challenging in practice.” AMA discussion hosted by the team of advocates — Lauren Andres, Akbar Mizra, Mallory Dean, and Anthony DiSpezio.

Exporting assets might seem easy, but there are a lot of nuances to get it right. ​“You can export content to share designs with others, move content between tools, or save copies of your work outside of Figma. In this video, we’ll walk through how to export content and go over ways to troubleshoot common export issues.”

Jenny Wen is the founding designer at FigJam and the person who brought it to market. In this interview with Ridd, she shares invaluable insights about FigJam’s product strategy, adding delight to software, and attacking ambiguity early in the process.

Paavan gives a few tips on organizing your Figma files if you include them as a part of your job application or portfolio review.

Tom Biskup shares practical tips on improving typography in your project — learning from others with a Chrome plugin, setting your type in Figma, keeping it simple by limiting choices, thinking in systems and setting a type scale, using ChatGPT for filler copy instead of ​“lorem ipsum”, and picking fonts from great foundries.

“You can export content to share designs with others, move content between tools, or save copies of your work outside of Figma. In this video, we’ll walk through how to export content and go over ways to troubleshoot common export issues.”

The new video series from Luis Ouriach on variables. The first part introduces the basic concepts and terminology — variable types, collections, modes, and aliases. The second part is ​“The 3 levels of variable” where Luis explains the definitions of primitive, semantic, and component-level variables. The third part focuses on creating your first variables and using modes to manage theming and densities.

“Using variables in your Figma libraries? Learn how to set a default mode for a library that applies to all of your teams and files within a workspace.”

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.