In this insightful video essay, Tom Lowry shares some thoughts on freeform design exploration without accruing design debt.
Today @figma is launching Multi-edit!!! I put together some thoughts about freeform design and why I am excited about it!
— Tom Lowry (@negativespaceca) March 6, 2024
Check the thread for more resources to get started!
Let us know what you think. Happy multi-editing! pic.twitter.com/XujbMFIiXu
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.
Ridd with a step-by-step process for nailing dark and light modes in Figma. Love his way of thinking about counterpart colors on the opposite ends of the spectrum for specific use cases — texts, backgrounds, borders, and icons.
It's taken me over 4 years...
— Ridd 🤿 (@ridd_design) February 26, 2024
But I think I finally have the perfect method for nailing ☀️/🌙 modes in @figma
Here's my step-by-step process 👇 pic.twitter.com/tr2QJQZcxG
Luis shared a set of recommendations on how to approach naming conventions for components, props, and values within Figma component libraries.
Christine Vallaure with the best Figma tips and tricks of the year! As you’d expect, this year’s edition of her regular roundup has a strong focus on Dev Mode, variables, prototyping, min/max values, and slot components. Thanks to Christine for sharing a friend’s link with Figmalion readers! If you prefer watching to reading, check out her free video with these tips.
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.
Designer Advocate Lauren Andres shares tips on how to streamline handoff when it’s a constant stream of WIP designs, communication, and collaboration. Her advice involves using annotations in Dev Mode, adopting a shared language, organizing your files with sections and “Ready for dev” statuses, archiving old designs, and leaning on components.
Some colors have established semantic uses — green for positive feedback, red for errors, and yellow for warnings. But what happens if your brand is based on one of them? Molly looks at how Netflix & Lego, Spotify & Quickbooks, and Hertz & McDonald’s handle this challenge. Her takeaway: either embrace the situation and use the brand color for semantic values, or introduce a new distinct color shade (i.e. orange for errors), but do not use two similar colors for different needs.
Q: My brand color is red/green/yellow, am I doomed?
— Molly Hellmuth (@molly_hellmuth) February 15, 2024
A: Nope! Take a look at how other popular brands are handling this. Their solutions might surprise you!
Here are a few examples.. pic.twitter.com/HL5m3P9EPe
Designer Advocate Chad Bergman explains the basics of design systems — what they are, how they work, and how they can change the way you design.
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.”
Molly suggests it’s time to support multiple icon sizes with number variables.
Q: Are icon wrappers still worth using?
— Molly Hellmuth (@molly_hellmuth) February 8, 2024
A: I don’t think so. A much easier way to support multiple icon sizes is with number variables!
Here’s how.. pic.twitter.com/Ue3n9FKYUB
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.”
Beautiful kick-off of the Figbruary by Vijay. See more by hashtag #figbruary on Twitter/X.
Created this little animation - In the jungle 🌴- in Figma for first day of #figbruary. Added a little parallax animation using simple smart components. More assets details shared here. pic.twitter.com/vgrl4q9UX4
— vijay verma (@realvjy) February 1, 2024
Fons Mans shows how to create a simple glow effect inspired by Vision Pro promo at the Apple 5th Avenue store in New York.
Tutorial Thread! 🥽
— Fons Mans (@FonsMans) February 2, 2024
Learn how to create a stunning glow effect in @figma with just a few simple steps, and no need for plugins.
Let's dive right in 👇 pic.twitter.com/EP69oS2M7g
Molly praises the Cmd+\ shortcut for showing/hiding UI, and I want to expand her tip by adding that the Cmd+Shift+\ shortcut toggles only the left sidebar (Layers/Assets). Keep in mind that Cmd+\ also works in the Present mode — Figma toolbar has been popping up and blocking the navigation in one of my prototypes, so discovering that it could be turned off was a big relief.
My most used keyboard shortcut: COMMAND + \
— Molly Hellmuth (@molly_hellmuth) January 31, 2024
It hides and shows the Figma UI
Which gives you so much more room to build, think, and really take in your designs when zoomed in 100% pic.twitter.com/6SrLB8e72w
Clara Ujiie led Workday’s migration to Figma in 2019. Now as a Designer Advocate at Figma, she helps other teams through similar transitions, sharing ways to work better together. Based on these experiences, she is offering a blueprint for teams adopting Figma.
I have a dedicated tag #Switching to Figma for this topic, but out of 60 shared stories only one was added in the last 2 years — a pretty good indicator of adoption.