Exploring Figma Config 2024: Going Full Throttle

Last Modified: Jul 1st, 2024 - Category: Artificial Intelligence, News, UI Design, Web Design
2590 words, 13 minutes estimated read time.
Figma Config 2024 Recap

So, as every year, Figma held its now-famous #config event, and as usual, it will make some waves, including some controversial ones (we’ll get to that later).

This year, Figma Config 2024 has introduced several new features and updates that cater to designers and developers alike. In this article, we’ll take a closer look at these updates, including Figma AI-based features, the new Figma Slides (still in beta), the new user interface called UI3, and the new Figma Dev Mode features. We’ll also consider the impact of the failed Adobe buyout on Figma’s strategy.

Figma Config 2024: Towards Quantum UX?

Figma has evolved into a powerhouse for the design community, now catering heavily to web designers and developers. The 2024 updates bring fresh and exciting features that build on its strong foundation. Here’s a look at what stood out to me.

Notably, Figma seems to be inspired by Fabio Devin’s Quantum UX framework. While it’s currently limited to Figma’s platform and doesn’t support live adaptive user interfaces based on Big Data yet, it’s a clear sign of where things are headed. If Figma doesn’t get there first, someone else surely will.

Figma AI: Enhancing Design with Artificial Intelligence

image of an email message from Figma specifying the TOS for Figma AI
The email Figma users got yesterday

One of the most talked-about features in Figma Config 2024 is the introduction of Figma AI. This AI-powered functionality aims to streamline various aspects of the design process.

Key Features of Figma AI

Visual Search

Figma AI’s Visual Search helps locate assets quickly without starting from scratch.

  • Search Capabilities: Users can search using screenshots, selected frames, or sketches. Figma pulls similar designs from accessible team files.
  • Improved Asset Search: AI understands search context, making it easier to find relevant assets even if search terms don’t match asset names.

Efficiency Updates

Figma AI introduces automation for tedious tasks, allowing designers to focus on creative work.

  • Automated Tasks: Generate realistic images and copy, rewrite text, wire up prototypes, and rename layers with a click.
  • Stay in Flow: These automation features help maintain workflow efficiency by reducing manual effort.

Make Designs

Faced with a blank canvas, Make Designs helps generate UI layouts and component options from text prompts.

  • Text Prompts: Describe what you need, and Figma provides a first draft of UI layouts and components.
  • Exploring Design Directions: This feature kickstarts the design process by offering various design options based on user descriptions.

Practical Use Cases

Visual Search in Action

  1. Locate Design Assets: Quickly find icons, design files, and components with a single reference.
  2. Enhanced Search Experience: AI-driven search understands context, improving asset discovery.

Efficiency Features for Streamlined Workflows

  1. Automate Repetitive Tasks: Use AI to handle tasks like generating images, text, and prototypes.
  2. Rename Layers Efficiently: Simplify layer management with AI-powered renaming.

Kickstarting Projects with Make Designs

  1. Generate Initial Layouts: Use text prompts to create initial UI layouts and components.
  2. Explore Multiple Options: Receive various design drafts to explore different directions early in the process.

Training and Availability

Figma uses large language models (LLMs) tailored to how teams work in Figma. AI features are free during the beta period, which runs through 2024. Usage limits may be introduced based on user feedback and cost considerations.

  • Beta Period: Free usage through 2024, with potential future usage limits.
  • Training Approach: Models are tuned to improve performance based on user-specific workflows.

Figma UI3: Refining the User Interface

Figma Config 2024 introduces UI3, a significant redesign aimed at streamlining the user interface and improving usability. Here’s my objective review based on the new features and enhancements.

image of the new options in Figma UI3 featuring the Slides option
image of the new options in Figma UI3 featuring the Slides option

Key Features of UI3

Centering Your Creative Vision

