Autoname

Autoname是什麼

Autoname是一種專為Figma設計師所設計的AI圖層命名工具，由Hugo Duprez開發。它能夠辨別所選中的設計內容，並為圖層及其子圖層生成更易理解的名稱。

這款工具專注於圖層命名，並不負責建立完整的介面或重構設計系統。該插件可免費使用，其用戶端代碼則以 MIT 授權條款公開。

Autoname主要功能

• 一鍵命名：對Figma中選中的圖層執行自動識別和重命名。
• 遞歸處理：在選定範圍內繼續處理其包含的子圖層。
• 組件保護：檢測組件和實例，避免隨意改寫關鍵重複使用對象的名稱。
• AI分類：利用圖像分類模型判斷按鈕、圖片、文字區塊等常見介面元素。
• 自訂模型：允許更換模型地址並導入自己的Teachable Machine模型。
• 調試模式：顯示提交給模型的圖像，並在Figma控制台輸出預測資訊。
• 開源用戶端：開發者可查看插件實作、構建專案或依許可證修改代碼。

適合處理哪些圖層

• 名稱仍為Frame、Group或Rectangle等預設值的介面圖層。
• 從模板、線框稿或外部檔案複製後，缺乏語義名稱的對象。
• 包含大量嵌套結構，需要先完成基礎整理的頁面或組件草稿。
• 希望在交付開發前提高圖層可讀性的行動端和網頁設計稿。
• 需要用統一分類模型識別團隊常見界面元素的地圖檔案。

組件和實例保護機制

Autoname會檢測組件與實例，盡量避免重新命名那些具有重複使用關系的對象。這個機制可以降低自動操作干擾組件庫命名和實例對應的風險。

保護機制並不等於操作絕對無風險。執行前仍應確認選擇範圍，並在運行後檢查組件、變體及特殊圖層名稱。

AI命名如何工作

1. 用戶在Figma畫布中選擇需要整理的圖層或外層框架。
2. 插件將目標視覺內容整理成模型能夠識別的圖像輸入。
3. 分類模型預測圖層最接近的介面元素類別。
4. 插件將預測結果寫入對應圖層名稱，並繼續處理允許修改的子圖層。
5. 用戶複查結果，再手動調整業務專有名稱或識別錯誤。

安裝Autoname教學

1. 登入Figma，並進入社區插件頁面。
2. 搜尋由Hugo Duprez發布的Figma Autoname，核對作者和插件標識。
3. 點擊開啟或安裝插件，並授權其在目前的設計檔案中運行。
4. 返回設計稿，從插件菜單啟動Autoname。
5. 先複製測試頁面，在小範圍圖層上驗證命名結果。

一鍵自動命名教學

1. 選中一個或多個需要整理的圖層，也可以選擇包含多層結構的框架。
2. 打開Autoname插件，檢查目前所選的對象中，是否有不應被修改的對象。
3. 執行自動命名，等待模型載入和識別完成。
4. 展開圖層面板，檢查父層與子層的名稱是否符合設計語義。
5. 撤銷錯誤結果或手動補充頁面業務名稱，再保存設計檔案。

選擇範圍與子圖層處理

插件會圍繞當前選擇的項目及其子層級來運作，因此若選擇了外層的頁面框架，可能會同時影響到大量的對象。在需要精確控制的情況下，可以先選擇單個卡片、導航欄或內容模組。

對於已經建立嚴格命名規範的頁面，建議分區執行。分批處理更容易發現分類偏差，也方便使用Figma的撤銷功能恢復。

導入自訂AI模型

Autoname支援更換模型地址，可搭配Teachable Machine來打造屬於自己的圖像分類模型。團隊可以訓練出更符合內部組件、產品術語及設計模式的類別。

自訂模型設定步驟

1. 整理需要識別的類別，例如主按鈕、標籤、頭像、卡片和導航項。
2. 為每個類別準備足夠且具有差異的介面截圖樣本。
3. 在Teachable Machine中訓練圖像分類模型，並使用測試樣本檢查準確率。
4. 導出或託管相容模型，記錄插件能夠訪問的模型地址。
5. 在Autoname中替換模型地址，並用獨立測試檔案驗證輸出。
6. 模型穩定後再擴大使用範圍，並持續補充容易混淆的樣本。

調試模式怎麼用

調試模式會在插件內顯示傳送給模型的框架圖像，並將預測結果寫入Figma控制台。它適合用來排查選擇範圍、模型類別和命名結果不一致的問題。

• 檢查模型實際接收到的圖像是否裁切完整。
• 觀察不同類別的預測結果和容易混淆的介面元素。
• 驗證自訂模型地址能否正常載入。
• 定位模型識別問題與插件重命名邏輯問題。

開源代碼與本地開發

官方客戶端倉庫採用MIT許可證，該專案使用了Svelte、TypeScript、Tailwind CSS、TensorFlow以及Teachable Machine等技術。開源的範圍主要限於插件客戶端，並不代表Figma平台或所有的模型服務都屬於此專案。

本地構建基本流程

