読み飛ばしてください

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

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

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

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

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

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

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

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

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

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

UIのアップデート

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

変わったところといえば、

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

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

Figma AI

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

Figma Slides

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

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

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

Dev Modeの新機能

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

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

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

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

本題

AIが来たって言う話。

追記
あとでFigma公式の記事を見てみると、以下のことがわかりました。

AI出力にはOpenAIのモデルが使用されています。
（ただしモデルトレーニングには使用されない。）
13歳以上でなければ使用できないため、Educationユーザーは注意が必要です。

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

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

A pizza finder app with a map and a card for a selected restaurant

選択したレストランの地図とカードを表示するピザ検索アプリ

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

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

Webサイトの生成ももちろん可能です。

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

他にもFigma AIを用いた様々なデザインが紹介され、その実力を伺えます。

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

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

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

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

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

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

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

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

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

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

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

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

文章の一括翻訳機能

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

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

やべえです。

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

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

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

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

料金について

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

AIの学習について

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

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

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

ベータ版について

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

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

最後に

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

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

では。