こんにちは、クリエイターのTです。
近年、AI技術の進歩は本当に目覚ましく、デザインツールにも新たなAI機能の搭載がどんどん進んでいますね。
UIデザインツールのFigmaにも、以前のアップデートによりアプリ内のAI機能「Figma AI」が利用可能になりました。(※)
※現在はベータ版で利用可
ところで、さっそく使いこなしている方はどれくらいいらっしゃるでしょうか?
とても便利らしいということは何となく知っていても、あまり活用できていないという方は結構多いのでは?と思っています。
じつは、恥ずかしながら私自身がそうです。。
「機能が付いたな~」という意識はありつつも、今までそれを使わずともデザイン作業をすべて自力で進めていた習慣が抜けず。
ですが、ふと思い出したときに使ってみて「お…!これすごいぞ!(←便利機能は大好物)」とやはりなったので、さらなる効率化のためにどんどん活用できるよう、まずは機能を総おさらいしてみることにしました。
ということで今回は、Figmaデザインで利用可能なFigma AI機能についてまとめました。
(FigJamやFigma Slidesでも利用可能なようですがその機能はまた別の機会に…!)
参考文献:以下「Figma Learn」より↓
参考:Figma AIについて – Figma Learn – ヘルプセンター
目次
Figma AIの主な機能

UIデザインとプロトタイプの自動生成
プロンプトに基づいて、UIデザインやプロトタイプを自動生成できます。
これによって、デザイン作業の初期段階を大幅に効率化します。
具体的な実務活用シーンとしては「ワイヤーフレームのたたき台として生成しヒントやアイデアを得て、作業を効率よく進めていく」といったところでしょうか!
画像の生成と編集
プロンプトに基づいて画像を生成したり、画像の背景除去や不要な部分の削除、解像度の調整などが可能です。
今まではPhotoshopなどの別の画像編集ツールを立ち上げたり、一部有料のFigmaプラグインを使って行っていた作業がありましたが、Figmaだけで完結できるようになるかもしれませんね。頼もしい…!
テキストの生成と編集

テキストの生成、リライト、翻訳、要約など、デザインに適したコピーが作成できます。
これも、今まで別のアプリを使って進めることが多かったですがFigmaで完結できるなら本当に便利ですね!
個人的には英字タイトルを付けたいときなどで翻訳をよく使いますし、仮文章を入れる際にリライトを最初に使ったときは感動しました!
ちなみに生成スピードもボリュームによるかもしれませんが、結構早いです。
レイヤーの自動命名

レイヤーの内容に基づいて適切な名前を自動的に提案し、ファイル管理を効率化できます。
これは…これから大活用したい!!!
レイヤーの命名をデザイン中に平行してやっているとあまり効率がよくないため、ある程度デザインが固まってから整理するのが理想ですが、
その時間がなかなか取れないまま構築フェーズに突入してしまうこともあったり、そもそも命名自体、判断に迷うこともあるので、
その作業を自動化することで大幅にタイムパフォーマンスが向上すると考えられます。
インタラクティブプロトタイプの自動リンク
異なる画面や要素間のインタラクションをAIが自動的に設定してくれる機能。
プロトタイピングの時間を短縮できます。
これはかなり未知数ですが、例えば繰り返し設定することの多いボタンのアニメーションを付けるといったシーンなどで実用的な使い方ができそうです。
デザインアセットの検索と整理
AIがデザインアセットを視覚的に検索し、類似のデザインや最適な素材を素早く見つけ出し、その要素を参照したりその場に呼び出したりすることが可能。
この「視覚的に検索」というのは、画像をアップロードしたり既存のレイヤーを選択するといったことを指しているようです。
関連性が高いFigmaファイルのコンポーネント、スタイル、プラグインを、チーム内のプロジェクトを跨いで取得することが可能で、同じ機能を使って「Figmaコミュニティ」内で公開されたアセットも一覧で参照できたりします!
デザインシステムの一貫性を保ったり、新しいインスピレーションを得るために有効活用できそうですね。
おわりに
Figma AIはベータ版ということもあり、今後のアップデートでさらに多くの機能が追加されることが期待されます。
AI技術の進化がますます楽しみですね!
その発展に気後れすることなくしっかり付いて行けるよう、新しい機能には日々トライしていきたいと思います。
最後までご覧いただきありがとうございます!
過去のFigmaに関する記事↓