Config 2024: Figma’s AI suite, a full interface redesign, and new presentation tools
At this year’s Config conference, Figma rolled out a broad set of updates spanning its entire platform. The headline announcements include a new suite of AI-powered features, a comprehensive interface redesign dubbed UI3, and a new tool called Figma Slides. Alongside these, Dev Mode received significant updates aimed at streamlining the handoff process between design and development teams.
Figma’s announcement comes from a belief that AI’s ability to generate fully functioning interfaces will only increase the importance of design. The company positions its role as helping teams explore a wider space of design possibilities to differentiate their products.
A new suite of AI-powered features
Building on out-of-the-box large language models (LLMs), Figma has introduced a collection of AI features designed to help users create, search, and automate. The beta features are free for all users through 2024, with potential usage limits during the test period. Figma says it will later clarify pricing when the features become generally available.
Key capabilities in the new suite include:
- Visual Search: Users can now search for assets across their team files using a screenshot, selected frame, image, or even a sketch drawn with the pencil tool. Figma pulls in similar designs from files the user has access to.
- Improved Asset Search: The search feature now uses AI to understand the context of queries, so finding assets is possible even when search terms don’t exactly match asset names.
- Make Designs: Located in the new Actions panel, this feature generates initial UI layouts and component options from text prompts, giving designers a starting point to explore different directions.
- Text generation and rewriting: Users can generate realistic copy, riff on existing text, rewrite content, and translate it.
- Prototype wiring: The tool can automatically connect prototypes, eliminating a tedious manual step.
- Layer renaming: All layers in a file can be organized and renamed with a single click.
Figma emphasizes that while these features utilize standard LLMs, they will need to be tuned to the specific ways teams work within the Figma environment.
UI3: The third major interface redesign
Figma started rolling out UI3, marking the third major redesign since the platform’s inception over a decade ago. The new interface emphasizes a more immersive canvas, a component-centered user interface, and a new set of icons. The changes aim to create more space within the tool while respecting the workflow patterns users have already established. The redesign also lays the groundwork for new surfaces across the Figma platform by establishing consistent patterns and structures.
Because adjusting to a new interface takes time, Figma is rolling out UI3 gradually, starting today. Users will have the option to turn the redesign off as Figma gathers feedback and improves UI3. However, the company intends to eventually migrate all users to the new interface.
Figma Slides: bringing design tools to presentations
Recognizing that collaboration on slide decks often requires workarounds, Figma has built Figma Slides. The new tool brings core Figma features—such as multiplayer, live designs, and a zoomed-out grid view—to presentation building. The company notes that teams already created over 3.5 million slide files in Figma in the past year, signaling a strong demand for a dedicated solution.
Figma Slides will be available in free beta initially. Starting in early 2025, it will move to a paid model, with plans starting at $3 and $5 per user per month, alongside free plan availability.
Dev Mode updates: closing the loop on handoff
Building on the Dev Mode workspace introduced at Config 2023, Figma is launching updates designed to better reflect the iterative, nonlinear nature of the design-to-development process.
Ready for Dev View helps developers filter through design files to find what’s actually ready to be built. This view lets developers search and filter across multiple pages, parse updates in a list format, and see who updated what and when.
Focus View allows developers to tune out distractions and see what’s ready to build with full visibility into historical changes and status updates. This includes a snapshot of how the design looked before a recent revision. Once a feature is built, a developer can mark the design as “completed” to notify the broader team.
When a designer makes changes to a design marked as Ready for Dev, they can now leave notes describing what changed. Developers receive a notification about the updates, giving them context on what to tackle next.
Finally, Figma is making Code Connect generally available. This feature bridges design and code by surfacing code snippets from design systems and making them usable across different frameworks and languages. It now supports React, React Native, iOS, and Android, and includes improvements like surfacing connected code snippets in the component playground and a new tool to streamline setup. These Dev Mode updates are now available to users on Organization and Enterprise plans.
Smoother workflows: Auto Layout suggestions, built-in UI kits, and a responsive prototype view
Alongside the new AI features, a set of quality-of-life improvements targets everyday design work, from layout structure to presentation.
Auto Layout gets more predictive
Auto Layout now takes a more active role in structuring designs. Figma can suggest when multiple Auto Layout frames would suit a full design element and generate those frames automatically, saving you from applying the layout frame by frame. For times when absolute positioning is the goal, holding ctrl while dragging a design element into an Auto Layout frame overrides the layout behavior.
Official UI kits available in the assets panel
Getting a project off the ground is faster with three official UI kits now accessible directly from the assets panel: Apple iOS, Google Material Design 3, and Figma’s Simple Design System. Each kit includes component sets and full example mockups, so you can drag an entire editable screen into your canvas and build from there. Every kit also ships with Code Connect support, linking design components to their code counterparts.
Prototype viewer adapts to any screen
Presenting prototypes is more flexible with a new viewer that resizes responsively. A dedicated menu option for previewing or presenting lets the viewport react to window resizing or device frame changes, honoring the constraints and Auto Layout properties placed on the designs.
Billing updates on the roadmap for agencies and freelancers
Beyond interface changes, Figma is reworking its billing architecture with the goal of easing collaboration between freelancers and agencies and their external clients. The effort centers on simplifying project hand-off and billing processes for independent professionals. More details will be shared as the work develops.
