Hey everyone, welcome back. In this module, I'm going to share a few AI-focused features with you that we saw launch at Config 2024. Admittedly, I'm still getting used to them myself, but there are a few that have been incredibly helpful to my own process so far. So I'll share all of those with you here in the module. Alright, I'm here in Figma, and on the canvas I have an image layer for the home screen of iOS.
Now again, this is just an image, so an editable item, but let's imagine that I need to find those editable layers or that component that represents this screen here. And I'm having trouble. I'm not sure where to look and no matter what I search, I'm not finding the right thing.
So here is how the very first tool can help us when it comes to AI and Figma. If I right click on this image here, there's a new option called search for similar. And if I tap this, well, Figma will use this image and will search all of the libraries across my Figma organization to find other similar designs. And as you can see here, it actually does a pretty good job. At the top here, this appears to be a match for the layer that I have selected.
And as I scroll down, Figma is also showing me layers that are similar or components that are similar. In this case, we have home screens from other files that are maybe a little bit older, but still represent the same items and have the same layers. But again, at the top here, this looks to be what I need.
Now with this selected at the bottom, I could open the file for where the screen or where this component exists, I can preview it, or I could insert it right on the canvas. So why don't I tap the option to insert this instance here on the canvas, and you'll see right away there's our instance. Now it comes with the frame that surrounded this particular component, but I can easily just remove that frame and I'm left with the instance that holds this design. Now I could go in and I could edit any one of these layers, and we could say, well let's change this to perhaps baseline.
Maybe I'm making an app one day, who knows, and I want to represent it here on the screen. Now I can remove this image layer if I no longer need it, And I've been able to successfully search the entire library for components that represent that similar design. It's a pretty awesome feature, and I can't tell you how many times I've come across an image that I need to find the design for in Figma and just haven't been able to.
And I really think this feature can help with that problem in particular. So that's AI feature number one. Now the second one is pretty useful as well, and it's the ability to replace content in our design with really just a click and a drag. Here's how this one works.
On the canvas, I have a design representing a contacts app, let's say. And at the top here, well, I have just one name. Now, so many times in my own career, I've spent minutes and minutes and hours probably combined trying to think of the right names or just names that will work for the design that are perhaps completely made up and will just work for what I'm trying to make.
It's pretty time-consuming and honestly not the most fun task. I'm terrible at thinking of names, and so this feature in particular has been really helpful. And it can work with things.
other than just names. Any kind of content that you have in your design you can use this feature for and it will use AI to populate what it predicts should come next. So here's how this one works.
Here in the design I have a frame and inside of this frame is the name of our contact. Now I'd like to continue to duplicate this frame here and have all of these names replaced with names that are different and unique. So what I can do is because this table view cell is inside of an auto layout container Well, I can just tap on this and tap command D to duplicate it.
Now what I can do is if I click the parent container that has auto layout, that's an important part. The parent container has to have auto layout. But when I select that container, you'll notice on the lower right side, well, we get this new duplicate option here.
If I click on this and drag down towards the bottom of the screen here, Figma AI begins to work. And down below, it gives us the ability to also replace content while duplicating each one of these current rows. So I'll tap replace content, or I can use the keyboard shortcut command return, and let's see what happens. Replace content, Figma thinks for a little bit, and we come back with a list of names here, which is pretty awesome. This saved me a ton of time in terms of thinking through a bunch of different names that I might want to use for this design here.
And as you can imagine, this could work for a number of different applications throughout design in Figma. The interesting part about this feature as well is you can always choose to make changes to the output. So perhaps you wanted to regenerate things, or perhaps maybe the names weren't quite right, or the addresses were wrong, or the ingredients didn't look correct.
Whatever list you're making, you can choose to refine it after. As an example, why don't we try something? Why don't we tell Figma to only come up with names that start with the letter J, for example?
So I'll tap make changes. And in here, let's describe the changes. I'll say only create names that start with the letter J, and we'll tap return or I should say command return here. And look at that, it populated this list here with only names that start with the letter j. There's a lot that you could do with this, and we could even make additional changes to place these in alphabetical order if we want, based on the creation of those names.
It's pretty cool. All right, now for this next example, this is borrowing that little pop-up that we were working on when we were talking about AutoLayout. When you were working in the module, you may have noticed that the image that I grabbed for AirPods wasn't transparent.
Meaning if I clicked on this and held the option key and brought a copy outside, well we see there is a background behind it here. This might be the perfect example to create a transparent image where we only have the AirPods and not that white background. So what I can do...
is if I go into the Actions menu using Command-K, I'll type in Remove Backgrounds here and we'll tap Return. Figma thinks for a moment, analyzes the image, and we come back with a transparent image just like this. Now what I can do is I can copy this new transparent image, and if I go up to my design here, well, I can click on this and tap Command-Shift-R or right-click for Paste to Replace, and now I've got a transparent image in my design.
This is a feature that's already been so helpful for me, but I should mention there are are already a lot of very good plugins out there by independent designers and creators, and if you need more features it might be worth looking at the Figma community to find those features and to support others. So just putting that out there, there's still a lot of good plugins, but this feature also works really well now that it's native to Figma. Alright now another feature to share is if I look at this floating sheet here you'll notice the layer list.
I have a few layers inside but they're not yet descriptive of what they're responsible for. Meaning, if I look at frame 3 here, it looks like we have the title and the subtitle within, but the frame just reads frame 3, which might not be that helpful, especially when it comes time to debug AutoLayout. So this next feature is a pretty awesome one, and it's the ability to rename layers in Figma using AI. Here's how it works. If I tap on the frame here, and if I navigate to the Actions menu, inside I find an option that lets me rename layers.
If I tap Return, Figma analyzes the design, renames, all of the layers within, just like this. So at the here we now have a frame called text container and at the bottom we now have a frame called button container. Now one thing I've noticed is this feature is awesome but it doesn't always get it right on the first try.
And like all things AI you can always choose to run the feature over and over again with slightly different results each time. But I'm so glad this feature is here because I love trying to keep my layers organized but it definitely takes some time. And so I think what this feature allows for is the ability to create the design more quickly and then to go back and rename layers automatically, spending a little bit less time on naming all of those layers. One thing to note, any layer that you have gone through and renamed or that comes from the instance won't be touched.
And so it's only the layers that haven't been named that will be renamed using AI. Now, another feature that's a part of the AI suite of features here in Figma is the ability to replace content using AI. Now I'll say upfront, this is by no means a replacement for content designers on your team. I think what this feature is best for is helping us prevent lorem ipsum in our designs. And so here's how it works.
At the top here, I have essentially what is almost kind of lorem ipsum. It's text that's definitely not final and, well, it's more just descriptive of what this text layer can do. So what I'll do is if I go back into the actions menu here, I'll tap on the option to rewrite this. Now here I can describe what do I want this to say?
What do I want the text to basically be generated into. And as an example, why don't I say, create a description for connecting AirPods to your iPhone. And we'll tap Command Enter to rewrite.
Let's see what happens. All right. Not great, but not terrible.
What this reads now is connect your AirPods to your iPhone effortlessly with just a few simple steps. So I don't know if I would use this copy in production. but it's going to help me populate this design a little further. As another example, if I move over to the right here, I have that familiar photography site that, well, I've been working on throughout the course.
As you can see, we have a clear example of Laura Muxman here. And so why don't I try this again using this text? I'll select the text here, and we'll rerun the command, rewrite this, and I'll say, create a description for this photography website of mine, and I'll tap rewrite.
Let's see what happens. Okay, that's... Pretty long.
I'm not going to read all of this. That's a long description. So why don't I make changes?
And I'll say make this much shorter and more informal. This is a personal website. And we'll tap rewrite. Okay, not bad. Still pretty long.
Let me try it once more. So let's try it again. Let's tap shorter here and tap rewrite. Okay, a little bit shorter there.
I honestly think if I got a little more descriptive, this could be better. But you can see at the very least what we're doing here is we're replacing lorem ipsum with something that feels just a little more real to the design. Again, absolutely no replacement for content designers out there and the talented people you work with.
but it just helps you populate the design and make it feel slightly more realistic. Now another task that can be quite time consuming in the design space is translating designs to different languages. So as you might imagine, Figma can help us with this too.
How it works is with the frame selected, well let's imagine I'd like to translate this design from English to let's say Spanish. I have the frame selected and so at the bottom I'll head into the actions menu again, only this time I'll select translate to. Now Figma shows me a long list of languages here that I can translate the design to.
And so in this case I'll type in Spanish and let's go with Latin America. We'll tap return and Figma translates the design. Now again it's been a decade since I've taken Spanish and so I'm not sure if this got it 100% correct but it certainly did adjust it.
And it did it quite quickly. I think where this feature can be most helpful is not only in the translation but helping us as designers understand how localization affects our designs. As I'm sure you know, many words in different languages are all different lengths. And so it's important to know that regardless of the length of the word, our design works for the selected language.
This feature can absolutely help us with that. Now, one other feature as a part of the current AI tooling available is the ability to generate an image. So as an example, let's imagine I was missing a leaf photo in here, or I should say a plant image. Well, how would I generate this? I'll go ahead and select the frame for where I want this image to appear.
And we'll go back into the Actions menu. Now this time I'll choose Make an Image, and here I'll describe showcase a plant against a pink background. Let's tap Make it. Let's see what happens.
So Figma will work for a moment and should generate a few images for us to use within our design. All right, here we go. It suggested a number of images that we can use, and if I tap on these it very quickly replaces the selected frame with the selected image. And as always, we can certainly make changes to this.
We could describe what might need to be different or how we want to tune this image. And this is one of those features where it might not make sense to use these images in production, but it certainly can help you understand how images would look inside of the design. There are also wonderful plugins out there from companies like Unsplash, which feature high resolution photos from really talented photographers. And so that might be an option for your design, or if you're just working on something and want to populate the design quickly, you can use the this could certainly be an option too.
That's all for this module. There's certainly a big discussion still to have around AI's role in design, but I see many of these features here in helping us with their process rather than taking away from the work itself. Features like renaming layers or searching for similar designs I think can seriously help us in the process of creating designs within the tool.
So very curious to hear if you're using these features, which ones are more helpful than others, and if you have any questions, as always feel free to reach out. Alright, I'm looking forward to seeing you in the next module.