はじめに
みなさんは、Figma AI を使っていますか？
Figma AIで何ができるのかわからず、活用できてない方は多いのではないのでしょうか？
そのため、この記事では、Figma AIについて、何ができるのか紹介しようと思います。
Figma Design
◯ First Draft
製品アイデアのさまざまな表現を探求するために、スタイリングやレイアウトの例が生成されます。
Actions > First Draft を選択すると以下のようなパネルが表示されるため、生成したいデザインを選択できます。
- Basic app：モバイルサイズのデザインが生成されます
- App wireframe：モバイルサイズのワイヤーフレームが生成されます
- Basic site：デスクトップサイズのデザインが生成されます
- Site wireframe：デスクトップサイズのワイヤーフレームが生成されます
すると、以下のようなパネルが表示されるため、生成したい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
Make prototypeは、静的モックを瞬時に動作するプロトタイプにしてくれます。
Actions > Make prototypeを選択すると、以下のようなパネルが表示され、プロトタイプにしたいフレームを複数選択します。
フレームを選択したら Make prototypeを選択すると...
以下の画像のようによしなにプロトタイプを作成してくれます。
◯ Rename layers
ファイルを整理し、レイヤーの名前を変更してくれます。
Actions > Rename layers を選択し、Renameしたいフレームを選択し、Rename anyway を選択すると、いい感じにRenameしてくれます。
◯ Replace content
デザインデータのテキストにリアルなテキストに置き換えてくれます
Actions > Replace content を選択し、デザインデータのテキストを置き換えたいフレームを選択し、Replace content を選択すると、デザインデータのテキストを置き換えてくれます。
◯ Translate to ...
AIが文章を任意の言語に翻訳してくれます。
Actions > Translate to ... を選択し、翻訳したいフレームを選択すると、以下のようなパネルが表示され翻訳したい言語を選択できます。
翻訳したデザインはこちら
| 翻訳前 | 日本語 翻訳 |
|---|---|
 |
 |
◯ Rewrite this ...
AIが文章をリライトしいてくれます。
Actions > Rewrite this ... を選択し、リライトしたいテキストフレームを選択すると以下のようなパネルが表示され、リライトの方向性をプロンプトとして記入することができます。
◯ Shorten
AIが文章を短くリライトしてくれます。
Actions > Shorten を選択し、短くリライトしたいテキストフレームを選択すると以下のようなパネルが表示され、Shorten を選択すると、文章を短くリライトしてくれます。
◯ Make an Image
テキストプロンプトを使用して、特定のユースケースにあった画像を生成します。
Actions > Make an Image を選択すると、以下のようなパネルが表示され、生成したい画像のプロンプトを入力すると画像が生成されます。
◯ Remove background
画像から背景を自動で削除してくれます。
Actions > Remove backgroundを選択して、画像フレームを選択すると、以下のようなパネルが表示され、Remove backgroundを選択すると、背景を削除してくれます。
まとめ
この記事では、Figma AIについてFigma Designで使える機能を紹介しました！
ぜひ Figma AIを使って、効率よくデザイン作業をしてみてください！
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。