UI3 is designed to maximize canvas space, allowing users to focus on their work without unnecessary distractions. The interface changes are aimed at making the workspace more adaptable and user-friendly.

  • Resizable Panels: Panels can be resized or hidden, providing more space for the canvas.
  • Slim Toolbar: A new toolbar at the bottom of the canvas frees up the top area, creating a roomier feel.
  • Collapsible Panels: Panels appear only when needed, keeping the workspace clean and focused.

Prioritizing Essential Features

The properties panel has been rethought to prioritize the most important controls, making it easier to access frequently used features.

  • Component Controls: Controls like variants and instances are now prioritized above attributes like color and size.
  • Unified Layout Options: Width, height, and Auto Layout options are merged into a single panel, aligning more closely with how products are built in code.

Enhancing Usability with Visual Improvements

UI3 introduces several visual updates to make the interface more intuitive and user-friendly.

  • Backgrounds on Inputs: Inputs now have backgrounds, making them easier to distinguish.
  • Borders and Rounded Corners: Dropdowns have borders, and corners are rounded for a more approachable look.
  • Expressive Icons: Over 200 new hand-drawn icons help convey complex ideas more clearly.

Supporting the Figma Ecosystem

UI3 aims to create a cohesive experience across all Figma tools, including FigJam and Figma Slides.

  • Consistent Patterns: The slim toolbar and collapsible panels are consistent across Figma tools, providing a familiar experience.
  • Flexible Design: Each tool maintains its unique functionality while fitting into the overall ecosystem.
Figma AI-based UI Kits were announced in Figma Config 2024
Figma AI-based UI Kits were announced in Figma Config 2024

Practical Use Cases

For New Users and Professionals

UI3 balances the needs of new users and professional designers by making the interface more approachable without compromising on functionality.

  • Optional Labels: Labels can be turned on to guide new users and aid discoverability.
  • Preserved Speed for Experts: Experienced designers can maintain their workflow speed with familiar controls.

Adapting to Modern Design Needs

The redesign reflects the changing nature of design, supporting higher levels of abstraction and new technologies like AI.

  • Figma AI Integration: Part of Actions, providing quick access to powerful features like text and image generation.
  • Generative AI: Supports new ways of interacting with design, making Figma adaptable to future needs.

Dev Mode: Helping Both Designes and Developers

Figma has always been strong in facilitating collaboration between designers and developers, and the new Dev Mode takes this a step further.

Key Features of Dev Mode

Stay in Lock Step with New Views and Statuses

Handoff between design and development is not a single moment but an iterative, nonlinear process. The new features in Dev Mode help streamline this process.

Ready for Dev View

  • Purpose: Helps developers find relevant tasks amidst numerous design explorations.
  • Functionality: Allows searching and filtering, parsing updates in a list, and viewing who updated what and when.

Focus View

  • Purpose: Enables developers to focus on tasks ready for building.
  • Functionality: Provides visibility into changes and status updates, including a snapshot of the design before the latest revisions.

Tracking Status

  • Purpose: Keeps developers updated on design changes.
  • Functionality: Designers can leave notes describing changes, and developers receive notifications about updates.

Stay Consistent and Efficient with Code Connect

Design systems bridge the gap between design and code. Code Connect enhances this by making design systems more useful across frameworks and languages.

  • Surface Design Systems Code: Integrates design system codes into the workflow.
  • Component Playground: Surfaces connected code snippets.
  • Framework Support: Includes React, React Native, iOS, Android, and more.

These features ensure that developers adopt design systems effectively, maintaining consistency and efficiency across projects.

Usability Improvements

Several quality-of-life updates aim to enhance the existing features in Figma.

Auto Layout Enhancements

  • Intuitive Use: Auto Layout is now more predictable and easier to apply.
  • Automatic Suggestions: Figma suggests and creates multiple frames of Auto Layout when needed.
  • Control Functionality: Allows ignoring Auto Layout when dragging elements.

