【Config2024】ついにFigmaにAIが搭載されたらしいので情報を全部まとめた。

# 読み飛ばしてください

おはようございます、しなもんです。
**私はとにかくFigmaが大好きです。**

半無限に広がるキャンパス、Saasであるからこその快適な使い心地、簡単なデザインに最適なベクターツール...

Figma自体は使い始めて1年程度なのですが、UI設計ツールとしてだけでなく、**デザインツールとして優秀すぎて大好き**です。
**便利すぎて動画編集とかでも使ってます。**

そんなFigmaが遂に新時代を切り開くべく大型アプデが入るようなので、その情報をまとめてみました。

# まずは Config 2024 についておさらい

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927831/d0819a3b-b0fe-2895-04ff-f4f945347d3a.png)

「Config」とは、Figmaが主催する大型イベントです。

といってもFigmaについての発表だけでなく、ベンチャー企業や監督、写真家、発明家などが集まることで、**デザインに関する最新の技術が一堂に会する貴重な場**でもあります。

~~WWDCのデザイナー版みたいなイメージかな？~~

とはいえやはり目玉はFigmaのアップデート情報。具体的には以下の情報が発表されました。

:::note info
画像はこちらの公式ライブ映像のものです。
https://youtu.be/n5gJgkO2Dg0
:::

## UIのアップデート

![Config 2024_ Figma product launch keynote 9-36 screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927831/66069e41-652a-a514-c4b5-016e3a095d31.png)

CEOのDylan Fieldさん「**デザイナー向けに新しいUIをデザインするのがどれだけ怖いか分かりません**」
確かにプレッシャーがすごそう。

変わったところといえば、
* UIの角が丸くなり、手前に浮いているようなデザインになった
* そのおかげでUIの可動性が上がり、大きさを調整したり一部を閉じてデザインに集中することができるようになること
* ツールバーが画面下に移動したこと

また**オートレイアウトに新機能が追加**されたり、**iOS(iOS18)とAndroid(Material 3)のUIアセットを公式で用意してくれたり**などの追加要素もあります。

## Figma AI

本題なので後で紹介します。

## Figma Slides

強力なデザイン力を持つFigmaで**プレゼン資料を作れるようになりました**。すごい。
~~プロジェクトのコードネームはハエだったそうで。~~

なんと今回のConfigではプレゼンにFigma Slidesが実戦投入されているそうで、さっそくその実用性を伺えます。

:::note info
ちょっとこの機能はAIとは別に非常に面白そうだったので、別記事に~~まとめたいと思います。~~
**追記: まとめました**
:::

https://qiita.com/CinnamonSea2073/items/ad54e9d4b44d76a9e286

## Dev Modeの新機能
![Config 2024_ Figma product launch keynote 23-40 screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927831/68e84717-87dc-81b6-41d9-076386648ece.png)

タイムライン的な機能が実装されていて、デザインが完了したフレームをプログラマーが迅速に確認できるようになっているようです。

![Config 2024_ Figma product launch keynote 24-11 screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927831/ed899837-13c8-4423-a13c-f6c601813288.png)

また、Git的なバージョン管理機能も実装されました。

レスポンシブデザインを簡単に確認できるように専用の画面が追加されました。

**ベータ版だったDev Modeが製品版となり**、さらに洗練されたように感じます。

# 本題

**AIが来たって言う話。**

:::note info
追記
あとで[Figma公式の記事](https://help.figma.com/hc/ja/articles/17725942479127-AI%E6%A9%9F%E8%83%BD%E3%81%B8%E3%81%AE%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%82%E3%82%8B%E3%81%84%E3%81%AF%E3%82%AA%E3%83%97%E3%83%88%E3%82%A2%E3%82%A6%E3%83%88)を見てみると、以下のことがわかりました。
* AI出力にはOpenAIのモデルが使用されています。
（ただしモデルトレーニングには**使用されない**。）
* 13歳以上でなければ使用できないため、Educationユーザーは注意が必要です。
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927831/e8b43ba3-7984-284c-80f6-72837653b7b7.png)


画面下に移動したツールバーには、**新たに「Actions」という項目が追加**されています。
これがFigma AIを呼び出す場所となります。

## プロンプトからUIを出力する機能

![Config 2024_ Figma product launch keynote 33-56 screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927831/1098b280-f0d4-bfc0-de54-23d401231eec.png)

```
A pizza finder app with a map and a card for a selected restaurant
```
> 選択したレストランの地図とカードを表示するピザ検索アプリ

と入力すると、自動でフレームが生成されました。
驚くべきことに**プレースホルダー用の画像生成**まで行われるほか、
**フォントやスペースサイズ、カラーテーマの変更**などもできます。

何より、**生成したデザインは全てレスポンシブに対応している点**が非常に優秀です。

