In Recovery Mode, you temporarily regain access to the file and can take limited actions to reduce content and restore edit access. Once you have reduced file memory below 90%, you can exit recovery mode and regain full edit access to your file.
A new take on Little Big Updates from Figma — every Thursday this fall they’re releasing some of the 30+ updates designed to make day-to-day life a little easier. This week it’s four improvements to the Assets panel. #1 is filtering assets by a specific library file, recently viewed, default libraries, and more. #2 is larger and more visible thumbnails. #3 is showing component names by default, with variant counts on hover. #4 is my favorite — clicking on an asset opens up a new component modal that displays a larger preview and a link to the main component file, plus a component playground on the paid plans where you can preview and interact with any variants, variable modes, or component properties.
Select two vector shapes and specify how many steps to create between them.
I’ve been using it for years but never shared it before! Great for putting any objects or text on a path.
This is a short but comprehensive checklist. Worth reviewing before sharing your next file!
It’s handoff day! 🎉
— Noelle (@hellohinoelle) August 31, 2023
How I get my Figma files dev ready:
- Make a separate handoff page
- Label and organize flows
- Include states and edge cases
- Make sure all styles are linked
- Document components
- Leave relevant annotations
- Embed a handoff Loom to file
Allie Paschal writes about her process of migrating the Native Mobile Design System from using color styles to variables. Pretty cool to see that she already adopted a newly released scoping for color variables. I didn’t realize that some companies may not allow external plugins in Figma, so it’s nice to see that this process is completely manual and self-sufficient.
Richard Ekwonye made an interactive guide on how Bézier curves work in CSS animations and SVG paths of illustrations and icons. Such a beautiful and hands-down way to learn!
A good-to-remember shortcut! Hold the Spacebar while dragging elements to maintain the hierarchy of the elements.
Here's a small but truly useful tip for @figma that you may not know:
— Joshua Guo (@jgspace_design) August 24, 2023
Holding the spacebar while dragging elements will maintain the hierarchy of the elements.
The demo below shows that elements are not dragged out of the parent frame. pic.twitter.com/GNZBNyOxp1
An in-depth walkthrough of how to use Figma’s Auto Layout to quickly add padding and alignment rules to standardize your design elements from the Noun Project.
Somewhat related to the previous article, Ridd looked for a way to account for optical balance when icons are hidden from a button. Jordan suggested a smart solution of wrapping the label in an Auto Layout with an additional smaller padding that adds up with and without the icon.
More Figma nerdery...
— Ridd 🤿 (@ridd_design) August 22, 2023
I want to account for optical balance when icons are hidden from my button (so ideally you'd have less padding when an icon is present)
Anyone have a better solution than wrapping icons in a smaller frame and attaching the boolean there? pic.twitter.com/wxTMQQ64n5
“Our new Community Libraries Beta offers the building blocks you need to start designing, right at your fingertips. As part of the Beta, users on free plans will have access to a special selection of community wireframing, UI, and icon kits. Just click into the Assets panel and Library modal to browse through the featured libraries and design faster than ever.”
A few improvements to variables: 1) in addition to scoping number variables, you can now also scope color variables, 2) select multiple variables with Shift or Cmd for the bulk edit, 3) code syntax for defining different names for multiple platforms, and 4) modes for instance sublayers. Variables are still in beta and it’s great to see how fast the team iterates on them.
In the last 2 months Figma quietly shipped more than 200 updates to the Dev Mode workspace 🤯 This article goes through the most important 35 changes and improvements.
Miggi shows how to make a notification badge that expands to fill its contents with Auto Layout.
A short video on using the bezier curve tool to make an S‑shaped curve.
“Good typography is good design. This collection of plugins for Figma will help you to improve the typography in your design.” Font Fascia and Fonts Changer are two of my favorites on this list!
Lottielab is a new tool for creating and managing Lottie animations that won Product of the Day at ProductHunt this week. Images can be imported from Figma, SVGs, or Lottie files, and exported as Lottie, GIF, or MP4 to any platform. From Drew, a co-founder of Lottielab: “We are streamlining this cluttered process into a simple, seamleass, all-in-one workflow, with all the benefits of modern design tooling fit for today’s product development teams — being web-based, collaborative and easy to use — no After Effects knowledge needed.”
“In this Study Hall, learn how to apply the use of variables in your prototypes with the assistance of variable modes and conditional logic to create a more realistic shopping cart prototype that uses real math.”
Dan Hollick explains the science behind making realistic shadows and recommends the Beautiful Shadows plugin that takes care of this for you.
What makes a shadow look realistic?
— Dan Hollick 🇿🇦 (@DanHollick) August 9, 2023
Well, there are essentially two parts to a shadow: the fully occluded part (Umbra), and the partially occluded part (Penumbra).
Ideally, you need at least two layers of drop shadow to mimic these. pic.twitter.com/fJ7NgiMJKg
Ridd interviews Luis Ouriach about using variables for his Deep Dives podcast. “Luis goes deep into strategies based on team size, provides naming guidance, and even breaks down how he thinks about structuring libraries with variables in Figma. Lastly, Luis shares a behind-the-scenes of his journey as a designer advocate and even gives a unique prediction for how AI will take shape inside of Figma.”