UI Kits Availability

  • Pre-Built UI Kits: Includes Apple iOS, Google Material Design 3, and Figma’s Simple Design System.
  • Component Sets and Mockups: Provides full layouts that are fully editable.
  • Code Connect Integration: Ensures UI kits are backed by design system codes.

Responsive Prototype Viewer

  • Responsive Resizing: Prototype viewer resizes responsively to respect constraints and Auto Layout properties.
  • Menu Options: New menu options for previewing or presenting prototypes.

My Take on Dev Mode

In my opinion, the updates to Dev Mode in Figma Config 2024 significantly enhance the collaboration between design and development. Features like Ready for Dev View, Focus View, and Code Connect improve the efficiency and consistency of the development process. The quality-of-life improvements in Auto Layout, UI Kits, and the responsive prototype viewer further streamline the workflow, making Figma an even more powerful tool for developers. It comes with a cost, of course, and if you have several developers in your team it could get really salty, which leads us to the next section.

Figma Config 2024 introduces several new features, including Figma Slides. This tool aims to set a new standard for creating and presenting visual stories. Here’s my objective take on it:

Figma Slides: just in case you needed them.

Figma Slides is now in open beta and will be fully rolled out soon. It caters to the high demand for creating presentations within the Figma environment. According to research, Figma users created about 3.5 million presentations last year, demonstrating a significant need for integrated presentation tools that match Figma’s high design standards.

Image of the Slides popup in Figma UI3
If you click the Figma Slides button on top of UI3, you’ll see this popup

Personally, I can see the utility of such a feature since you can centralize a design system and use it in presentations. However, I wouldn’t call it groundbreaking. As Figma notes, users were already creating presentations without this feature. It’s useful, and they’re promoting it enthusiastically, but at the end of the day, it’s just a library of templates—nothing more.

Features and Functionalities

High-Fidelity Design Integration

Figma Slides integrates the visual design capabilities of Figma with the interactive feedback mechanisms of FigJam. This combination allows for creating high-quality presentations without switching between different tools.

  • Design Mode: Users can toggle on design mode to access the full capabilities of Figma Design, including Auto Layout and advanced properties.
  • Speaker Notes: Figma Slides includes speaker notes to help presenters deliver more polished presentations.

Seamless Collaboration

One of the standout features of Figma Slides is its ability to facilitate collaboration between designers and non-designers.

  • Real-Time Collaboration: Team members can co-create presentations in real time, ensuring everyone’s input is considered.
  • Interactive Feedback: Features like polls and alignment scales allow for collecting and contextualizing feedback during presentations.

Accessibility of Design Assets

Figma Slides makes it easy to access and use existing design assets, ensuring consistency across presentations.

  • Library Integration: Text styles, color styles, and other design assets from Figma are readily available.
  • Copy-Paste Workflow: Users can seamlessly copy and paste design elements across the Figma suite, simplifying the process of creating visually cohesive presentations.

Enhanced Presentation Features

Figma Slides includes several features aimed at improving the overall presentation experience.

  • Grid View: Users can edit in grid view to get a bird’s-eye view of their presentation and easily rearrange slides.
  • Embedded Prototypes: Presenters can embed interactive prototypes directly into their slides, making it easier to showcase designs.
  • Slide Transitions: Built-in transitions like smart animate and push and dissolve effects help create smoother, more engaging presentations.

Practical Use Cases

Figma Slides can be used for various presentation needs, including:

  • Product Reviews: Creating presentations for executive reviews to green-light new features.
  • Sales Decks: Convincing clients with polished sales presentations.
  • Pitch Decks: Crafting compelling stories for potential investors.

The Impact of the Failed Adobe Buyout

Finally, the elephant under the carpet: the failed Adobe buyout.

Earlier this year, the design community was abuzz with news of Adobe’s attempt to acquire Figma. However, the deal fell through, leading to speculation about its impact on Figma’s future.

