在 Figma 中使用 Gemini AI 圖像編輯功能:完整指南

Gemini 推出了很方便的文字修圖功能,讓使用者能夠通過簡單的文字描述就能實現圖片的快速編輯。本篇將詳細介紹如何在 Figma 設計環境中直接整合這項功能,讓設計師能夠更高效地完成工作。

在 Figma 中使用 Gemini AI 圖像編輯功能:完整指南

Gemini 推出了很方便的文字修圖功能,讓使用者能夠通過簡單的文字描述就能實現圖片的快速編輯。本篇將詳細介紹如何在 Figma 設計環境中直接整合這項功能,讓設計師能夠更高效地完成工作。

Gemini文字修圖功能概述

Gemini 的文字修圖功能允許使用者通過文字指令來編輯圖像,一些應用方式例如:

  • 更換圖像的色系
  • 修改人物服裝顏色
  • 增加人物配件
  • 調整圖像元素
  • 把 LOGO 變成 3D 風格

這項功能目前可以在 Google AI Studio 上免費體驗,但對於設計師而言,能夠直接在設計工具中使用會更加方便,所以來跟大家分享如何在 Figma 中使用。

在Figma中使用Gemini功能

第一步:獲取Gemini API密鑰

要使用插件連接 Gemini 服務,您需要取得自己的 API 密鑰:

1.訪問 Google AI Studio 官方網站


2.登錄您的 Google 帳戶

3.點選左上「Get API Key」按鈕


4.點擊「Create API Key」按鈕(編號1),下方就是產出 API (編號2)

5.選擇「Project name」

6.下方有生成 API,就可以複製 API 密鑰使用

注意:請妥善保管您的 API 密鑰,不要分享給他人,另外 API 是有費用的,詳細可以參考此連結說明。
官方說明:https://ai.google.dev/gemini-api/docs/pricing?hl=zh-tw

第二步:安裝 Figma Plugin 中並配置 API

目前 Figma 平台上有找到二款 Plugin 支援 Gemini AI 的整合。這邊我二款都有用,主要是因為二款偶爾使用上會有錯誤跟失敗,一款不能用另一款可能就可以。

這款 Plugin 能夠讓我們在 Figma 的工作環境中直接調用 Gemini 的文字修圖功能,無需在多個平台間切換。

請依照以下方式就能順利使用 Plugin

1.在 Figma 開啟 Plugin,編號 1 點擊可以開啟視窗,然後編號 2 點擊可以切換到 plugin 搜尋分頁,編號 3 可以搜尋 Plugin

2.搜尋 Plugin,找到名稱「Evoker」、「Gemini 圖像助手」的 Plugin

二款主要差異在於 Evoker 多了直接生成圖片功能,有需要生成的人更有幫助,而 Gemini 圖像助手則是支援多張圖像合成。

3.點擊 Run 可以執行打開 Plugin

4.貼上您剛剛獲取的 Gemini API 密鑰,保存設置就能開使用了

Evoker 設置

點選編號 1 的設置 Icon 圖案開啟設置,編號 2 的位置就貼上第一步獲得的 Gemini API,然後按下保存設置就能使用了。

Gemini 圖像助手設置

點擊齒輪後進去就有欄位能貼上 API。

第三步:使用文字修圖功能

1.在 Figma 中選擇您想要編輯的圖像

2.啟動 Plugin

3.在 Plugin 界面中輸入您的編輯指令,按下編輯圖片或發送就能生成了

例如:

  • 「把這張圖變成藍色系」

實際應用案例

通過 Figma 與 Gemini 的結合,設計師可以快速實現以下工作:

  • 更換場景中物件 (Prompt:把圖片上的鬧鐘更換成馬克杯)
  • 調整人物形象的服裝和配飾 (Prompt:給人物添加一頂帽子)

  • 調整畫面元素色彩 (Prompt:把圖片上的絲巾顏色換成橘色)

在 Figma 中直接使用 Gemini 的文字修圖功能,為設計師提供了前所未有的便捷體驗。通過簡單的文字指令,我們可以快速實現圖像編輯,提高工作效率。

希望這篇教學能幫助你順利在 Figma 中使用 Gemini 功能。