Noah Levin, Figma’s Vice President of Design, heralded the launch of a major interface revamp, the platform’s most significant in almost five years. Honestly I wasn't expecting to care too much because it hasn't made it into my daily workflow as a web designer just yet. However I've noticed it to be at the table every time I white-labeled my services out to larger agencies. Knowing the caliber of clientele they service I knew it wasn't an accident. When I tuned in live I wasn't even close to interested in learning a new platform lol but the team did their justice with this overhaul that almost feels like a salute to designers across the globe.
Internally codenamed UI3, Levin and his team prioritized three principal goals: enhancing accessibility for novices, refining the workspace for veteran designers, and seamlessly incorporating potent AI functionalities.
Enhancing the Properties Panel
The updated properties panel eliminates obscure input fields rarely used after initial setup of favorite or shared, company-wide UI elements. Instead, it highlights functional information, making UI elements easily identifiable. Previously, users had to hover over elements to discern their functionality, a hurdle for beginners that has now been removed. The redesign aims to make the panel intuitive for new users while maintaining its utility for seasoned designers.
Levin notes that the redesign of the properties panel was driven by direct client feedback. “Many companies wanted this to prevent designers from creating numerous bespoke components,” he says. “Developers faced issues with rebuilding existing components.” One major tech client reported a significant portion of bugs arising from developers not utilizing pre-existing bespoke design components. “There’s a benefit to not constantly reinventing the wheel,” Levin remarks. While innovation has its place, most companies prefer established patterns. Highlighting these prominently became a key objective for the redesigned properties panel.
Streamlining Collaboration and Prototyping
Primary UI elements automatically minimize when reviewing or collaborating on prototypes, ensuring the design remains the focus. “We included the option to minimize everything and display just the canvas, especially during collaboration,” Levin explains.
The revamped Figma introduces new AI tools designed to be accessible without overwhelming users. “We needed a central location for AI tools, especially for newcomers,” Levin says. The team introduced a centralized “Actions” button in the toolbar, housing various AI and non-AI features, simplifying user experience by providing quick access to powerful tools.
The “Actions” button, identifiable by the standard sparkles icon, intelligently presents options based on canvas context. For example, importing an image without a transparent background prompts the “Remove background” option first.
Beyond the Actions button, Levin describes a magical AI implementation. Each design element displays a bounding box with a handle for dragging, enabling the AI to contextually generate related elements, such as transforming a single song element into a complete faux playlist.
The AI also offers modern app tools, allowing designers to translate, shorten, or rewrite text with a click, facilitating rapid iteration. Content generation tools populate designs with realistic text and images, enhancing mockup engagement. Background removal tools enable users to isolate subjects within images directly in Figma, eliminating the need to switch between applications.
Simplifying Figma for Novices
“We realized we were welcoming a diverse user base over the years, not just designers. Catering to this eclectic audience was complex, requiring a more inviting and user-friendly approach,” Levin explains. Leveraging Figma’s novel AI engine, the platform now allows users to generate interfaces through prompts. The goal isn’t to produce AI-driven UIs but to offer robust starting points for users to adapt, modify, and tailor to their specific requirements.
Simultaneously, the comprehensive overhaul had to cater to Figma’s dedicated cadre of expert designers. After years of feature accumulation, Figma pressed the reset button and decluttered without diluting the interface, a move professional designers would disfavor. Instead, it streamlined the interface and toolbar, enhancing work efficiency by placing the user’s creations at the forefront.
“The essence of design is your work,” Levin asserts. Previously, the interface’s clutter restricted the design canvas, detracting from the creative process. The revamped UI showcases a streamlined toolbar at the bottom and a customizable properties panel on the right, which can be collapsed to maximize canvas space. This panel now allows for user customization, enabling resizing and labeling to suit individual workflows.
Accelerating the Design Workflow in Figma's Update 2024
A standout feature in figmas 2024 update is quick-click prototyping. By selecting “Make Prototype,” users can swiftly transform static designs into interactive experiences. The AI automates UX structure creation, allowing designers to tweak elements, saving time on manual connections. Additionally, automatic layer renaming keeps files organized and developer-ready.
For professionals in large companies, Visual Search and Asset Search are invaluable. Visual Search allows users to find and reuse designs by uploading an image or selecting a canvas area, surfacing visually similar designs from team files. Asset Search understands query semantics, simplifying relevant component and asset location.
This functionality transcends simple keyword matching, understanding typical design element usage. “Personally, I use it daily,” Levin shares. It addresses the common issue of locating design files from images or drawings, a problem many companies face. “[Figma’s AI] can find anything in team projects from an image or words,” Levin says.
Iterative Design and Feedback
Given Figma’s loyal professional user base, extensive beta testing was crucial. An internal design team initially tested the new interface, which was universally disliked for excessive simplification. External beta testers then provided feedback, creating an effective iterative feedback loop.
“We included a switch to revert to the old design, gathering feedback each time someone did,” Levin describes. This data-driven approach ensured the redesign addressed actual user pain points. Initially, many users preferred the old design, but continuous adjustments led to a significant reduction in reversion rates. Currently, only those demonstrating prototypes to non-beta testers revert to the old design.
Levin is confident in the new Figma’s reception, with the UI3 and AI tools debuting at the Config user conference. “It would be a huge waste of time and money otherwise,” he laughs. However, the redesigned UI and architecture were built with future adaptability in mind, ensuring the platform can evolve with technological advancements and user needs. “We hope this redesign will last us a while, but we’re prepared to make adjustments as necessary,”.
This isn't the first article in this collection that high lights the need for iterative design and feedback. The days are long gone of spending countless hours and weeks on a concept just to arrive to an unfamiliar space and feeling of dread for the next round of designs. When you dive into design get prepared to get comfortable in noticing the subtle things have the same weight as your decisions daily.. or just dance with your local creative to throw down!
Comments