8 Figma Tips For UI3
Piyush Sharma
UI/UX Designer | On a mission to build seamless product experience ?? | Product Designer
Summary
The web content provides an overview of 8 practical tips for users to effectively utilize Figma's new UI3, including how to revert to the previous UI, select matching layers for bulk text editing, apply suggested auto-layout, and use features like "Follow prototype," "Hide hints on click," and "Pin files to projects and workspaces."
??
Abstract
Recognizing the challenges of adapting to new tools and layouts, the author offers guidance to both new and experienced users. The tips range from temporarily switching back to the familiar old UI for those with immediate project deadlines to utilizing advanced features like auto-layout suggestions for more efficient design work. The article also covers how to track frames in prototypes for debugging, hide interaction hints to improve usability testing, and pin important files for better organization and accessibility. Additionally, the author touches on the use of annotations in Dev-mode for clearer communication with developers and the adjustment of canvas stacking to properly display overlays in auto-layout frames. While the author's organization has not yet approved Figma AI features, the article promises future insights once access is granted.
??
Opinions
??
Since Figma’s Config back in June, I anxiously waited to get beta-access to the new UI3. I immediately wanted to adjust to the new symbols, layout, and tool placement. Not to mention, it was forewarned that all users will eventually have to use UI3.
??
But I wasn’t aware that the UI3 was being?slowlyyy?rolled out to Figma users*. I expected to begin using it immediately after Config’s keynote, but I had to wait well over a month.
*Note:?Teammates on the same Figma plan may get access before you do. I became confused when one of my peers was sharing their screen to show work in Figma, and I could see they had the UI3. After a?Figma forum search, I was disappointed to see I was at the mercy of whoever grants early access to the UI.
??
So if you still don’t have access to the UI3, save this article and keep being patient (maybe pray to the Figma UI3 lords). Once you do finally have access, play around in the new UI, then come back to this article.
Now, let’s dive into these 8 tips to be equipped to use Figma’s UI3.
??
Table of contents
??
1. Swap back to the previous UI
I know this tip may seem to defeat the purpose, but a re-design can be difficult to get used to. If you just got access to the UI3 and have many design deliverables due, you may not have time to learn the new UI quite yet.
??
Steps:
??
2. Select matching layers & bulk-edit text
The placement and functionality of these tools has changed from the previous UI to UI3. Since UI3 doesn’t include the dynamic tool-bar* at the top-center of the canvas, the “select matching layers” tool was moved to the “Actions” item in the bottom menu.
The “bulk-edit text” tool’s functionality was merged with the “select matching layers” tool. Once you’ve selected text layers manually or from using the “select matching layers” tool, you can simply type to update all text layers at once.
??
Steps:
*On a side note:?I loved the dynamic tool-bar at the top of the UI (RIP). The toolbar updated depending on what I was doing in the canvas. So I’m bummed by this change, but they may continue to make improvements as they receive more feedback from the UI3 beta.
??
3. Use suggested auto-layout
This tool brings value for both new and advanced Figma users. Auto-layout is Figma’s most difficult concept to understand, and it’s tedious to carry out. “Suggested auto-layout” can do it for you (and quite well)*.
??
Steps:
??
*Note:?This tool cannot support complex frames yet.?Figma recommends?you use this tool in batches for many child-parent frames.
??
领英推荐
4. Use follow prototype
When you create a prototype, bugs can happen. Maybe the overlay didn’t correctly pop-up or the hover effect didn’t work. It can be difficult to pin-point the?exact?location of the bug as you check the prototype — especially if the prototype is complex.
When previewing a prototype, the “follow prototype” tool allows you to keep track of which frame you’re viewing on the prototype. So when you find a bug, you’ll know where it is!
??
Steps:
??
??
5. Hide hints on click for prototypes
If you conduct usability tests on UserTesting.com or similar tools, you may encounter participants who click to see the blue highlights to find the prototype’s interactions. Well, this defeats the purpose of a usability test.
Next time you conduct any research with Figma prototypes, hide the hints on click so participants can no longer cheat and find the interactions.
??
Steps:
??
6. Fix auto-layout with overlays
When you have a component with an overlay, like a dropdown (or select), you don’t want it to push other content in the frame down, and you don’t want the overlay to appear behind other layers.
My old fix for this issue was to absolute-position the overlay (now called “ignore auto-layout”). But I’ve found a new solution — adjust the frame’s canvas-stacking to be “first on top”.
??
Steps:
??
7. Use annotations in Dev-mode
Though Dev-mode has been around for some time, I’m still acclimating to its features and beginning to use it more. One feature that’s very useful is the “Annotate” tool. With this tool, you can add special notes and pin properties like height, font size, color, etc.
??
Steps:
Here is what a finished annotation looks like in Dev-mode:
??
8. Pin files to projects and workspaces
Files can be difficult to find in Figma — for designers, engineers, and stakeholders. For important files, like Dev-ready designs, you can pin them to projects and workspaces to make them more findable. This way, you don’t have to send the same Figma file link to the same person 5 times…
??
Steps:
Here is what the pinned file looks like on the?project-level:
Here is what the pinned file looks like on the?workspace-level:
That’s all for now, folks!