Figmaの大型アップデートの新機能はこれで大体網羅（AI系中心に紹介）

Figmaの大型アップデートの波に乗り遅れてしまい焦っていたので、ここいらで最新機能をキャッチアップしつつ同じような方の一助になればと思い記事にしてみました。

ちょっと縦に長いですが、ボリュームはそんなにない（ほとんど画像と動画）はず……ですし、なるべく簡潔に書いているので、気になる機能だけでも是非覚えて帰ってくだされば幸いです。

1. レイヤー名を変更 【Rename layers】

レイヤー名をよしなに自動変換してくれる機能。

公式ページ

☝️こちらのデザインのレイヤー名をリネームしてもらいます。

下に配置されているキラキラボタン通称Action buttonから「Rename layers（レイヤー名を変更）」を選択。

数秒でロゴやナビゲーションなども認識して改名してくれました！リネーム作業は地味に時間がかかるのでかなり助かります！！

ただしすでに名前を手動変更したレイヤーはリネームされないのでご注意を。

2. テキストコンテンツを置換 【Replace content】

テキストデータをデザインに合わせて自動変換してくれる機能。

公式ページ

☝️試しにニュースセクションの記事タイトル名を置換してもらいます。

シンプルに「クリエイティブ会社のニュース記事タイトル」という指示を出してみます。

日付もちゃんと置換してくれました！嬉しい！個人的には、タイトル1つ目は元のテキストのままでよかったのと、もう少し当たり障りのない文章だとよかったのでそこら辺も指示が必要そうでした。

この機能は記事一覧やフロー、よくある質問など同じデザインを複数並べる場合のダミーテキストを入れる際に使えそうです。

3. テキストの書き換え、翻訳、短縮
【Rewrite, translate, shorten text】

テキストデータをリライトしてくれる機能。

公式ページ

テキストの書き換え（Rewrite）

☝️200文字程度の文章を倍の400文字まで増やしてもらいます。

いい感じに文章量を追加してくれました。今回のようにテキストの内容を変換する場合は一つ前の「テキストコンテンツを置換（Replace content）」機能でも可能でした。

テキストの翻訳（translate）

☝️英語を含め28言語への翻訳ができます。

多言語サイトを作る時に役立ちそうです。ただ精度が定かではないのでちゃんと確認は必要そうですね。

簡単な単語であれば割と使えそう！

今まで翻訳サイトやAIツールを介していた作業をFigma上で行えることは大変ありがたい！英字のタイトル名に悩んだ時にも使えそうです。

テキストの短縮（shorten）

☝️400文字ほどある文章を短縮させます。

「書き換え」や「コンテンツ置換機能」でも短縮可能ですが、短縮は短縮用の機能があるので指示を出さずに使用できました。細かい指示が必要な時は前述した機能を使う方が良さそうです。

4. テキストの提案を受け入れる

テキストの続きを提案してくれる機能。

公式ページ

テキストを入力している途中にテキスト候補が透過テキストとして表示され、『Tab』を押すと提案を受け入れ使用できる機能。こちらはテキスト入力中に突如現れる機能なので、特別な指示は必要ありません。

5.画像の編集

画像を編集する機能。

公式ページ

背景を削除（Remove background）

☝️精度はまだまだそうですが、仮でデザインにあててみる時（社内共有の時とか）などにサッと使えそうです。

解像度を上げる（Boost resolution）

☝️この機能はなかなか良さそうでした！低解像度の写真やスマホの素材しかないなんて時に使えそうです。

画像の作成と編集（Make an image / Edit image）

☝️「デスクでpc作業をしている20代男性の画像」を生成してもらいます。

できはなかなかよさそう！

追加で「横アングルに」と指示をしてみます。

生成されるまで1分ほどと少し時間はかかりましたが、写真がどうしても見つからない時や画像を探す時間がないなんて時にもしかしたら使えるかもしれません。

6.プロンプトからデザイン生成 【First Draft】

プロンプトを入力するとデザインを生成してくれる機能。

公式ページ

☝️デフォルトでは「Site wireframe」になっているので

• Basic app
• App wireframe
• Basic site
• Site wireframe

