The good thing about evergreen tips is, well, that they do not get old — I keep forgetting about this one! Right-click while holding the Control key to see a list of objects below your cursor.
Evergreen @figma tip / helpful reminder!
— Miggi ✌🏽 (@miggi) November 6, 2023
Press control + right click on the canvas to see and select the objects that sit below your cursor.
If anything, it will remind you to name your layers 🫣🤫🫠. #figmatip pic.twitter.com/qSoZJrWims
Christine Vallaure explains how to use boolean variables and modes to reduce the number of necessary components. One important caveat: “I would always recommend adding a documentation sheet to avoid confusion as per default, only the first mode will be displayed, and in development mode, hidden elements are not highlighted.” See also a second thread on using variables to trigger actions in prototypes once a specific threshold is reached.
1/5 Instead of setting up a variant for every breakpoint, we can use boolean variables in #Figma to drastically reduce the number of components needed.
— Christine Vallaure (@moonlearning) November 7, 2023
For instance, if we're working on a navigation menu that switches between a burger menu and links, here's what you can do: pic.twitter.com/akjo9UcHDA
Peter Yang interviewed Yuhki Yamashita about building FigJam AI, creating a culture where PMs and designers love their craft, making design accessible to everyone, and balancing new and power user needs. Most of Yuhki’s advice in this interview is for PMs, but it still applies to any product designer. (The interview is paywalled, but there is a lot of good stuff in the preview.)
Love this story about FigJam’s early days: “We had a meeting with our board two months before we were going to launch FigJam. The board asked us what our differentiator was since there were many other whiteboard tools. And Dylan said, “Well, it’s fun!” But then we realized that the product wasn’t fun enough. So the FigJam team ran a sprint called “FunJam” to come up with all the playful features that you see today like cursor chat, emotes, and more. So you’re absolutely right – fun was a core principle. Most workplace tools are a little boring and confine you in a box. We want to give you an inviting canvas with many lightweight ways to express yourself.”
Some great recommendations for quality unitasker plugins in Fons Mans’s comments.
Some plugins in @Figma are full flex applications 😅
— Fons Mans (@FonsMans) November 2, 2023
I prefer the smaller ones, solving a simple and focussed issue.
What’s your go-to plugin?
Vijay Verma made a new plugin for adding a color gradient map effect to your graphics. As expected, it comes with cool predefined gradients created by him to get you started.
Miggi shows how to incorporate video prototyping into your designs and make interactive presentations. “Using video in Figma prototypes can create a more realistic experience, and add a level of polish when testing designs. We will dig into some real-life examples and walk through the many ways you can interact with, and use video to drive your interactions. We’ll cover aspects of video prototyping such as adding video to the canvas, previewing and adjusting video on the canvas, state management and video continuity across frames, and advanced interactions like “when the video hits”.
Rogie with a mini-tutorial on making Mario Kart-inspired resizable buttons with fun shapes.
I love fun bordered buttons, like this Game UI from Mario Kart, so, I wanted to show you how to do this in @figma...and they work with auto layout and do not warp or squish.
— ˏˋrogieˎˊ (@rogie) November 3, 2023
Here's your mini tut 🧵 pic.twitter.com/0DRXx5KBJB
Harry McCracken published a big story about Figma and Dylan Field at Fast Company. It talks about Adobe’s acquisition and what it could mean for both companies, the future of design in the era of AI, the origin story of Figma, and their big ambition to “make creativity the new productivity”.
A deep dive into Figma’s various license tiers and the features/capabilities available in each.
A recording of Miggi’s recent Twitch livestream on interactive components.
Christine shows how to use a Scroll To action to seamlessly connect navigation on a single-page website, create horizontal scroll effects, and scroll in multiple directions.
I dig this tip from Zander — sometimes we already have the right tools without plugins.
Remove image backgrounds, supafast!
— Zander Whitehurst (@zander_supafast) October 24, 2023
My shortcut of the year for image animation in @figma pic.twitter.com/ZMZ2UJ0GLH
Christine Vallaure with timeless advice of using percentages instead of pixels for specifying line height in Figma. There are very few cases when pixels make sense, and more often than not they cause inconvenience.
1/4 Consider using '%' instead of 'px' for line-height in #Figma to achieve unitless CSS-like notation. Why --> pic.twitter.com/DooE81hznI
— Christine Vallaure (@moonlearning) October 27, 2023
Whoa, I didn’t know that selections can be moved! Great for getting to the tricky areas.
Here is an evergreen @figma tip: Drag your selection to more expertly select something amidst other things on your canvas!
— Miggi from Figgi (@miggi) October 23, 2023
1. Press V to get the move tool and drag a selection.
2. Press spacebar to move the selected area to select what you want! pic.twitter.com/T2fQv8mlXT
Designer Advocate Ana Boyer shares some common questions, answers, and resources that she came across when learning about design systems, tokens, and variables.
🎨 Been a minute since I've been online! Thought I'd kick off posting again by sharing some questions, their answers, and some resources that I came across when learning about Design Systems (DS), Tokens, and Variables 🧰
— Ana (@_AnaBoyer) October 26, 2023
Luis shows how to descope and unpublish primitive variables from the design system.
Designer Advocate Anthony DiSpezio recommends the best approach for defining variables for theming: primitive variable → semantic variable → semantic style. The core advice is to keep using styles: “Styles represent a group of properties that should be applied to a layer or part of a layer. Variables represent individual values within that style.”
(Years ago, I noticed that when Apple announces a change at WWDC it’s better to go with it even if it doesn’t make sense at the moment — they see the roadmap much further. I wonder if it’s the same case with Figma and styles. At the moment they often feel redundant, but Figma made it very clear that they’re not going anywhere — hopefully something will make it clear soon why it was worth keeping them around.)
Defining variables for theming? This is THE best approach I can recommend:
— Anthony DiSpezio (@adispezio) October 24, 2023
$primitive-variable: ff0066
↳$semantic-variable: $primitive-variable (alias)
↳Semantic Style: $semantic-variable
I'll try and explain in the comments...
Figma collaborated with Adobe on a video exploring some of the ideas for the post-acquisition future — Firefly in FigJam and Figma, linked assets between Figma and Creative Suit, multiplayer in Adobe apps, Figma prototypes + After Effects, shared design systems, and more. For more ideas, see threads from Noah Levin, Tom Lowry, Sho Kuwamoto, and Luis.
I’m a generalist and occasionally do different kinds of design work, so having a tighter integration between Figma and Adobe apps would be pretty neat. Adobe Fonts would be my #1, but I wish I could reuse a color palette and assets from Figma while working on my book layout in InDesign. While designing a photo-heavy website, I went back and forth between Figma and Lightroom experimenting with post-processing. The new Photoshop on the web also makes so much sense as a native integration. Count me in as a Figma × Adobe optimist.
Since announcing the acquisition over a year ago now, we’ve talked a lot about what the future could look like, but we haven’t shown it.
— Yuhki Yamashita (@yuhkiyam) October 26, 2023
So, we came together with @scottbelsky and the @adobe team to imagine “what if ...”
We wanted to share some of our ideas with you. pic.twitter.com/utEWSxoqnK
Christine Vallaure just published a free 1‑hour course on YouTube. Topics include Figma’s file structure, creating files and frames, shapes, text, components, and general design setup. A fantastic resource for beginners, and it even comes with an exercise file.
A quick how-to video from Zander on creating a glowing animation inspired by the Disney logo. (And one more with a hover scale effect.)
Glowing loading animation in figma, supafast.
— Zander Whitehurst (@zander_supafast) October 16, 2023
Celebrating Disney turning 100 🥳 pic.twitter.com/uzXZSTFjFr