【Figma AI】Figma AIって何ができるの？

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

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

## Figma Design

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

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

- **Basic app**：モバイルサイズのデザインが生成されます
- **App wireframe**：モバイルサイズのワイヤーフレームが生成されます
- **Basic site**：デスクトップサイズのデザインが生成されます
- **Site wireframe**：デスクトップサイズのワイヤーフレームが生成されます

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/7c88b9d9-fb5a-21cd-9b02-6c74b0df419c.png)


すると、以下のようなパネルが表示されるため、生成したいUIをテキストで入力します。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/b2cd899a-67fb-d6e2-a136-af9f352e9218.png)


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

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

<details><summary><strong>生成された画像はこちら</summary><div>

|Basic app|App wireframe|
|----|----|
|![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/95bec218-6cb1-6e30-63e8-d0e8de232bda.png)|![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/557f9421-0a2b-db7d-5140-994520bc668f.png)|


|Basic site|Site wireframe|
|----|----|
|![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/2542b28a-fc1a-592f-dff0-15e251705d89.png)|![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/c8673af7-65f4-cd6c-31b1-b1d5e1057650.png)|

</div></details>

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

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/0ae4a613-ee9f-68f6-8ad2-81a90e8ed042.png)

また、make changesから色・角丸・余白・フォントを個別設定することもできます。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/75460bfb-7e68-5b5f-7e3b-97c4697fc5d0.png)

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

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

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/6383cc95-2bb6-f0e4-b415-172935819a09.png)

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

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/4ab52f35-0c7d-0023-3ef9-ddeca44e0c48.png)

以下の画像のようによしなにプロトタイプを作成してくれます。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/9355fab8-f536-daaa-f2e2-7ddd4860cb6b.png)

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

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

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/18cfd08b-e50c-312d-3709-44a6b836a038.png)


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

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

![スクリーンショット 2024-11-24 22.26.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/535e5ea9-0a6e-2cf6-2705-666ddad51d39.png)

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

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

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/ba8d3e50-ddda-2b0e-ce7f-d7cd5160291c.png)

<details><summary><strong>翻訳したデザインはこちら</summary><div>

|翻訳前|日本語 翻訳|
|----|----|
|![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/473d6658-58aa-18cb-95b8-5ae53673de08.png)|![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/32e34f3c-9973-d31f-f772-d64b570f8cb0.png)|

</div></details>

### ◯ Rewrite this ...
AIが文章をリライトしいてくれます。

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

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/e7c6515c-0a48-8f67-b09f-d21c97377b5a.png)

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

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

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/c4d15f7e-e2d8-b5e5-d594-d3692a070bce.png)


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

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

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/e58cc5f3-37ed-9cab-d2c6-cd573ac561e5.png)

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

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

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/547c5a4d-14b3-2de2-0c91-7c4a61f47e4c.png)

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

---

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

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

https://twitter.com/degudegu2510