Articles

“As a tradeoff for pixel-level control and the familiarity of their favorite toolkit in Figma, designers have gone without basic slide functionalities like speaker notes and slide transitions. Figma Slides not only addresses those core features, but amplifies design functionality, making it easier for both designers and non-designers to co-create in the same space.”

Coming soon: ​“Moving forward, we’re working to make it easier for freelancers and agencies to collaborate with external clients, streamline project hand-off, and simplify billing.”

Figma has several features under development that are available to users in beta. In this article, find out which beta features are available, what they are, their beta types, and how to access each one.

“Bring order to your files while keeping your jams in one place with Pages in FigJam.”

“Find Apple iOS, Google Material Design 3, and Figma’s Simple Design System UI Kits directly in your assets panel. Each UI Kit includes component sets and example mockups, which allow you to start from full layouts. Just drag in an entire example screen as a starting point, and it’s fully editable with components from the library. Plus, each of these UI Kits is backed by Code Connect.”

“Experience your designs on any screen size with a new Prototype viewer experience that resizes responsively. With a new menu option for previewing or presenting prototypes, the viewer will respect constraints and Auto Layout properties as you resize the viewer window or select a different device frame.”

A guide to Dev Mode, updated with all new features and available for both the previous and new UI.

Code Connect is out of beta: ​“Today, we’re excited to make Code Connect generally available, alongside improvements like surfacing connected code snippets in the component playground, a new tool to streamline setup, and support for React, React Native, iOS, Android, and more to come.”

“Our new Ready for Dev View cuts down on the noise and helps developers, designers, and other stakeholders know exactly what’s needed to drive projects forward. And with Focus View and the ability to mark designs as dev complete, developers can stay in the flow while staying in sync with their collaborators.” See also a short reelof all the latest updates.

“We’ve updated Auto Layout to make it more predictable when you need it and easier to ignore when you don’t. Now, Figma can not only suggest when multiple frames of Auto Layout might be needed for a full design element, but also create those frames for you. This will save you time from having to apply it frame by frame within a design. Plus, you can hold Ctrl to ignore Auto Layout while dragging a design element into an Auto Layout frame to set an absolute position.” Try it out at the playground.

Use ​“Rewrite this…” to generate copy from scratch or tailor your copy’s tone according to your intended audience. Use ​“Shorten” to rewrite any text layers you need to be more concise. ​“Translate to…” can help you preview what your UX copy will look like in another language.

See also Replace text content with AI on using text context from the first element in a series of duplicated elements to populate content in the remaining elements.

Contextually rename and organize all the layers in your file. Figma AI will choose a name by using a layer’s contents, location, and relationship to other selected layers.

Make prototype lets you create interactions and connections between frames in your selection. This is helpful if you want to build a basic prototype flow quickly from your designs. This feature can create simple flows between a selection of top-level frames, add interactions to Back or Next buttons, and link to individual frames from a navigation menu.

“Make Designs, which lives in the new Actions panel, allows you to quickly generate UI layouts and component options from text prompts. Just describe what you need, and Figma will provide a first draft to help you explore various design directions and kickstart your process.”

See also Make an image with AI on how to make images to add to your designs and remove the background from any existing image.

“We’re introducing Visual Search to help you more easily find what you’re looking for with a single reference. Search for anything from icons to entire design files with a screenshot, a selected frame, or even a simple sketch with the pencil tool, and Figma will pull in similar designs from team files you have access to. And with improved Asset Search, Figma now uses AI to understand the context behind your search queries. You can easily discover assets — even if your search terms don’t match their names.”

Figma’s approach to AI model training: ​“All of the generative features we’ve launched to date are powered by third-party, out-of-the-box AI models and were not trained on private Figma files or customer data. We fine-tuned visual and asset search with images of user interfaces from public, free Community files.”

Admins have control over AI use and content training, which they can turn on or off with two new settings anytime. By default, content training is enabled for Starter and Professional plans and disabled for Organizations and Enterprises. The content training setting takes effect on August 15th, 2024.

Introducing new Visual Search and upgraded Asset Search, AI-powered text and content generation tools to help you quickly populate your designs with realistic content, image background removal, turning static mocks into interactive prototypes, automating layer naming, and even design generation from text prompts. ​“Whether you’re searching for inspiration, exploring multiple directions, or looking to automate tedious tasks, we’re building Figma AI to unblock you at any stage.”

A new landing page for all AI features: ​“Get started faster, find what you’re looking for, and stay in the flow. Make space for more creativity.” See also a one-minute demo reel of new features.

Remember that they’re currently in beta and will become a paid feature next year: ​“Our AI features will be free for all users during the beta period, which runs through 2024. As we learn how these tools are used and their underlying costs for Figma, we may need to introduce usage limits for the beta. When Figma AI becomes generally available, we’ll provide clear guidance on pricing.”

“At Config 2024, we introduced a redesigned Figma, called UI3. This guide is for people who are switching over from Figma’s previous design and want to see how things have changed.”

This is a convenient guide to get familiar with what has changed and where features were moved. As a reminder, for now you can still go back to the previous UI from the help menu.

Behind-the-scenes look at how Ryhan Hassan, Joel Miller, and KC Oh landed on a more streamlined and adaptable interface. Don’t miss How we redesigned Figma talk at Config from this group.

On components: ​“As design systems took off and components became central, we realized that component controls like variants and instances deserved top billing above attributes like color and size.”

On streamlined the properties panel: ​“All layout-related options, including width, height, and Auto Layout, are now merged into a single panel. This departs from the typical x, y, w, h panel in most tools, but aligns more neatly with how products are built in code.”

On interface for usability: ​“UI3 introduces backgrounds on inputs, borders around dropdowns, rounded corners, and 200 expressive icons hand-drawn by designer Tim Van Damme. These serve as visual explanations of how to interact with the platform.”