今天太晚回家，文章要開天窗拉！

先簡單分享一下，我在初期在管理元件的時候，也對於命名這件事情感到有點困擾，在網路上看了一些文章，得到了一些簡易的心得，如果有其他更好的方式我也非常想知道，歡迎大家分享給我。在此先簡單的介紹一下我目前得出的一些粗淺的結論，給各位參考一下。

在用命名分類好各種類型的元件之後，也必須整理成可以方便切換的命名方式，雖然說 figma 的 variants 非常強大，可以用這個方式好好的整理元件。但使用這種方式命名，就算不使用 variants 分類，也可以把這些元件整理到一定程度方便管理的方式。

首先，我習慣以 / 的方式，去做大方向的區分，而比較詳細的部分，則會使用 _ 作為分隔。在 figma 裡，使用 / 命名時，系統會依據 / 利用像是開資料夾的方式，做簡單的區分，再來最細部的部分，在使用 _ 作為命名上的區別的話，就可以在切換元件時，高效的理解這個元件目前的狀態了。

目前我使用到的元件，通常會特定用在某個部位或是功能頁面當中，所以將各種不同元件的名字作為第一個大分類來命名，接著使用該部位或者是正在開發的頁面來作為次要的分類，最後才帶入最細節的命名，是一個對我來說比較好管理的方式。舉例來說，當我分別要整理使用在帳戶設定裡的 icon 以及 主要的 call to action button 等元件時，我會先把這兩者最一開始的命名做出區分，也就是把 icon 的元件命名成 icon/account setting/name ，以及把按鈕的元件命名成 btn/cta/name_d。

一開始的我，也非常的好奇，我到底需不需要每個大小/顏色不同，但樣式完全相同的元件，都做一個不一樣的母元件，實際上使用後，覺得不需要，所以才採取了上述的例子作為我目前的命名方式。而至於為什麼要把狀態使用 “_狀態”，原因很簡單，一部分是因為我自己只要中斷了目前在做的事情，很容易需要多花一些時間，才能夠重新想起來我自己要做什麼，也就是標準的金魚腦。所以利用名稱 “_狀態” 這種命名方式時，我可以很快的知道我目前正在更改的元件是什麼名字，這樣會加速我選擇我需要的元件，達到節省時間的效果。這邊推薦給金魚腦的大家，或是會需要頻繁開會，或是製作畫面時會容易因為其他事情干擾的人來使這套命名方式。

好了，今天真的太晚回家了，只能用最快速的方式簡單的整理一下這次的主題，謝謝大家。