What’s New in Figma? Highlights from ConFig 2024

If you are familiar with Figma, it’s likely because you are a UI/UX designer, graphic designer, or developer. However, even if you don’t fall into these categories, your interest in digital product design might have led you to discover Figma. This tool has become one of the top choices in the industry for UI design. Its popularity stems from its user-friendly interface and the ability to access it directly through a web browser.

What is new Figma?

We already know that Figma boasts impressive and functional features like Auto Layout, Variables, and real-time collaboration. Here are some additional key features that were recently announced.

1. Figma AI
2. UI 3
3. Slides
4. Dev Mode

Figma AI

We are already aware of the impact of AI in 2024. Every company integrates AI into their products to stay competitive. Figma has joined this trend by introducing AI features, including: 

1. Creating Design Mockups: AI can generate design mockups based on user input and preferences.
2. Adding Relevant Content: Automatically populate designs with relevant text and images.
3. Creating Prototyping Links: Simplifies the process of linking screens for prototyping.
4. Search with a Visual: Allows users to search for design elements using visual inputs.
5. Rename Layers Automatically: AI renames layers to maintain organization and clarity.
6. Instantly Remove Backgrounds: Quickly remove image backgrounds with AI assistance.
7. Rewrite and Translate with AI: AI tools for rewriting text and translating content into different languages.

Creating Design Mockups

We’ve already seen how AI can generate content such as images, text, videos, and animations through prompts. Now, these capabilities are integrated within the Figma app. You can generate designs simply by typing an appropriate prompt, and Figma’s AI will create mockups for you. This AI has been trained using our design files to ensure it produces relevant and high-quality content.

Adding Relevant Content

When designing, we often find ourselves copying and pasting the same component or layer repeatedly. Replacing the content within these layers is manageable when there are only a few elements. However, this isn’t always the case. Now, with access to Figma AI, this process becomes more efficient. Figma AI can automatically replace relevant content for you. Simply stretch the auto layout frame in the desired direction, and Figma AI will handle the rest, ensuring that your design remains consistent and saves you valuable time.

Creating Prototyping Links

All designers know that prototyping can be a tedious process, especially when it involves connecting numerous interactions manually. This new feature aims to rescue us from that hassle by automatically connecting the wires for you. However, I’m unsure how it will understand the application’s flow. It’s likely that the AI uses layer names to identify the flow, but I can’t say for certain how it makes these decisions. Consequently, I have some doubts about its accuracy and effectiveness.

Searching with the Visuals

When ideating and creating a moodboard for the perfect design, testing the app with different design visuals can be time-consuming, energy-draining, and costly. Now, with Figma AI, you can simply pull out an image of the visuals you think are suitable for your product. Figma AI will then match your existing design to different design visuals. This feature is similar to one introduced in Adobe Illustrator, which allows you to match illustrations to different styles seamlessly.

Rename Layers Automatically

Renaming layers in design tools like Photoshop, Illustrator, and Figma can be a tedious task. However, with the introduction of Figma AI, this process has become more efficient and less time-consuming. Although the exact mechanics of how it works remain unclear, the AI is capable of automatically renaming layers. If Figma AI successfully implements this feature, it could be a game-changer, allowing designers to focus more on creating and less on administrative tasks, thus enhancing their productivity and creativity.

Instantly Remove Backgrounds

In the online world, many AI tools excel at flawlessly removing backgrounds from images, such as remove.bg. And of course, we can’t forget about Photoshop, a long-time favorite for this task. Now, with Figma AI, designers can effortlessly remove backgrounds from any image directly within the Figma application. This eliminates the need to rely on third-party applications for such a small task, streamlining the design process and making it more efficient.

Rewrite and Translate with AI

As UI designers, we often encounter the need to design applications in different languages. Sometimes we are familiar with the language, and sometimes we are not. Figma AI can now assist by automatically translating the application’s language with just a few clicks, making the process seamless and efficient. This feature simplifies the workflow and ensures that the design remains consistent across different languages.

Conclusion

Figma AI encompasses various functionalities that are currently undergoing beta testing with limited accessibility. As it evolves, it promises to significantly enhance designers’ productivity during their leisure time. Once fully tested, its potential impact on design efficiency and business growth will become clearer. Startups, especially, stand to benefit from these advancements, potentially accelerating product development and market entry. advantage using it.

UI 3

We are already familiar with the current UI of Figma, which works well and adheres to UX principles. I love the current UI, as it has been with us since Figma’s inception. However, some users are finding it monotonous, especially given the amazing and innovative web designs we see today. To address this, Figma introduced UI 3, which has a modern and cleaner look. They have shifted several elements around, such as moving the file title to the left side panel. Although there will be a learning curve, as designers, we’ll need to adapt to these changes.

One noticeable change is that the left and right panels are now floating, which slightly reduces the usable space on the working canvas. Nonetheless, I’m excited to try it out. Here are some points Figma mentioned about the new UI:

1. Provides more control over the interface with resizable and collapsible panels.
2. Draws more emphasis on your work on the canvas.
3. Makes features more intuitive by improving their placement, grouping, and adaptability to different contexts.
4. Adds consistency with Figma’s other products, making it easier to switch between Figma Design, FigJam, Dev Mode, and Figma Slides.

Slides

It is similar to MS PowerPoint but specifically designed with designers in mind. It includes all the Figma features such as animation, Auto-layout, spacing tools, and more. Essentially, it’s like a Figma file with integrated presentation tools.

1. Choose from flexible templates to design powerful presentations for any audience
2. Co-create and present confidently with presenter notes, co-presenting controls, and other collaboration features
3. Create live slides with polls, alignment scales, and voting to capture stakeholder feedback and drive decision-making
4. Customize your slide deck designs using the Figma Design tools you already know and love

Dev Mode

It’s not an entirely new concept, but Figma has introduced a batch of new features to help designers and developers stay in sync and up to date.

1. Developers can now compare the old version and the updated design.
2. There is a dedicated section for items that are ready for development.
3. Developers can mark designs as developed or completed.
4. A focus mode is available for ready-to-develop sections, among many other features.

Source: https://www.figma.com/whats-new/