006-元件状态

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

先简单分享一下，我在初期在管理元件的时候，也对於命名这件事情感到有点困扰，在网路上看了一些文章，得到了一些简易的心得，如果有其他更好的方式我也非常想知道，欢迎大家分享给我。在此先简单的介绍一下我目前得出的一些粗浅的结论，给各位参考一下。

在用命名分类好各种类型的元件之後，也必须整理成可以方便切换的命名方式，虽然说 figma 的 variants 非常强大，可以用这个方式好好的整理元件。但使用这种方式命名，就算不使用 variants 分类，也可以把这些元件整理到一定程度方便管理的方式。

首先，我习惯以 / 的方式，去做大方向的区分，而比较详细的部分，则会使用 _ 作为分隔。在 figma 里，使用 / 命名时，系统会依据 / 利用像是开资料夹的方式，做简单的区分，再来最细部的部分，在使用 _ 作为命名上的区别的话，就可以在切换元件时，高效的理解这个元件目前的状态了。

目前我使用到的元件，通常会特定用在某个部位或是功能页面当中，所以将各种不同元件的名字作为第一个大分类来命名，接着使用该部位或者是正在开发的页面来作为次要的分类，最後才带入最细节的命名，是一个对我来说比较好管理的方式。举例来说，当我分别要整理使用在帐户设定里的 icon 以及 主要的 call to action button 等元件时，我会先把这两者最一开始的命名做出区分，也就是把 icon 的元件命名成 icon/account setting/name ，以及把按钮的元件命名成 btn/cta/name_d。

一开始的我，也非常的好奇，我到底需不需要每个大小/颜色不同，但样式完全相同的元件，都做一个不一样的母元件，实际上使用後，觉得不需要，所以才采取了上述的例子作为我目前的命名方式。而至於为什麽要把状态使用 “_状态”，原因很简单，一部分是因为我自己只要中断了目前在做的事情，很容易需要多花一些时间，才能够重新想起来我自己要做什麽，也就是标准的金鱼脑。所以利用名称 “_状态” 这种命名方式时，我可以很快的知道我目前正在更改的元件是什麽名字，这样会加速我选择我需要的元件，达到节省时间的效果。这边推荐给金鱼脑的大家，或是会需要频繁开会，或是制作画面时会容易因为其他事情干扰的人来使这套命名方式。

好了，今天真的太晚回家了，只能用最快速的方式简单的整理一下这次的主题，谢谢大家。