の４つのタイプの中から今回は「Basic site」を選択し、サイトデザインを作ってもらいます。

シンプルすぎますが、「パーソナルジムのLP」と指示を出します。

ところどころ改行位置が独特だったりしますが、ほんの数秒でデザインを作ってくれました。画像まで用意してくれます。

さらにはカラー展開案も出してくれました。

プロンプト次第で初稿から精度の高いサイトが上がってくるかもしれません。ここから編集して理想のサイトに近づけるといった使い方が良さそうです。

7.プロンプトからデザイン生成〜公開まで 【Figma Make】

プロンプトから、デザイン・インタラクション・コードまでを生成しサイト公開できる機能。

公式ページ

1つ前の機能「First Draft」をよりレベルアップさせたような機能ですね。

☝️新規プロジェクトを立ち上げようとすると右端に存在する白いアイコンをクリック。

左下のチャット欄のようなUI部分にプロンプトを入力します。既存のFigmaデザインや画像を添付することもできます。（コピー&ペーストで貼り付け可能なのが地味に嬉しいです。）

テーマを選定。

東京都在住の社会人女性（20〜30代）向けの、パーソナルジムのLPを作成してください。

こちらに加えて今回は少しだけ詳細に指示を出してみました。

待つこと1分ほどでサイトが完成。特に記述はしませんでしたがホバー動作まで実装してくれています。

ただ、一部画像が反映されていなかったり、ボタンがおかしかったりとやはり手直しは必要そうです。

そこでFigma Makeのデザイン編集機能の出番です。

左下のカーソルアイコンを選択。

デザインから直接編集できるようになっており、それに応じて裏のコードまで書き換わるようです。逆にコードの方から修正することもできます。

そして！忘れてはならない、この機能のすごいところはこのまま公開できるという点です。

右上の『Publish』ボタンからタイトルを設定すると

URLが発行されるのでそのまますぐに公開できちゃいます。

Figmaから既にFigma Makeを使用したサイトが公開されていましたので興味がある方はチェックしてみて下さい👇

また、日本でもFigma makeを駆使して1日でポートフォリオサイトを作っていた方がいたのですが、かなり丁寧に説明してありますので興味がある方はこちらも是非チェックしてみてはいかがでしょうか！

8.レスポンシブデザインをワンクリックで公開 【Figma Sites】

Figma上で作ったデザインをワンクリックで公開できる機能。

公式ページ

前述した「First Draft」や「Figma Make」は非デザイナーを意識した機能だったのに対し、こちらは完全にデザイナー向けといった機能です。

☝️新規プロジェクトを立ち上げようとすると右から2つ目に存在するブルーのアイコンをクリック。

立ち上げるとすぐにテンプレート一覧が。32のテンプレートが準備されています。（現時点で日本語のデザインはなし）

今回はこちらのモダンなデザインをチョイス。

プレビューで見たところ、レスポンシブに対応していて実際の動きに近いものが作れるようです！（作る際はオートレイアウト必須！）スライダーの動きが再現されるのもすごい！これは実装者とのインタラクションのすり合わせがすごく楽になりそうです。スライダーの速さとか意外とすり合わせ時間かかったりするんですよね……

スライダーの動きを少しだけ早めてみて実機プレビューで確認してみます。たくさんのテンプレートがあるので、これらのプロトタイプを参考にアニメーションをつけるなんてこともできそうです。ありがたい！そして「Figma Make」同様に自動生成されたURLでの公開ができます。

現段階では複雑なレイアウトのデザインは難しそうで、オートレイアウトを使ったベーシックなレイアウトのデザイン時には使えるかなと思いました。また、フォントによってはプレビューに反映されなかったりするようなので注意が必要そう。CMSは未対応だそうで、2025年の今年中には対応予定とのことでした。

9.バナーやデザインテンプレ作りが捗る 【Figma Buzz】

バナーやSNS投稿などのテンプレなどが作れる、いわばcanvaのような機能。

公式ページ

☝️新規プロジェクトを立ち上げようとすると右から3つ目に存在するピンクのアイコンをクリック。

テンプレートは数え切れないほどに山ほどありました。

