Figma AI beta

Get started faster, find what you’re looking

for, and stay in the flow. Make space for
more creativity with Figma AI.

Start ->
Contents

-> Figma AI Beta

-> Figma AI Overview

-> Make Designs Temporarily unavailable

To advance, select the

-> Make Prototype
section and press the

tab key to move to the tab

-> Replace Content
next section.
-> Text tools
(Shift + tab to go backwards)

-> Image tools

-> Rename Layers

-> Visual Search

-> Resources
Figma AI is
currently in beta
Not all Figma users will see Figma’s
new UI or have access to Figma AI
features right away.

The features demonstrated in this Figma AI will be rolled out gradually to

playground may not yet be users. For more information on access,
available. Please be patient as they feature availability, and data usage, please
are being rolled out to all users.

visit the help center.

More information is available in the
help center.

Figma AI is only available in Figma’s new UI.

Don't see AI in the Actions menu? Learn
more about access to AI features here.
Figma AI
beta

overview
Getting started with the Figma AI beta.

Continue ->
Introduction to
Figma AI
Figma AI is designed to level-up
your workflow every step of the
way from exploring big ideas, to
removing busywork, and adding the
finishing touches by:
1 Always finding what you
need to get started quickly
and explore your ideas.
2 Automating the tedious
tasks that get in your way.
3 Adding finishing touches to
your file in just a few clicks.
The tools are broken down into four
supporting categories: design tools,
riffing and writing, image editing,
search.
Make Designs Temporarily unavailable
Generate styling and layouts examples to
explore different expressions of any
product ideas you have.
Make Prototype
Wire up your static mocks into a working
prototype in a flash and see your vision
come alive.
Make an Image
Generate an image directly in the editor
for your specific use case by text prompt
in the Actions menu.
Visual Search
Search by image to find the exact visual or
inspiration from teammates’ solving similar
design problems.
Remove Background
Seamlessly edit your visual content
to fit better in your designs through
AI background removal.
Text tools
Riff on your writing by using AI to rewrite,
generate text, shorten, and translate to
multiple different languages.
Replace Content
Populate realistic text into your design
mockups and to replace placeholder copy
Rename Layers
Let Figma AI organize your files for you by
renaming all your layers in a click.
Use Actions to

access Figma AI

The Actions menu is your shortcut

to Figma AI. It is available in the

bottom toolbar and will surface

relevant AI actions based on your

Temporarily unavailable

selection.

1 Click on the Actions menu in

the bottom toolbar, or use

the shortcut ⌘K (Mac) or


Ctrl + K (Windows)

2 The AI tools are separated

into three sections

Design tool

Riffing and writin

Image editing

Figma AI beta is only available in UI3. Don't

Access AI features from the Figma toolbar or by

see AI in the Actions menu? Learn more

pressing ⌘K (Mac) or Ctrl + K (Windows) and typing
about access to AI features here.
an AI feature name like “Replace Content.”
AI prompting
tips in Figma Make Designs mporari na ai a
Te ly u v l ble Make an Image
Generate styling and layouts examples to explore Generate an image directly in the editor for your
Having a strategy when prompting different expressions of any product ideas you have. specific use case by text prompt in the Actions menu.
AI to mock up new designs and
imagery can help you be more
successful. Product type: Mobile app, websit Medium: Photograph, illustration, icon..
Use Case: Product details, checkout, profile, login.. Elements: Objects, location, background, patter
1 Make Designs: Consider a Description: Tech company, shoe store, news channel... Styling: Lighting, composition, shot length, color...
three step approach of
describing a product type,
use case and purpose for
1 2 1 2
the design.

2 Make an Image: Consider

A products page for an ecommerce store 
 A photorealistic image of a monstera plant on a
the medium, elements to be
that sells houseplants wood table, direct shot in natural lighting
included in the image, and
any styling to help produce
your ideal image.

3 3
Make Designs Temporarily unavailable

Generate styling and layouts examples to

explore different expressions of any product
ideas you have.


Continue ->
Make Designs
Make Designs allows you to 12:00 12:45

generate editable mobile and Cooking App Cooking App

website designs in various styles, Featured Recipes Featured Recipes View All Recipes
Discover New Recipes
using text prompts.

Note: You will be able to easily Spaghetti Bolognese Chicken Alfredo

access previous prompts and still

make changes by selecting again, Featured

Spaghetti Carbonara
and typing ‘Make changes’ in the Classic Italian pasta dish

