🐴 My favorite AI features in Figma
And impressions of other features
I got a question the other day: “What is your favorite AI feature in Figma?”
To me, a “favorite” feature is one that saves me a lot of time and that I use regularly.
So my answer was “Find similar assets and designs”.
My second favorite one may be “Replace text content”.
In today’s newsletter, I’ll walk through those two features in detail and share my impressions of the other AI features in Figma.
Let’s dive in.
The prerequisite
Not every user has access to AI features in Figma.
You need to be on a paid Figma plan (Professional, Organization, or Enterprise) with a Full seat.
AI features must be enabled by a team administrator. (This setting is enabled by default.)
Find similar assets and designs
This feature essentially enhances Figma’s search ability.
It has two sub-features: Visual Search and Text-based Search.
Visual Search
You can select a frame/component/layer in Figma or upload an image to search for the exact visual or similar ones from other Figma files in your team.
It reminds me of using Google Lens for image search on Google Images.
For example, if I upload a photo of a horse, it will fetch similar images from the internet.
Okay. Let’s go back to Figma.
I’m using a random Figma file from Figma Community as an example, created by Randhir Kumar.
I select any part of the design, then click “Find more like …” in the bottom tool bar.
It will browse through all the files from my team and find similar components.
Note that since this is a file from Figma Community, AI will look for similar files from there.
Text-based Search
What I really like about this feature is that it’s not just about “visual search”, you can also describe what you want.
For example, I type in “an agent card with a photo”.
Again, since I ask this question in a Figma file from the Figma Community, it will look for similar designs or assets that match that description.
Very cool feature.
Impression
Very fast to find similar components from the team files using AI.
Also works for Figma Community files (will browse the community designs).
The results aren't always great, but it's already quite helpful.
Extra helpful when you need to find things in larger teams with many Figma files.
Replace text content
This feature replaces placeholder text with realistic text content. You can replace content on a single item, or on multiple duplicate items.
I remember when I was designing the interface of an app six years ago, I had to spend a good amount of time writing different, seemingly realistic text for different cards.
I could have used lorem ipsum, but that doesn’t look real.
Let’s take a look at how it works in Figma.
There are two ways to replace content.
1. Replace text for duplicated components
It will create unique realistic content for all the duplicates.
For example, you can select two components with different text content, create an auto layout, then drag the little handle on the bottom right corner to pull it down.
Figma AI will create duplicates of the selected components, plus automatically replacing the text accordingly.
Alternatively, you don’t create an auto layout. You just duplicate a component with placeholder text multiple times, then a banner will pop up from the bottom of the page with a suggestion to use “Replace content”.
2. Replace text based on your description
If you select a text container and then click “Replace content” in the bottom toolbar, you can replace the text based on your instruction.
This helps when you want to fill in a text container with a bunch of text based on your needs.
You can certainly do it in ChatGPT and copy-paste the text back into Figma, but it’s just more convenient to be able to do this inline in Figma.
Impression
Time-saving when you have to fill placeholder text with realistic content.
Efficient inline text replacement.
Impressions of other AI features
Figma Make: It has a lot of potential as it can directly link to frames in Figma. But it is still buggy with limited features. I still use it sometimes, but not really useful yet. You can see it as a simplified version of Lovable that’s integrated within Figma.
Make or edit an image with AI: Cool feature. You can generate an image, edit an image, remove its background, or enhance the clarity of low-resolution images within Figma. It’s just that I rarely need to use this feature in product design.
Make interactions with AI: It can be used as a basic first pass to help you connect those frames with obvious CTAs (like “Next” or “Back” buttons). Not very useful yet.
Use First Draft with Figma AI: It can be helpful if you just want to a quick inspiration.
Rename layers with AI: A small cool feature, but I rarely need to use it.
Thanks for reading.
See you next week.
Xinran
-
P.S. Sharing one of my favorite quotes from Carl Jung:
“The world will ask you what you are, and if you do not know, the world will tell you.”
May you embrace your inner fire.
I had the same opinion of Make. But recently I have been getting some great generations. I have been working on my prompting, using more detailed longer PRD style prompts.