スタンプやテキストコンビネーションもあり非デザイナーでもおしゃれなデザインが簡単に作れそうです。

テンプレートを作ってチーム内に共有することもできるということで、試しに社内Instagram用の実績公開テンプレートを作成してみました。これでエンジニアも簡単に編集できますし、チームの他のユーザーはリンク共有することなくFigma Buzzを開いて見つけて使用できるようになります。

またこの機能のすごいところは、Excelやスプレッドシートをインポートしてアセットを一括作成できるという点。今までちまちまとテキスト情報をコピー＆ペーストしていましたがもうその必要はありません。詳しくは公式のチュートリアル動画を確認ください。

10.デザインに動きをつけてくれる 【Magic Animator】

デザインを瞬時にアニメーション化してくれる（しかも複数候補を出してくれる）プラグイン。

プラグイン公式コミュニティページ

アニメーションを生成してくれるだけでなく、書き出しや編集までできちゃいます。

☝️試しにプラグインコミュニティファイルにあったグラフデザインにアニメーションをつけてみます。

ワンクリックでアニメーションが生成され、4つのバリエーションを提案してくれました。

左2つはなかなかいい感じですね。

アニメーションの書き出し方は5タイプ。

• Figma（GIFとしてFigmaにインポート）
• MP4
• WebM
• GIF
• Lottie JSON

微調整したい場合は「Lottielab」を使用しての編集となります。

自分のデザインでも試してみたく、「テキストコンテンツを置換」の章で作ったニュースセクションに動きをつけてみました。右下は良さそうですが、正直それ以外は微妙……といったところ。フェードインなどの単調な動きばかりなのも少し気になります。今後はプロンプト記入できるようになると、デザインから動き比較をパパッと作れるようになるので嬉しいですね。

また、レイヤー数が500以上になると精度が低くなるそうなのでご注意を。

11.嬉しいプチ新機能たち（AIではない）

パスに沿ったテキスト

パスに沿ってテキストを配置できる優れ機能！今までプラグインを使っていましたが、ついに搭載されました！「テキストモード」にして、適応したいパス上にカーソルを持っていくだけで使えちゃいます。

鉛筆・ブラシツール（Figma Draw）

手書き風のあしらいを直接書き込めます。ブラシの種類もさまざま。

描いた線はベクター化されるため後から調整ができます。

storokeとして使用することも！

ブラシではないですが、settingsをいじると歪な線を作ることも！

簡単にカスタムブラシを作成することもできます。

エフェクト新機能

ノイズ

待望のノイズがFigmaのデフォルトツールに仲間入り！テレビやゲーム画面のようなグリッチ風な演出もできるのが面白いです。

テクスチャー

輪郭を歪ませたり、絵の具が水で溶け合うような表現ができるように。

ぼかしのグラデーション

ぼかしの強弱が調整できるようになりました！

リピート

放射上と列・行でのリピートが可能になりました。

シェイプの塗りとしてのリピート機能も追加に。

色や間隔の調整も楽ちんです。

グリッドオートレイアウト

公式ページ

オートレイアウトに「Grid」機能が追加され、行と列のレイアウト制御が可能になりました。

ネストサイズや間隔の設定、パディングの制御、セルをまたいだ配置など今までのオートレイアウトよりも自由かつ整ったデザインができるようになっています。

紹介するにはボリューミーなため、詳しくはFigma公式から出ているコミュニティファイルをチェックしてみてください！（英語版しかないので前述した新機能「翻訳」を駆使して遊んでみてください！）

おわりに

全体的にざっくり説明ではありましたがいかがだったでしょうか？

もうFigma恐るべし！！今までは外部のサービスやプラグインを組み合わせておこなっていたことを、Figma内に凝縮させてきてますし、非デザイナーが使えるような機能（ここでは紹介してませんがFigma Slidesも含め）も増えてきて、Figmの可能性がさらに広がるようなアップデート内容だったかなと思います。

個人的には、これらの新機能を全て使いこなすというよりは一旦できる限り把握しておいて、取捨選択して使っていきたいなと思っています。

ここまで長らくお付き合いありがとうございました！