Spaghetti
Actions menu. Carbonara View Recipe
Classic Italian p

Cooking Blog
Updated 2 hours ago by Chef Gordon

Shop Ingredients View All Items

Cooking Blog
Posted by Chef Ramsey on Oct 1

Olive Oil Pasta

Apply Make changes to adjust dark/light

Choose Make Designs from the
Actions menu.
Temporarily unavailable
$10 $5
Type in a prompt, choose Mobile kit and After the prompt is done rendering on the
press enter or using shortcut ⌘↵. Press esc canvas, choose from an array of different mode, colors, corners, spacing and fonts.
to cancel at any time. visual styles to apply. Reselect and apply make changes any time.
Make Designs and Try it out! 12:45 12:45

make changes Open the Actions menu, and type in the

Cooking App Cooking App

1 Featured Recipes View All Recipes e t red Recipes

F a u View All Recipes
Generate a design with your own action “Make Designs”
prompt and edit the output.

1 Click the Actions menu, or use 2 Type the text prompt:

shortcut ⌘K (Mac) or Ctrl + K “Make a mobile app to shop for pastries” Spaghetti Bolognese Chicken Alfredo Spaghetti Bolognese Chicken Alfredo

(Windows).

2 Select ‘Make Designs’ and 3 After the generation is complete, select “Make
enter your prompt. changes” and adjust the colors, border radius,
spacing, and fonts to your liking.

3 After generating, select ‘Make

changes’ to customize color You can also tab over to ‘prompt’ and write Cooking Blog
Cooking Blog
Updated 2 hours ago by Chef Gordon

mode, UI colors, border radius, your desired style change or add a new Updated 2 hours ago by Chef Gordon
Shop Ingredients View All Items
spacing, and font. generated section to the design. Shop Ingredients View All Items

Note: If you deselect your output, you

can still make changes by selecting
again, and typing ‘Make changes’ in
the Actions menu. Olive Oil Pasta Tomato Sauce
$10 $5 $7
Olive Oil Pasta Tomato Sauce
$10 $5 $7

Temporarily unavailable
Make
Prototype
Wire up your static mocks into a working
prototype in a flash and see your vision
come alive.

Continue ->
Make Prototype
Dragging out every interaction for
your prototypes can feel repetitive.

The “Make Prototype” action

brings your design flow to life by
adding a first pass of interactions
with just one click.

From there, review and edit your

flow in a more focused prototype
state that allows you to select and
drag connectors with more ease.

Choose Make Prototype for design in Select a series of frames, or a section containing Choose to keep the prototype output or
the Actions menu. frames you wish to prototype. preview the prototype.
Make Prototype
1 Select your screens by
dragging over the top level
frames or selecting a
containing section.
2 In the prototype tab within
the right design panel or
through the Actions menu,
select ‘Make Prototype’
3 Preview your generated
prototype
4 Make edits or delete the
interactions by click on the
connector
Note: To ensure better accuracy,
name your frames for the primary
action you wish to be performed.
Try it out!
1 Select this ‘Onboarding Flow’ Section.
2 Open the Actions menu
Browse Discover
Select Make Prototype and watch the
3
interactions generate between frames.
4 Select “Preview,” and review the generated
interactions. Edit, add, or remove any
connectors to finish your prototype, and Join the world’s largest
when you are done select “Keep it”
community-powered cookbook to
discover, rate, and review the
recipes your friends love.
Sign up Continue Let’s go!
Replace
Content
Populate realistic placeholder copy

for your designs with the power of AI.

