Figma Config 2024: Redesign, DevMode, AI & Figma Slides

In this video, the host discusses the new features introduced in Figma Config 2024, including a redesigned UI with floating sidebars, contextual options, and expanded capabilities for Auto Layout. They also cover AI enhancements, such as AI-generated designs and the ability to search for design elements by image or drawing. Additionally, the video touches on the controversial Dev Mode, which requires extra payment, and the introduction of Figma Slides for creating presentations with embedded prototypes. The host expresses mixed feelings about the updates, noting some as useful but criticizing the monetization strategy.

Takeaways

• 🔄 Figma's UI has been revamped with floating sidebars and a bottom toolbar to save vertical space.
• 📐 The Auto Layout feature now includes AI suggestions and the ability to automatically expand elements within containers.
• 🔧 A new contextual right-hand sidebar adapts to the selected component, showing relevant properties and options.
• 📱 Figma introduces built-in UI kits from iOS and Material Design, allowing for direct use and customization.
• 💰 'Dev Mode' is a new feature, but it comes at an additional cost, which the speaker finds disappointing.
• 🖌️ AI capabilities have been expanded to include creating screens, updating colors, and searching for designs by image or text.
• 🔍 A new search feature allows users to draw an icon to find similar designs or illustrations within Figma.
• 🗣️ Figma now supports translations of designs into different languages, a feature previously available through plugins.
• 📑 The renaming of layers has been improved for better organization within projects.
• 🎞️ AI can now create prototypes from a selection of screens, streamlining the design to prototype workflow.
• 📊 Slides can now be created and edited within Figma, with features like color changes, grid views, and embedded prototypes.

Q & A

What are the main updates introduced in Figma Config 2024?

The main updates in Figma Config 2024 include a redesigned UI with floating sidebars, contextual right-hand sidebar, Auto layout improvements, built-in UI kits, Dev mode, AI enhancements, and the introduction of Figma Slides.

How has the user interface of Figma been revamped in the 2024 update?

The UI has been revamped with floating left and right sidebars, and the top toolbar has been moved to the bottom to save vertical space.

What is the new contextual right-hand sidebar feature in Figma Config 2024?

The contextual right-hand sidebar displays options and properties relevant to the currently selected item, such as a frame or a component.

What improvements have been made to Auto layout in the 2024 update?

Auto layout now includes an AI suggestion feature, automatic frame expansion to fill containers, and the ability to drag elements into an auto layout frame for absolute positioning.

What are UI kits and how do they function in Figma Config 2024?

UI kits are pre-designed components and elements from design systems like iOS and Material Design. They can be directly used and customized in Figma, including changing colors and adjusting views for different devices.

What is Dev mode in Figma Config 2024 and why has it been criticized?

Dev mode is a feature aimed at developers, offering a focused view of design changes and a condensed view of ready-for-dev items. It has been criticized for being an additional paid feature.

How does the new responsive preview feature work in Figma Config 2024?

The responsive preview allows developers to see auto layouts and designs in action, simulating different screen sizes and orientations.

What is the 'Code Connect' feature introduced in Figma Config 2024?

Code Connect allows users to link Figma components to Visual Studio Code, enabling changes made in the code editor to be reflected directly in Figma.

What AI capabilities have been added to Figma Config 2024 for design creation?

AI can now suggest auto layouts, create screens, update colors, border radii, and text, as well as generate images and perform translations of designs.

What new search capabilities have been introduced in Figma Config 2024?

New search capabilities include finding designs by image, text search, drawing to find icons or illustrations, and searching for designs within the Figma community.

How do the new Figma Slides feature work?

Figma Slides allow users to create and organize presentations within Figma, with features like color and font customization, grid view for slide organization, and the ability to embed interactive prototypes.

Outlines

00:00

🛠️ Figma UI Redesign and New Features in Config 2024

The video discusses the new updates introduced by Figma at Config 2024. The host shares screenshots and opinions on the UI redesign, which includes floating sidebars and a bottom toolbar to save space. There's skepticism about the necessity of these changes for a major event like Config. Other features include a contextual sidebar that adapts to the selected element, the ability to expand the sidebar, and enhancements to the Auto Layout function, such as AI suggestions and automatic filling of containers. Additionally, there's a new feature for absolute positioning elements within an auto layout frame by pressing control while dragging.

05:01

📱 Enhanced UI Kits, Dev Mode, and Responsive Previews

The video continues with the introduction of baked-in UI kits from iOS and Material Design, allowing users to directly use and customize components like buttons and drawers. The host expresses disappointment in the new Dev mode, which is now a paid feature, and criticizes the additional costs. A new status update feature for developers and a responsive preview option for auto layouts are also introduced, along with a 'Code Connect' feature that connects Figma to VS Code for live updates. The host also mentions the ability to copy code and connect elements for publishing applications and websites directly within Figma.

10:02

🤖 AI-Powered Design Features and Community Search