Reflections on the Buyout Attempt

  1. Community Reaction: The reaction to the proposed buyout was mixed. Some saw it as an opportunity for Figma to leverage Adobe’s resources, while others feared it would stifle Figma’s innovative spirit.
  2. Independence Preserved: With the deal off the table, Figma remains an independent entity, free to continue its unique approach to design tools.
  3. Market Position: The failed buyout has arguably strengthened Figma’s position as a standalone competitor to Adobe, reinforcing its reputation for innovation and user-centric design.

In my view, the failed buyout has been a positive development for Figma. It remains free to pursue its vision without the constraints that might have come with being part of a larger corporation.

Figma Config 2024 Recap

To make the most of the new features in Figma Config 2024, here are some practical tips based on my first impressions and Figma’s user cases:

Leveraging Figma AI

  1. Experiment with Suggestions: Don’t be afraid to try out the design suggestions offered by Figma AI. They can provide fresh perspectives and ideas.
  2. Use Content Generation: Save time on placeholder content by using Figma AI’s content generation features. It’s particularly useful for early-stage designs.
  3. Regularly Check for Errors: Make it a habit to run error checks on your designs to catch potential issues early.

Creating Effective Presentations with Figma Slides

  1. Reuse Design Assets: Incorporate existing design assets into your slides to maintain consistency and save time.
  2. Collaborate with Team Members: Take advantage of Figma’s real-time collaboration to get feedback and make quick adjustments to your presentations.
  3. Keep It Simple: While it’s tempting to add many elements, keeping your slides simple and focused often results in more effective presentations.

Customizing Figma UI3

  1. Explore Customization Options: Spend some time exploring the customization options in UI3 to tailor the interface to your preferences.
  2. Optimize Your Workflow: Arrange tools and panels in a way that optimizes your workflow and reduces the time spent searching for features.
  3. Take Advantage of Performance Improvements: Don’t hesitate to work on larger projects, as the performance improvements in UI3 handle them more efficiently.

Maximizing Dev Mode

  1. Use Code Snippets: Ensure that developers have easy access to code snippets from your designs to facilitate accurate implementation.
  2. Implement Design Tokens: If your project involves multiple platforms, use design tokens to maintain consistency across different environments.
  3. Stay Updated: Keep track of version control to ensure everyone on the team is working with the latest design iterations.

Conclusion and Some Concerns

Figma Config 2024 introduces a range of new features and improvements that enhance the design and development process. From the AI-powered capabilities of Figma AI to the seamless presentation tools in Figma Slides, the refined interface of Figma UI3, and the developer-friendly Dev Mode, these updates solidify Figma’s position as a leading design tool.

The failed Adobe buyout has left Figma in a stronger position to innovate independently, which is good news for its user community. However, its virtual monopoly creates the potential for prohibitive pricing schemes similar to Adobe’s. Despite receiving a significant compensation of one billion dollars after the “failure” of the negotiations with Adobe, Figma is looking to maximize profits. While this is understandable, it could disadvantage independent designers, who may struggle with costs that are negligible for large companies but impactful for smaller ones. For more insight, read OpenAI’s official stance to understand what AI companies think about job losses.

Another concern is that AI learning features will be enabled by default for both Free and Professional tiers. This means users will be training the AI model, which, notably, won’t be free. On Figma Config 2024 day, it wasn’t clear whether users would be able to disable this option.

However, the company sent an email yesterday to all Figma users, clarifying that users will be able to use AI whether they allow training or not. The email included a simple tutorial on how to disable AI training.

image of Figma AI training options as sent on yesterday's email
Figma AI training options as sent on yesterday’s email

Sources

  1. Figma Config 2024 Overview
  2. Figma AI Features
  3. Introducing Figma Slides
  4. Figma UI3 Updates
  5. Dev Mode Enhancements

We can improve your business!

Let us help you with the best solutions for your business.

It only takes one step, you're one click away from getting guaranteed results!

I want to improve my business NOW!