1. 獲取官方客戶端代碼，並閱讀倉庫中的許可證和開發說明。
2. 安裝專案依賴，於本機啟動或建構插件資源。
3. 在Figma桌面端透過開發插件功能導入項目中的manifest。
4. 修改代碼後重新建構，必要時重啟插件查看變化。
5. 啟用調試模式檢查圖像輸入、預測日誌和命名結果。
6. 發布修改版前核對MIT許可證、第三方依賴和Figma平台規則。

技術堆疊與依賴

典型使用場景

• 設計稿清理：快速替換大量預設圖層名，改善檔案可讀性。
• 開發交付：在交付前整理頁面結構，幫助工程師定位設計元素。
• 模板整理：對複製或導入的模板進行初步語義命名。
• 團隊規範：結合自訂模型識別內部常見組件類別。
• 教學練習：幫助初學者理解圖層組織與基礎命名思路。
• 開源學習：研究Figma插件、前端界面和圖像分類模型的結合方式。

適合哪些用戶

• 需要頻繁整理Figma圖層的產品設計師和視覺設計師。
• 維護大型頁面檔案並希望減少重複命名工作的設計團隊。
• 準備把設計稿交付給前端或客戶端工程師的產品團隊。
• 希望訓練專用介面分類模型的設計系統維護者。
• 學習Figma插件開發和TensorFlow前端應用的開發者。

Autoname的優勢

• 目標單一清晰，適合處理圖層命名這一高頻重複工作。
• 支援選中層和子圖層，可減少逐層手動修改的時間。
• 主動保護組件和實例，降低破壞重複使用結構的機率。
• 無需購買插件套裝，個人和團隊皆可免費試用。
• 客戶端代碼公開，並採用寬鬆的MIT許可證。
• 支援自訂模型，可適應不同團隊的設計語言。
• 提供調試模式，方便開發者檢查模型輸入和預測結果。

使用限制

• AI分類並非始終準確，外觀相似的按鈕、卡片和小型物件可能被混淆。
• 自動名稱通常是通用類別，無法理解訂單狀態、業務模組等完整產品語義。
• 選擇大型框架會影響較多子圖層，運行後需要人工逐區檢查。
• 插件需要上網下載模型，網路受限時可能無法正常初始化。
• 自訂模型需要準備樣本、訓練、託管和維護，並非導入後即可長期穩定。
• 開源倉庫主要涵蓋用戶端，不應推斷所有模型、託管服務或Figma功能皆可私有化。
• 官方專案更新節奏可能變化，安裝前應核對社區頁面和代碼倉庫狀態。

隱私與安全注意事項

• 運行前確認所用模型地址以及插件需要訪問的數據範圍。
• 涉及未發布產品、客戶資料或保密設計時，應先完成組織內部審批。
• 使用第三方或自建模型時，需要評估模型託管方的日誌與資料保留策略。
• 不要僅憑自動命名判斷圖層業務含義，重要交付仍由設計師複核。
• 建議在副本中測試，並利用Figma版本歷史保留可恢復節點。

提高命名品質的方法

1. 先刪除無用的圖層，並把明顯的組合關係整理清楚。
2. 按頁面區塊分批運行，避免一次選擇整個複雜檔案。
3. 保留組件、實例和業務關鍵層的既有規範名稱。
4. 將通用AI名稱補充為團隊約定的頁面和狀態語義。
5. 記錄經常誤判的元素，為自訂模型增加針對性樣本。
6. 完成自動命名後執行一次人工審查，再交付開發或歸檔。

價格與版本

Autoname官方將該插件標示為完全免費，並未推出會員制、積分制度或按使用次數收費的方案。使用Figma、自訂模型託管服務，或是進行內部開發所產生的成本，均不屬於Autoname插件的收費範圍。

基本資訊

推薦指數

綜合推薦指數為4.2分，滿分5分。它適合那些需要快速整理Figma預設圖層名稱的設計師，不過AI生成的結果仍需人為補充業務相關的意義，並檢查是否有錯誤判斷。

常見問題

Autoname主要做什麼？

它利用圖像分類模型為Figma中選中的圖層及其子圖層自動生成名稱。

Autoname免費嗎？

免費，官方沒有公開會員、積分或按席位收費套餐。

它會重命名組件和實例嗎？

插件會檢測並保護組件與實例，但運行後仍建議人工檢查關鍵重複使用對象。

可以一次處理多個圖層嗎？

可以，插件會處理當前選擇，並可繼續檢查其包含的子圖層。

命名結果一定準確嗎？

不一定，外觀接近或業務語義複雜的元素可能出現分類和命名錯誤。

可以使用自己的模型嗎？

可以，用戶可訓練Teachable Machine模型並在插件中更換模型地址。

為什麼需要上網？

插件需要透過網路下載模型，網路無法使用或模型地址失效時可能無法完成識別。

Autoname是開源工具嗎？

官方客戶端代碼已公開並採用MIT許可證，但Figma平台及外部模型服務不屬於該許可證的範圍。

是否提供獨立API？

目前沒有面向外部系統的獨立公共API，主要以Figma插件形式使用。

適合大型設計系統嗎？

可用於初步整理，但大型設計系統應結合內部規範、自訂模型和嚴格人工審查。