Continue ->
Replace Content
AI generate populates realistic text
into your design mockups and
replaces repetitive placeholder copy.
You can use Replace Content on
new or existing repeatable
elements in an auto layout frame.
To use Replace Content
1 Duplicate your element into
a stack and add auto layout.
2 Add more duplicates by
dragging the magic handle
at the bottom of your frame
3 Select “Replace Content”
from the suggestion popup
or use shortcut ⌘↩
Note: Lock nested layers you wish
to remain the same.
Raspberry cake
Indulge in the delightful
sweetness of a raspberry cake.
Raspberry cake
Indulge in the delightful
sweetness of a raspberry cake.
Duplicate an object in a column that
you would like to repeat. Select them
and apply auto layout with ⇧A.
Raspberry cake
Indulge in the delightful
sweetness of a raspberry cake.
Raspberry cake
Indulge in the delightful
sweetness of a raspberry cake.
Raspberry cake
Indulge in the delightful
sweetness of a raspberry cake.
Select the auto layout frame, and
drag the duplicate bar down to
create duplicate elements.
Raspberry cake
Indulge in the delightful
sweetness of a raspberry cake.
Chocolate cake
Savor the rich and decadent
goodness of a chocolate cake.
Vanilla cake
Experience the classic and
timeless flavor of a vanilla cake.
Strawberry cake
Delight in the fresh and fruity
taste of a strawberry cake.
You will be prompted to Replace
Content, choose it or press ⌘↩ or
Ctrl + Enter to replace their nested
text content.
Duplicate and
Replace Content
AI generate populates realistic text
into your design mockups and
replaces repetitive placeholder copy.
You can use Replace Content on
new or existing repeatable elements
in an auto layout frame.
To use Replace Content
1 Select the duplicate card
stack on the right.
2 Add more duplicates by
dragging the magic handle at
the bottom of your frame
3 Click the Actions menu, or use
shortcut ⌘K (Mac) or Ctrl + K
(Windows).
4 Select ‘Replace Content’ from
the Actions menu or use
shortcut ⌘↩
ry it out
T !
1 Select the auto layout frame to the 01 Lemon cake $10
right that contains two duplicate Indulge in a delightful lemon cake,
bursting with tangy citrus flavor
dessert option cards. and a moist, tender crumb. 160 cal
2 Select the frame, and ra t e
d g h 01 Lemon cake $10
du pl cate ar on the bottom right
i b Indulge in a delightful lemon cake,
bursting with tangy citrus flavor
of downwards to duplicate the and a moist, tender crumb. 160 cal
rows. rag to duplicate 3 more.
D
3 Click the Actions menu, or use
shortcut ⌘K (Mac) or Ctrl + K
(Windows).
Select ‘Replace Content’ from the
Actions menu or use shortcut ⌘↩
4 Select ‘Replace Content’ from the
Actions menu or use shortcut ⌘↩
Rename
Layers
Let Figma AI organize your files for you by
renaming all your layers in a click.

Continue ->
Rename Layers
Organize your files and
communicate your designs better
with others by letting AI rename
your layers for you.

1 Select an object on the

canvas or click on the
Actions menu in the bottom
toolbar, or use shortcut ⌘K
(Mac), Ctrl + K (Windows).

2 Select “Rename Layers”

and let Figma AI do the
magic!

Select a frame or object with Select Rename Layers from the After running “Rename Layers” AI
unnamed layers in your file. Actions menu action
Rename Layers Try it out!
Organize your files and
1 Select the frame and use the toolbar or
communicate better by letting AI
shortcut ⌘K to open up the Actions
Title Here
rename your layers. Two line description to be replaced
menu, and select ‘Rename Layers’. for the onboarding flow.
To Rename Layers

1 Select an object on the 2 Open the layers panel and see the
canvas or click on the renamed layers! They will populate in
Actions menu in the bottom real time.
toolbar, or use shortcut ⌘K
(Mac), Ctrl + K (Windows). Title Title

2 Select “Rename Layers”

and let Figma AI do the
magic!

Renaming notes
Title Title
There is a 200 layer limit per
selection
Continue
Condense your frames, or make
smaller selections where
possible
Figma will ignore intentionally
named layers, as well as hidden
and locked ones.
Text Tools
Let Figma AI organize your files for you by
renaming all your layers in a click.

Continue ->
Figma AI Text
We would greatly appreciate
Rewrite
tools What’d you think of the your thoughts on the recipe.

Easily Rewrite blocks of text, recipe? 1 star is “meh” and 5 Assign a rating from 1 star

stars is “oh so terrific.” for “mediocre” to 5 stars for

specify tone and length.
There are a variety of AI Text tools
“excellent.”

within the Actions menu to assist in

adding copy to your designs, and

fine-tuning it to your liking.

Use AI for your text riffing with the

Translate Popular ingredients Ingredientes populares

following actions

Chicken 256 Pollo 256

Translate your text to over
Rewrite
10 different languages. Cucumber 103 Pepino 103

Shorte

Translate

Shorten

Shorten your text to be

Directions

more succinct. In the bowl of a stand mixer fitted Directions

with the paddle attachment (or

In a mixer, blend butter and

using an electric mixer), cream

sugar until fluffy, about 4-6

the butter and sugar together at

