はじめに

みなさんは、Figma AI を使っていますか？
Figma AIで何ができるのかわからず、活用できてない方は多いのではないのでしょうか？

そのため、この記事では、Figma AIについて、何ができるのか紹介しようと思います。

Figma Design

製品アイデアのさまざまな表現を探求するために、スタイリングやレイアウトの例が生成されます。

Actions > First Draft を選択すると以下のようなパネルが表示されるため、生成したいデザインを選択できます。

すると、以下のようなパネルが表示されるため、生成したいUIをテキストで入力します。

今回は、下記のようなプロンプトを入力すると....

Electronic Commerce site for EV CARS, an electric vehicle brand
/*意：電気自動車ブランド「EV CARS」のECサイト*/

生成された画像はこちら

Basic app	App wireframe

Basic site	Site wireframe

Basic app・Basic siteでデザインを生成すると、以下のようなパネルが表示され、好きなトンマナを選択できます。

また、make changesから色・角丸・余白・フォントを個別設定することもできます。

Make prototypeは、静的モックを瞬時に動作するプロトタイプにしてくれます。

Actions > Make prototypeを選択すると、以下のようなパネルが表示され、プロトタイプにしたいフレームを複数選択します。

フレームを選択したら Make prototypeを選択すると...

以下の画像のようによしなにプロトタイプを作成してくれます。

ファイルを整理し、レイヤーの名前を変更してくれます。

Actions > Rename layers を選択し、Renameしたいフレームを選択し、Rename anyway を選択すると、いい感じにRenameしてくれます。

デザインデータのテキストにリアルなテキストに置き換えてくれます

Actions > Replace content を選択し、デザインデータのテキストを置き換えたいフレームを選択し、Replace content を選択すると、デザインデータのテキストを置き換えてくれます。

AIが文章を任意の言語に翻訳してくれます。

Actions > Translate to ... を選択し、翻訳したいフレームを選択すると、以下のようなパネルが表示され翻訳したい言語を選択できます。

翻訳したデザインはこちら

翻訳前	日本語翻訳

AIが文章をリライトしいてくれます。

Actions > Rewrite this ... を選択し、リライトしたいテキストフレームを選択すると以下のようなパネルが表示され、リライトの方向性をプロンプトとして記入することができます。

AIが文章を短くリライトしてくれます。

Actions > Shorten を選択し、短くリライトしたいテキストフレームを選択すると以下のようなパネルが表示され、Shorten を選択すると、文章を短くリライトしてくれます。

テキストプロンプトを使用して、特定のユースケースにあった画像を生成します。

Actions > Make an Image を選択すると、以下のようなパネルが表示され、生成したい画像のプロンプトを入力すると画像が生成されます。

画像から背景を自動で削除してくれます。

Actions > Remove backgroundを選択して、画像フレームを選択すると、以下のようなパネルが表示され、Remove backgroundを選択すると、背景を削除してくれます。

この記事では、Figma AIについてFigma Designで使える機能を紹介しました！
ぜひ Figma AIを使って、効率よくデザイン作業をしてみてください！

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。