![Config 2024_ Figma product launch keynote 35-45 screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927831/cbdd5721-dcdc-7b15-4f40-8c60bc60042c.png)
Webサイトの生成ももちろん可能です。

「フッターの前に連絡するためのフォームを追加して！」などの追加プロンプトにも対応します。

![Config 2024_ Figma product launch keynote 37-1 screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927831/e4e5fadb-0e53-b4be-d5f1-43a284e3aa0f.png)
他にもFigma AIを用いた様々なデザインが紹介され、その実力を伺えます。

## 画像から該当するフレームを検索してくれる機能

**デザイナー「誰かこのデザインがFigmaファイルのどこにあるか知らない？」**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927831/1ecb622b-9b98-6302-b95b-f79da6d30827.png)

そんな状況になっても安心。画像から該当しそうなフレームを自動で探し、そのままドラッグして追加できます。

![Config 2024_ Figma product launch keynote 40-20 screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927831/c95d11b8-c5bf-7053-bcb6-7d440ba02d88.png)

画像から検索するだけでなく、テキストから検索することも可能です。

## 手書きからレイヤーを検索して追加してくれる機能

![Config 2024_ Figma product launch keynote 41-50 screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927831/671f9577-13aa-9477-1c85-7d67e9687f3e.png)

ペンツールでアイコンを描き...

![Config 2024_ Figma product launch keynote 41-58 screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927831/f7869ae7-6c95-aac4-91b1-cf3cf61014ed.png)

コンポーネントを検索することができます。面白い。

## プレースホルダー用の文章＆画像を生成してくれる機能

![Config 2024_ Figma product launch keynote 44-24 screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927831/52e00778-bf27-8a1a-8d0b-c18db8ec5af1.png)

フレームを伸ばすだけであら不思議。**プレースホルダー用の文章が生成されながらフレームが伸びていきます**。面白い。

![Config 2024_ Figma product launch keynote 45-10 screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927831/5618581e-6f4e-3172-5276-69a4c4e23142.png)

プロンプトから画像を生成することもできます。

## 背景削除などの画像編集機能

![Config 2024_ Figma product launch keynote 46-16 screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927831/e7ee1f53-bd37-6b13-0aad-947c7bc4aaa7.png)

画像を選択しプロンプトを入力することで、**背景を削除するなどの編集ができる**ようです。

## 文章の一括翻訳機能

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927831/7c86da24-8902-14c1-296b-0e0508821932.png)

翻訳もできます。親のレイヤーを選択すると、文章を全部一括で翻訳してくれます。
i18nが簡単に...？

## グループやフレームに自動的に命名をしてくれる機能（！？）

**やべえです。**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927831/839b0688-28e8-909d-d340-ab44686ef183.png)

フレームを使いまくるとこうなりますよね。あるあるですよね？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927831/0867bad6-29d5-e72e-2de7-35a0bb9c9142.png)

**AIが推測して勝手に命名してくれます**。めちゃくちゃ良いじゃん！！！！
（会場からも歓声が上がりました。）

## UIから自動的にプロトタイプを生成してくれる機能

![Config 2024_ Figma product launch keynote 49-19 screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927831/0e9607f2-d9e5-a3db-f6d6-5dfa3ebe0ffb.png)

最後はプロトタイプを勝手に構築してくれる機能。ボタンや命名から自動で推測してプロトタイプを作ってくれているそうです。凄い。

# 料金について

今のところは**プランごとに使用回数制限を設ける方針**のようです。
とりあえず2024年中はベータ版として公開し、2025年のどこかの時点で使用状況を理解したら、新たに機能の料金について決定する予定だそう。

# AIの学習について

:::note alert
**8月15日からFigmaファイルの機械学習が始まるそうです。**

**スタータープランとプロフェッショナルプランではデフォルトで学習を許可する設定になっていますが、必要に応じて許可しない設定にできるそう。**

デフォルトでONになっているのには注意が必要です。
:::

![Config 2024_ Figma product launch keynote 51-44 screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927831/6daa44df-aa89-337a-b521-9503f97f7093.png)

# ベータ版について

Figmaのベータ版デスクトップアプリを開くと、ウェイティングリストへ参加できるようになっていました。
気になる方は登録しておくと良いでしょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927831/c99eef6c-1034-301f-7ec6-46734d1d42e3.png)

ベータ版はここからダウンロードできます。

https://help.figma.com/hc/en-us/articles/5601429983767-Guide-to-the-Figma-desktop-app#Download_the_beta_version

# 最後に
Figma AIについてまとめました。
ChatGPTを筆頭に、2023年から始まったAIブームにようやく乗る形となりましたね。

私もさっそくウェイティングリストに登録してみたので、使えるようになったら記事を出したいと思います。

では。