minutes. Scrape bowl as

medium-high speed until pale

needed.

and fluffy, about 4-6 minutes.

Scrape the sides of the bowl as

needed.
Rewrite Text Try it out!
Rewrite, rephrase or adjust the tone
1 Select the entire card, or the text layer
of the content in your designs with
and open up the Actions menu with ⌘K
the AI action ‘Rewrite this’
(Mac), Ctrl + K (Windows)
To Rewrite text
2 Select “Rewrite this...” and type in your
1 Select on a frame to make
prompt. Choose one of the example
edits on your content.
prompts below, or write your own. Iterate
2 Click on the Actions menu in on your prompt until you get your desired
the bottom toolbar, or use output.

shortcut ⌘K (Mac), Ctrl + K Example Prompts:

(Windows.)
“Make this sound more professional”

Cook better
3 Select ‘Rewrite this...’ from “Make this more casual”

the menu. Join the world’s largest

“Rewrite this to be about a mushroom community-powered cookbook to
4 Type in a description or foraging app” discover, rate, and review the
instructions for how you recipes your friends love.
want the output to be.
JOIN TODAY

5 Improve your results by

iterating on your prompt and
adjusting your style references
Translate Text Try it out!
Translate text using Figma AI to
1 Select the French section and use the
contextualize and scale your
toolbar or shortcut ⌘K to open up the
designs to a wider target audience.
Actions menu, and select ‘Translate to...’
To Translate text
2 Select French from the list of language
1 Select an entire design
options, and let Figma AI do the magic!
frame, or specific text you
would like to translate.
3 Repeat for the Japanese section, and
2 Click on the Actions menu in compare your designs. Lemon Cake Lemon Cake Lemon Cake
the bottom toolbar, or use Savor this zesty lemon cake - a Savor this zesty lemon cake - a Savor this zesty lemon cake - a
shortcut ⌘K perfect blend of citrusy perfect blend of citrusy perfect blend of citrusy
goodness in a moist, fluffy treat. goodness in a moist, fluffy treat. goodness in a moist, fluffy treat.
3 Select ‘Translate to...’ from Ideal for any occasion, it's sure to Ideal for any occasion, it's sure to Ideal for any occasion, it's sure to
brighten your day with its brighten your day with its brighten your day with its
the menu, and choose the
refreshing tang. refreshing tang. refreshing tang.
language that you want to
translate to. Get RECIPE Get RECIPE Get RECIPE
Shorten Text Try it out!
Shorten your text to fit better in
1 Select the large text descriptions
your designs and be more straight-
inside the Lemon Cake card.
forward with the AI action ‘Shorten’

To Shorten text Open up the Actions menu, and

2
select ‘Shorten’
1 Select one or multiple text
layers to shorten content.

Click on the Actions menu in

2
the bottom toolbar, or use
Lemon Layer Cake
shortcut ⌘K av s q s l m cak , a a a w ll
S or thi ex ui ite e on e tre t th t i
cap va s s sf m f s b . s
ti te your en e ro the ir t ite Thi

3 Select ‘Shorten’ from the d l c abl d ss s wcas s a m s a d a g

e e t e e ert ho e oi t n t n y
l m - f s d sp g , a m sl pa d w a
e on in u e on e h r oniou y ire ith
menu, and let Figma AI do c l m f s g.

ri h e on ro tin
its job! Perfect for any occasion or simply as a well-
deserved indulgence, this lemon cake is guaranteed
Tip: Shorten text will only work to impress.

when selecting a text layer, Get ready to be swept away by the tantalizing
whether it is nested within a frame flavors and irresistible charm of this delightful treat.
or a component.
Whether you're sharing it with loved ones or
savoring it in solitude, this lemon cake is a true
delight that promises to enchant your taste buds
and brighten your day
Image tools
Image editing AI tools in Figma allow you to

create specific and unique assets and edit

them for your designs.

Continue ->
Make an Image
There are AI driven tools to add,
and replace images, as well as tools
to Remove Backgrounds and add
transparency.

These help speed up the design

mockup phase, and can aid with
placeholder content while
designing an app or website.

Use AI for images with the

following actions
Make image
Remove Background

Select Make an Image from the Select or drag out options Generate images from
Actions menu from the generated output the image fill panel
Make an Image Try it out!
from a prompt Select the placeholder image below and
1
Generate an image directly on your open the Actions menu or the fill
canvas from a prompt settings of the layer.

