Articles

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.”

Gabriel Valdivia on Figma AI: ​“Right before Figma’s keynote announcing the ​“make designs” button, I ​“made code” with another app. On one hand, people can now use Figma to replace designers, while on the other hand, I’m using Cursor to replace engineers. I’m stuck in the middle feeling simultaneously disempowered as a designer and completed empowered to make new software.”

Recap and wishlist from Joey Banks: ​“While the updates felt a little more iterative this time around rather than innovative, what Figma shared seems to be paving the way for all that’s near and far ahead. In case you missed the product keynote, or if perhaps you’d just like a recap of the highlights from the perspective of a design systems designer, I’d love to share all that’s new with you in this newsletter.”

A short recap of everything that was announced at Config in a blog post.

See also an updated What’s New page.

I had no idea that a Spread value in drop shadows can be negative! This effect could shrink the shadow and simulate the object’s elevation. The article explains the box-shadow property in CSS, but luckily, Figma’s drop shadow is based on it and works similarly. 

“For the first installment in our series, we sat down with the Linear team who put forth a series of principles to guide their own work. Here, co-founder Jori Lallo and Chief Operating Officer Cristina Cordova share why opinionated software is core to Linear’s methodology, and how other teams can adopt it.”

My favorite part from Jori: ​“Many people try to adapt things from the industry that might not actually be applicable to them, or they might not know the potential downside. They were developed at places that are bigger and growing faster than most companies, so you need to try to understand what’s behind them and adapt pieces of them.”

Typography variables can now be scoped to limit which properties they can be applied to. For example, if you scope a number variable to font size, you can only apply the variable to font size.

Also, copying and pasting an object bound to local variables will no longer populate a file with local variables unless you choose to in a tooltip.

What I like about Linear is how clearly they define principles and ideas that drive their product decisions. You can either love or hate how opinionated they are, but that clarity is admirable. ​“At Linear we believe software can feel magical. Quality of software is driven by both the talent of its creators and how they feel while they’re crafting it. To bring back the right focus, these are the foundational and evolving ideas Linear is built on.”

Not a new article, but a good one by Josh Comeau. ​“Scope cuts are generally decided by product managers, but they don’t make that decision alone. It often starts with a conversation between the designer and the developer. If these two people trust each other, the process is collaborative, cordial, and productive. They figure out the best solution under the current constraints, taking development time and user experience into account, and then pitch it to the PM. If the PM trusts the designer and developer, and their proposed solution works from a product perspective, it’s typically approved without any fuss.”

Two Software Engineers at Figma — Isaac Goldberg and Naomi Jung — explain how dynamic page loading improved the slowest load times by 33%. ​“Performance should correspond to user-perceived complexity. If a user loads a page with only a few frames, Figma should be able to display their canvas almost instantly, even if the file has dozens of other pages with hundreds of frames each. By examining usage patterns, we learned that many users were treating files as projects — using one file to house all aspects of a workstream — so most didn’t even navigate to all pages in a single session. We realized that we could drastically improve load times and reduce memory by dynamically loading content as needed, rather than populating all content at once.”

“We are starting to roll out an easier way to mark frames ready for dev. Select a frame to see the </> icon appear at the top right, then click. You’ll see the ready for dev status also reflected in your selection actions.”

Changes to sharing and access settings ​“to create a more consistent sharing experience and give you clearer visibility into and control over content permissions,” being released through mid-June. New team access terminology, clarified UI for inheriting project access by the team members and child file access by the project members, a dedicated prototype share dialog, a branch’s audience and role, and a central place for sharing other forms, views, and artifacts of the file. (Pre-Config cleanup for something new?)