If you have a paid resource in the Community, monthly payout statements are now available in your Community profile. Just click “View payout statements” under the “Metrics” tab to download a CSV of your earnings on Community.
“Prototyping in Figma allows us to create realistic designs to test on real users, but there’s a lot that goes into taking designs from static to something that looks functional. Join our team for a Q&A focused on bring your designs to life with prototyping and user testing.”
“In this livestream, Figma designer advocates, product managers, engineers, and designers will take you through everything we launched — from new on-canvas previews for the font picker, to fun new ways to collaborate in FigJam and time-saving prototyping updates.”
Users on Professional and Organization plans now can use a password that’s been autogenerated by Figma when setting a password on a file. Org admins in Enterprise organizations can choose whether to allow users to create custom passwords or require Figma-autogenerated passwords for greater security.
The Dev Mode team shares their early pivot away from a codegen-first approach, the acquisition of Visly that accelerated their efforts, and what it means to break down the handoff wall.
Luis shows how to make slot components more useful by “outsourcing” the component composition to a main component, whilst still allowing for completely flexible content within.
“In Figma, scroll position defines how individual objects behave when you scroll past them. There are three types of scroll positions: scroll with parent, fixed, and sticky. In this tutorial, we’ll focus on sticky scroll and see how we can use it make our prototypes even more dynamic.”
Vice President of Product, Sho Kuwamoto, explains why quality-of-life improvements are at the core of Figma: “I don’t want to be at a company that only invests in things that will make headlines. I want to make a product that I feel proud of. The truth is, people do resonate with little changes, and we know that because we pay attention to our users’ individual stories. Plus, when you celebrate the small things and give each one their moment, it gives people a chance to recognize how important each one is.”
The final week of LBU includes a number of quality-of-life updates.
The design editor. #22: On-canvas previews for the font picker (yay!) #23: Press Tab on a misspelled word to autocorrect the typo. #24: SF Symbols icons now render correctly. #25 and #26: Text boxes and containers (like frames and sections) can be used as snap targets. #27: Select text from the canvas in View-only mode. #28: A bug fix for the text shifts caused by changes in colors or text properties. #29: Nested component properties are visible in the playground and Dev Mode.
Collaboration tools. #30: Media in comments (yay!) #31: The full gamut of emoji reactions in comments. #32: Nominate someone to spotlight. #33: Mind maps in FigJam (whoa!) #34: Mobile app makes browsing files easier. #35 and #36: Importing Asana and Jira projects.
Prototyping experience. #37: A fix to “mouse enter” and “mouse leave” interactions. #38: The prototyping modal now pops up right when you need it. #39: Temporarily hide the edit modal by holding Shift. #40: Making it clear when you have multiple actions tucked into an interaction. #41: The inline preview can follow the current frame. #42: Sticky scrolling improvements (see more on this below).
Jake goes into the relationship between design and development in product creation and illustrates it using a quadrant model, dividing the process into four key areas: product design, design patterns, product development, and development patterns. Successful collaboration requires trust and a deep understanding of each other’s perspectives.
Teams building .NET applications may know Uno Platform, which recently launched v5.0 and now includes the first and only Figma to C# Markup export plugin. Now designers and developers using the platform can generate C# Markup directly from Figma.
A short tutorial from Figma on using variables, interactive components, and conditional logic to build a prototype. These advanced features help prototype faster, reduce memory usage, and minimize maintenance time.
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
A solid roundup of the design systems resources from one of the most respected conferences.
Finally a solid improvement to detaching instances.
Figma feature to notify teammates and call the cops if you detach an instance pic.twitter.com/Uo611wLNj8
— Soren Iverson (@soren_iverson) November 7, 2023
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