1 Click on the Actions menu in

the bottom toolbar, or use Select “Make an Image” in the Actions menu or
2
shortcut ⌘K (Mac) or 
 ‘Generate new’ in the fill settings, and enter in a
Ctrl + K (Windows) prompt to generate an image of a Pumpkin Pie.
2 Select “Make an Image,”
type in your prompt and
submit the prompt by 3 Choose between the four generated images,
clicking “Make it” or using or regenerate by clicking “Make Changes” to
shortcut ⌘↵. revisit your prompt and generate a new set of
four images.
3 Then choose one of the four
generations, or select
“Make changes” to edit
your prompt and regenerate
Pumpkin Pie
Note: Drag any of the generated
images right onto the canvas.
Remove
Background
There are AI driven tools to add,
and replace images, as well as tools
to Remove Backgrounds and add
transparency.

These help speed up the design

mockup phase, and can aid with
placeholder content while
designing an app or website.

Use AI for images with the

following actions
Make Image
Remove Background

Select an object and choose Select or drag out options On the image fill options, choose
Remove Background. from the generated output. Remove Background.
Remove Try it out!
Background Select an image below and open the 2 Type “Remove Background,” and wait
1
Quickly remove the background of Actions menu with ⌘K (Mac) or Ctrl + for the image to generate. Look at the
an image using this command. K (Windows). fill panel to find the original.

1 Select an image object,

click on the Actions menu in
the bottom toolbar, or use
shortcut ⌘K (Mac) or 

Ctrl + K (Windows).

2 Select or Type in the action

“Remove Background”

3 In the fill panel, the original

image containing a
background still resides
hidden underneath the
transparent one.
Visual Search
Search by image to find the exact visual or
inspiration from teammates’ solving similar
design problems.

Continue ->
Asset Search
In addition to visual search, you can
search for assets and components Tab to Assets and search by
with keywords and descriptions. keyword to find components
or similar designs
1 Open the Actions menu in
the bottom toolbar, or use
shortcut ⌘K (Mac) or Ctrl +
K (Windows). Preview matching
2 Tab over to “Asset’s” or use components and assets.

the top search bar to input Drag them in from this panel.
your keyword search.

3 Add an option to the

canvas, or go to the source
file of the result.

Insert a selected asset into your

file or go to main component
Visual Search
Easily find visually similar designs,
components, or mockups from a
selection or screenshot.
1 Select an object on the
canvas or click on the
Actions menu, or use
shortcut ⌘K (Mac), Ctrl + K
(Windows).
2 Type “Search for Similar.” if
none selected, it will prompt
you to do so, or upload a
screenshot or image.
3 Choose from the results to
add it to the canvas, or
refine your search by
author, space, and filter by
relevance or last modified.
Note: Search for Similar by right
clicking on an object or screenshot.
Search by image to find the exact visual or
inspiration from teammates’ solving similar
design problems.
This component is
Lemon Cake
selected before enabling
“Search for Similar”
Sa vor this zesty lemon cake - a
perfect blend of citrusy
goodness in a moist, fluffy treat.
Ideal for any occasion, it's sure to
brighten your day with its
refreshing tang.
Filter the scope of your
search here.
select item
Matching results within
the file, and within the
current workspace will be
displayed here.
Open the file, view a
preview, or insert the
object into the current file.
Search for Similar Try it out!
designs Select the card to the right and open the
1
Easily find visually similar designs, Actions menu with ⌘K (Mac) or Ctrl + K
components, or mockups by (Windows).
selecting an object or uploading an
screenshot.
2 Type in “Search for Similar,” select a matching
1 Select an object on the asset and press Shift + Enter to preview it or
canvas or click on the Enter to insert a copy of that asset to this page.
Actions menu in the bottom
toolbar, or use shortcut ⌘K Lemon Cake
(Mac) or Ctrl + K
(Windows). Indulge in our zesty lemon cake -
a delightful mix of citrusy flavors
2 Type “Search for Similar.” in a light, moist dessert.
When there is no object
selected, it will prompt you
to do so, or upload a Get recipe
screenshot or image.

3 Add an option to the

canvas, or refine your
search by author, space,
and filter by relevance or
last modified.
Resources
Continue your AI in Figma journey by visiting
these helpful resources.

Continue ->
Help Center Figma Shortcut Blog Help Center
Guide to AI in Figma Figma's AI Features AI Policy

Read the article Read the article Read the article