The script covers AI-driven features such as the creation of designs using AI, which the host compares to existing tools like Framer AI. It allows for basic customization like updating colors and text. A new search capability is introduced, enabling users to find where an image or design is used within Figma by uploading or describing it. Additionally, there's a feature to search for designs in the community and drag and drop them for inspiration. The video also touches on AI suggestions for duplicated content and the ability to translate designs into different languages natively within Figma.

📑 Slides and Presentation Enhancements in Figma

The final paragraph introduces new slide features in Figma, allowing users to create and organize slides with a UI similar to Keynote. Users can change colors and fonts directly, and the system automatically adjusts text colors based on the background. There's a grid view for reorganizing slides and sections, and the ability to embed prototypes directly within slides for interactive presentations. The host also mentions the addition of presenter notes, animations, and AI voice tone adjustments for slides. However, there's criticism of Figma's business model, with concerns about additional costs for new features.

Keywords

Figma Config 2024

Figma Config 2024 refers to the annual conference by Figma, where they announce new features and updates to their design tool. The video discusses these updates, which are significant for designers and developers as they shape the future of digital design workflows. The script mentions that these updates are not yet accessible directly in Figma, and the speaker has taken screenshots to discuss them.

Redesigned UI

Redesigned UI stands for User Interface, which has been revamped in the 2024 updates. The script describes a new layout with floating sidebars on the left and right, and a bottom toolbar, indicating a significant change in how users will interact with the software. This redesign is a core focus of the video, as it impacts the efficiency and user experience within Figma.

DevMode

DevMode is a new feature introduced by Figma that is aimed at developers. It provides a more detailed and focused view of design changes, which can be particularly useful for frontend developers. However, the speaker expresses disappointment that this feature is being offered as an additional paid service, which they view as a negative move by Figma.

AI

AI, or Artificial Intelligence, is a key theme in the video, with Figma integrating AI to assist in design tasks. Examples include suggesting auto layouts, creating screens, and generating images. The script mentions that while AI can be helpful, there is also skepticism about its current capabilities and the hype surrounding it.

Auto Layout

Auto Layout is a feature in Figma that allows for dynamic resizing and positioning of design elements. The script discusses an update where AI can suggest an auto layout, even when elements are not grouped together, which can streamline the design process by automating certain layout decisions.

UI Kit

UI Kits are pre-designed sets of user interface elements that can be used to speed up the design process. The script mentions that Figma now includes baked-in UI kits from iOS and Material Design, allowing designers to quickly incorporate standardized components into their projects.

Prototype

A prototype in the context of design is a preliminary model of a product that allows for testing and refinement. The script discusses a new feature where AI can create a prototype from a selection of screens, which is a significant time-saver for designers and can improve the efficiency of the design process.

Search Capability

Search Capability refers to the ability to find specific elements or designs within Figma. The script describes new search features, such as finding where an image was used or searching by drawing an icon, which can greatly enhance the discoverability of design assets.

Slides

Slides are a new feature in Figma that allow for the creation of presentations directly within the platform. The script describes an interface similar to Keynote, with the ability to view, organize, and edit slides, as well as embed prototypes, making it a comprehensive tool for pitch decks and presentations.

Responsive Preview

Responsive Preview is a feature that allows designers to see how their designs will look on different screen sizes and orientations. The script mentions an update to this feature, making it more interactive and allowing developers to better understand how auto layouts will behave on various devices.

Code Connect

Code Connect is a feature that links Figma components to a code editor like Visual Studio Code. Changes made in the code editor can be reflected in Figma, and vice versa. This feature is aimed at improving the collaboration between designers and developers, although the script expresses uncertainty about its practicality.

Highlights

Figma introduces a redesigned UI in Config 2024 with floating sidebars and a bottom tools bar to save space.

New UI features include the ability to collapse and expand the sidebars for different views and controls.

Contextual right-hand sidebar adapts to the selected component, showing relevant properties and options.

Auto layout enhancements allow AI to suggest layouts and automatically create nested frames.

New feature to expand elements and fill containers without dropdown navigation.

Dragging elements with control pressed positions them absolutely within an auto layout frame.

Baked-in UI kits from iOS and Material Design for direct use and customization.

Dev mode introduced as a paid feature, causing controversy among developers.

New status updates and comments for developers to track changes in designs.

Responsive preview allows developers to see auto layout in action directly.

Code connect feature connects Figma components with VS Code for live updates.

AI capabilities for design generation, allowing for quick creation and customization of screens.

Search functionality to find designs by image, text, or drawing an icon.

AI suggestions for duplicated content and automatic updates to content.

Translation feature to convert designs into different languages natively within Figma.

AI-assisted layer renaming for better organization of design elements.

AI can create prototypes from a selection of screens, saving time for designers.

Introduction of Figma Slides for creating and organizing presentations directly in Figma.

Embedding prototypes within slides for interactive presentations.

Concerns about Figma's pricing strategy and the necessity of the new features introduced.