Understanding the new features in the latest release of Figma
Figma, our favourite collaborative design platform, has introduced a suite of innovative features in the last few months to further benefit the work of digital professionals. This article explores the key updates introduced up to August 2024, offering insights into how these tools can enhance productivity and creativity for designers, developers and other digital creatives.
Redesigned User Interface: UI3
First off, Figma has introduced a major overhaul of its user interface, named UI3. The main themes of UI3 are:
Centre the user, not Figma
As Figma has added powerful new capabilities over the years, such as interactive components and AI-assisted design, there is always a risk of these features feeling extraneous and distracting from the core focus. The goal with UI3 is to shift the canvas away from the user interface and towards the work itself. This entails a more canvas-centric design, emphasising the workspace by reducing unnecessary UI elements. The result is a less distracting environment, where designers can have better creative flow and more fully engage with their projects.
Balance the Needs of both New and Experienced Users
Figma is also trying to improve accessibility to the product. The more powerful it has become, arguably the more challenging for newcomers. The revamped interface tries to cater better to users across all skill levels, from beginners to expert, while still preserving the familiar ergonomics that experienced Figma users have come to expect.
This redesign aims to improve usability and customisation options for both novice and experienced designers. Figma's new UI features a redesigned toolbar, softer edges and an expanded icon library with more than 200 additions. This refresh aims to balance user-friendliness for newcomers with the robust functionality experienced designers expect.
Adapt to the Changing Nature of Design
The design landscape has evolved significantly over the past decade. For example, we’ve seen much increased use of reusable components and the transformative capabilities of generative AI, which have transformed design workflows. UI3 acknowledges this and keeps in mind that Figma needs to adapt to an evolving world by offering higher levels of abstraction and flexible building blocks beyond design elements themselves.
Lay the Foundation for Figma's Future
As Figma continues to bring design and code closer together with Dev Mode and boost productivity through Figma AI, the team is also introducing new products, such as Figma Slides UI3 indicates that the goal of the Figma development team is to provide a cohesive family of tools across the Figma ecosystem, preparing for the next chapter of design innovation.
Key UI3 Features
There are numerous and include:
Immersive work interface: There’s now more space to work with accessible tools and a modular interface.
Redesigned icons and components: A new range of icons, perfectly integrated into the new interface. Clearer icons provide a faster and more intuitive understanding of the interface.
New toolbar: A new toolbar is now available at the bottom of the screen, incorporating all the new functions.
Optional Labels: The Design panel now includes optional labels for easier navigation. Labels can be switched on and off as desired.
Rounded Corners: A subtle design change that contributes to a more approachable interface.
Changes to Panels: Users can now customise their workspace by adjusting panel sizes. They cab also hide panels, to allow for a more focused design experience. When using the spotlight feature, panels automatically hide to emphasise the work being presented.
A special new addition to the toolbar is the Actions menu, often referred to as the "anything" button. This includes access to:
AI tools: For example, for generating a design, replacing content or creating images.
Search tool: For finding library assets by name or by description.
Commands for common actions: For example, collapsing all layers in the Layers panel, or toggling rulers on and off.
Figma AI Integration
Artificial intelligence has been seamlessly integrated into Figma's toolkit, offering a range of capabilities to streamline workflows and boost creativity. Figma AI is currently in beta and will be rolled out to users gradually.
Features include:
Visual Search: Figma can search more flexibly through its use of AI. By uploading an image, selecting an area on your canvas or entering a text query, Figma can find visually similar designs from across all your team’s files.
Asset Search: Figma's AI can better comprehend the semantic meaning and context behind your queries. It does this by learning how design elements are typically used, rather than indexing only the object names. This allows it to return more relevant components and assets, even when search terms don't precisely match asset names.
Translate, shorten, or rewrite text: Do this without having to leave your workspace to use Google Translate or similar tools.
Smart Content Population: Replace placeholders with AI-generated visuals and text, so you can quickly populate your designs with relevant, realistic content sparking creativity and helping designers explore new directions.
Enhanced Prototyping: AI integration reduces some of the more manual tasks facing designers, thereby accelerating the prototyping phase.
One-Click Background Removal: This is a great time-saver, eliminating the need for Photoshop or other image editing software. It’s available using several plugins, including Remove BG, Cutout and Remove Background (Privacy-First).
Automatic Layer Naming: Powered by advanced AI, the AI Rename Layers plugin automatically renames layers based on content and context, helping to organise design elements quickly.
Intelligent Auto Layout: Simplify component configuration with AI assistance, by removing the need to do it individually. Auto Layout automatically adjusts the size of objects based on the layout size or content, while ensuring that spacing is consistent.
The integration of AI into Figma aligns with industry trends and offers significant advantages in terms of design workflows. For example, time efficiency can be improved, by consolidating tasks previously requiring multiple tools into a single platform. Creativity can be enhanced, by automating routine work so that designers focus more on high-value creative tasks. And for the team as a whole, skills can be raised and collaboration streamlined, fostering better teamwork and design consistency.
As AI becomes more embedded in the design process, we can expect Figma to gradually shift more towards efficient and innovative design processes, with more time-consuming tasks handled by AI and designers concentrating on design concepts, aesthetic refinement and user experience.
Figma Slides
Figma Slides is a new product that combines the precision of Figma design with user-friendly presentation tools. Slides is a presentation tool designed to appeal to both designers and non-designers alike and combines advanced design features, collaborative tools and interactive elements to streamline the creation of compelling slide decks.
Here are the key features:
Design Flexibility: Slides borrows from the familiar Figma interface, incorporating Auto Layout and Advanced Properties, speeding up the creation of polished presentations. It also provides access to full Figma Design properties through Design Mode.
AI-Assistance: An AI tool to help refine text, adjusting tone and length to suit various needs. It can also generate images. There are tone presents such as Executive, Technical, Basic, or Educational and you can ask it to try again, as many times as you like.
Variable Views: Users can toggle between slide view, slide stacks and grid views, for better visualisation and collaboration. Grid View is perfect when you want a comprehensive overview of all slides, for organising and management across the slide deck.
Collaboration Tools: Figma Slides emphasises teamwork with shared templates and theming options, promoting consistency across projects. It offers a variety of pre-made templates from Figma and the Figma Community. These cater to various scenarios, from portfolio presentations to design reviews and help set consistent colours and text styles across entire presentations. There is also the ability to publish custom templates for team-wide use.
Interactive Elements: Figma Slides can insert interactive prototypes directly into presentations. This feature can be used to engage audiences with real-time feedback and interaction tools such as polls, as well as alignment scales to help gauge agreement and identify the most important points on the slide.
Enhanced Dev Mode
Dev Mode has received significant updates to improve the design handoff process. Here are some of them:
Ready for Dev View: Centralised space to view designs prepared for development. Focus View: Dedicated mode for detailed design annotation and inspection.
Enhanced Status Tracking: Improved system to monitor design progress, including development readiness, implemented changes and completed designs.
Dynamic Annotations: Dev Mode annotations that update automatically with design changes, facilitating clear communication of updates to developers.
Change Comparison: Modal feature allowing side-by-side comparison between any two frames, detached components or overrides.
In-Editor Plugins: Integration of Figma plugins within VS Code, enabling use of third-party tools and custom code without switching environments.
Automated Plugin Execution: Option to automatically run plugins for individual users or organisation-wide (exclusive to Enterprise plan).
Design Update Notifications: Alert system notifying developers of changes to designs marked as Ready for Dev, including relevant notes about modifications.
Code Connect: Improved tools for connecting designs to code repositories.
Project Transfer Enhancements
Figma has introduced new features to streamline project transfers and collaborations. One of the most significant improvements is the ability to transfer work to clients on Professional plans. Previously, this feature was limited to Organisation and Enterprise plans, which restricted the flexibility of freelancers and smaller agencies working with clients on more modest subscriptions. The benefits include:
Improved Workflow: Designers can now seamlessly hand off completed projects to clients, regardless of their plan type.
Broader Collaboration: This feature opens up new possibilities for working with a wider range of clients, including smaller businesses and startups.
Professional Presentation: The ability to transfer projects directly within Figma maintains a polished, professional appearance throughout the client relationship.
Copy Transfers: Users now have the option to transfer copies of their work for reference or future iterations, whilst retaining the originals. This protects against accidental loss or unwanted changes after transfer and addresses version control. It also lets them maintain copies of client work for their portfolios without compromising client confidentiality.
General Improvements
Several smaller but impactful updates have been introduced to enhance the overall Figma experience. Here are some of them:Enhanced Auto Layout: More intuitive handling of multiple rows and columns.
Responsive Viewer: A new feature for testing prototype responsiveness.
Integrated UI Kits: Direct access to UI kits from partners such as Apple and Google.
FigJam Pages: The introduction of a Pages feature in FigJam for better organisation.
Text Style Overrides: A significant update to text handling that allows users to apply italics, bolding and underlining without detaching from the original text style.
Address Editing: Direct editing of billing and shipping addresses in admin settings.
File Pinning: The ability to pin files to workspaces (Enterprise only).
Self-Serve Domain Management: Improved tools for managing organisational domains.
As we've explored the many new features in Figma's latest release and recent other updates, it's clear that the platform continues to upgrade Figma’s capability to significantly enhance the workflow of digital professionals across various disciplines.
Conclusion
It's worth noting that to make the most of these advanced features requires a deep understanding of design principles and hands-on experience with the Figma platform. As the digital design landscape continues to evolve at a rapid pace, professionals in the field should commit to ongoing learning and skill development to remain competitive and equipped to tackle the complex design challenges of tomorrow.
Related Training Courses
Useful Resources
- Navigating UI3: Figma's new UI A guide for people who are switching over from Figma’s previous UI
- Enable UI3 for al users Chrome extension to enable UI3 Beta for Figma for all users, without the need to wait on the waitlist
- Human-centered design What is human-centered design - and how does it work in practice?
- Figma’s Dev Mode Bring design and development closer together in Figma
- New features previewed in Config 2024 Includes information about the AI features, Dev Mode and Figma Slides
- Figma AI: Empowering designers with intelligent tools AI-powered features to help bring your best ideas to life
- Figma Slides: An Honest Review of the Newest Presentation Builder Article in Medium
- Figma Slides Official page from Figma
- Figma Project Transfer Enhancements How to transfer a project or team to a different account