It’s only been a few weeks since Figma released whopping 30 quality updates to the editor, and this week they shipped another 9! While most of them are quite small, one was long-anticipated by the design community — shadows are no longer displayed through transparent areas of objects! This means they behave the same way as shadows in CSS, making developer handoff so much easier. Speaking of handoff, I’m excited to welcome Zeplin as a sponsor — I used it in my work in the past, and it’s a fantastic product.
The design community stayed busy as well. Greg Huntoon shared a smart and easy-to-use way to version components using Variants. Jordan Singer announced Tricycle, a set of design automation tools powered by AI. Pablo Stanley recorded his process of vectorizing sketches. Rogie released yet another plugin, this time for importing HEIC files. See all of that and two dozen other links below!
P.S. I’m taking a summer break this month, so the next issue will come out in 3 weeks, on August 23rd. A major update to Figmalion is in the works and getting close to being finished — can’t wait to launch it soon!
By default, drop shadows are no longer displayed through transparent areas of objects. Check out this thread by Rogie on how this feature came to life.
Hold Shift to draw straight lines when using the Pencil tool in Figma and FigJam.
Default Pencil and text colors are now smarter. When you draw or type, they are now black or white, depending on the background. Miggie shows this behavior in action.
⌨️ New tab shortcuts
Figma made the tab keyboard shortcuts in the desktop app more intuitive. Press ⌘1 on Mac, Ctrl+1 on Windows to open the file browser, and ⌘2, 3, 4 or Ctrl+2, 3, 4 to open subsequent tabs.
⌨️ New shortcut for strikethrough text
A new keyboard shortcut for strikethrough text — ⌘⇧X on Mac, Ctrl+Shift+X on Windows.
⚠️ Number of layers with a missing font
The missing font dialog now includes a layer count if you hover over an icon, making it easier to see the impact of a missing font.
🔎 Scale mode shortcut
Pressing K in Figma now consistently brings up Scale mode but doesn’t exit it, so it’s more predictable.
📐 Measuring lines when duplicating objects
Cleaned up measuring lines when duplicating objects — you’ll now see two instead of four. And, they added some logic so it’s harder to accidentally not duplicate something, even if you let go of the key too early.
🍱 Design System updates
You can press Shift while clicking on individual publishing checkboxes to select ranges. You’re now able to open library files from the Libraries modal.
This update allows plugins to create new prototype interactions in the editor. Check out a code sample by Anthony DiSpezio.
A recap of all updates to the editor shipped a few weeks ago.
Greg Huntoon came up with a great approach for versioning components. Love how elegant and easy to use it is. Don’t miss the video at the end and the discussion in the comments.
Edward Chechique explains how to organize and communicate the information in your Figma files for better collaboration with developers.
Molly Hellmuth and the UI Prep team installed and tested over 100 plugins to find the true gems. In this article, they recommend 21 plugins organized into 6 different “stacks”.
Love the idea of using custom notes instead of built-in comments for more permanent comments.
Ana Boyer with a thread of multiple ways to use descriptions to improve your team organization and collaboration.
Rasmus Andersson shares a few hidden Figma tips. His second tip on adding “viewer=1” to the URL query part to load a file very quickly in Figma’s lightweight “viewer” renderer is something I may use in the future.
“Could you imagine a place where you design, prototype, animate, work together and have feedback sessions at once? Figma solved all these problems at a glance with a set of features they provided from the get-go.”
Interesting perspective on Figma vs. Sketch from Jishnu Hari, who took the usual route of switching from Figma to Sketch while joining a new company. He really missed some of the things we take for granted in Figma, and in the end, convinced his team to switch back to Figma.
Pablo Stanley live-streamed his process of vectorizing a couple of character sketches.
“In the following steps, you will learn some rapid tips and tricks for Figma. We’ll have a look at 26 Figma features, going from A to Z.”
“Let your users know they’ve got notifications with this Animated Bell Icon that starts out in Figma, gets sent to After Effects to be animated, then exported as a Lottie file.”
“Masks are used to reveal specific portions of layers while concealing the rest. In this video, we’ll go through how to create a simple mask, the differences between masks and image fills, alpha channels, and advanced designs combining masks with other features.”
Speed up your design workflows by combining plugins Responsify and Breakpoints.
Tom Quinonero shows how to build a simple Figma plugin with Rollup and Svelte.
Matt Wierzbicki on how he created a Figmaster plugin without writing any code.
Jordan Singer announced Tricycle, a set of automation tools for designers powered by AI. Over the years, Jordan has built some of the most interesting Figma plugins and experiments, so I’m stoked for this product.
“An icon component that uses the Font Awesome Pro OTF files and ligatures to make adding icons (and swapping styles) simple and easy.”
Beautiful flower patterns built with Variants.
🌎 Iron Man
Pretty cool illustration of the Iron Man, from sketch to the final artwork.
Smart and delightful use of animation in the UI. See also the original file at Figma.
A new plugin from Rogie, this time for importing files in Apple’s default photo format.
Generate rotated copies of the selected object. Ideal for designing watches and other radial UIs.
“In a recent livestream, Figma’s PM team gave us a peek into their team norms. Here, we’re sharing how their culture of transparency and trust comes to life in their daily habits and weekly syncs, and what it means to open up their processes to cross-functional partners.“
“Our growing sales team partners with our users and their organizations to help them build better products from start to finish and scale their creative processes, while also working with Figma’s internal teams to improve our own products. We sat down with a few Figmates to learn what it’s like to be a member of a global sales organization, including getting smart on all things design, career growth, and the best part about working directly with users.”