TCC推薦：大家好，我是宇通。 長(zhǎng)期以來(lái)，它一直是用戶體驗(yàn)設(shè)計(jì)師的首選。 而在過(guò)去的一三年里，我們可以看到很多新的競(jìng)爭(zhēng)者占據(jù)著市場(chǎng)份額，其中Figma和的成績(jī)斐然。 國(guó)外也有不少團(tuán)隊(duì)已經(jīng)轉(zhuǎn)投Figma。 在這篇文章中，本文描述了作者帶領(lǐng)團(tuán)隊(duì)轉(zhuǎn)用Figma后的一些容易出錯(cuò)的點(diǎn)。 希望對(duì)您有所幫助。

經(jīng)過(guò)數(shù)月的計(jì)劃，我們最終決定將設(shè)計(jì)從 , , Craft 和所有遷移到 Figma。 全部遷移完成后，大家聚集在會(huì)議室，激動(dòng)之情溢于言表。 當(dāng)我們?yōu)槊總€(gè)項(xiàng)目導(dǎo)出每個(gè)草圖文件時(shí)，我們意識(shí)到：嘿，我們的整個(gè)設(shè)計(jì)系統(tǒng)不再像以前那樣工作了。

在我看來(lái)，F(xiàn)igma 是當(dāng)今市場(chǎng)上性價(jià)比最高的設(shè)計(jì)工具。 但是將設(shè)計(jì)項(xiàng)目從 Figma 遷移到 Figma 并不像個(gè)別文章描述的那么容易。

我們這次的設(shè)計(jì)遷移其實(shí)是非常困難的，甚至還接連失敗，經(jīng)歷了很多失誤，不過(guò)好在已經(jīng)徹底成功了，積累了很多經(jīng)驗(yàn)。 希望通過(guò)這篇文章的總結(jié)，告訴大家在軟件遷移中遇到的問(wèn)題，明確什么該做，什么不該做，幫助其他團(tuán)隊(duì)快速將系統(tǒng)遷移到Figma。

1、從“新”開始

無(wú)法點(diǎn)擊人物圖標(biāo)

你很可能會(huì)遇到這樣的情況，如果你有一個(gè)成熟的設(shè)計(jì)系統(tǒng)，包括很多按鈕、輸入框、圖標(biāo)甚至插圖。 你可能想直接導(dǎo)出到新的設(shè)計(jì)系統(tǒng)，然后自動(dòng)修復(fù)導(dǎo)出失敗的地方，相信我，這是非常冒險(xiǎn)的，很可能事半功倍。

在創(chuàng)建新文件之前，請(qǐng)務(wù)必保留原始文件。 設(shè)計(jì)系統(tǒng)無(wú)法完美遷移到Figma系統(tǒng)，組件樣式容易混淆，所以需要按照f(shuō)igma的規(guī)則創(chuàng)建組件屬性樣式。 我建議您先使用您將使用的部分，更新組件，然后再嘗試其余部分。

以創(chuàng)建按鈕組件為例。 在Figma中，我們通過(guò)嵌套在整體組件中的形狀來(lái)改變按鈕的形狀； 在Figma中，完全不需要制作一個(gè)按鈕形狀的組件，你可以自由控制任何組件的圓角或?qū)嵗睆健?/p>

不同于Figma中修改組件形狀的方式

您還可以繼續(xù)使用設(shè)計(jì)系統(tǒng)中的遺留組件。 而且，組件需要先解組，排序重組，按照f(shuō)igma的規(guī)則變化。 這讓我想到了下一點(diǎn)。

2、順其自然，循序漸進(jìn)

組件級(jí)別

如果你是Figma的新手或者使用時(shí)間不長(zhǎng)，你會(huì)發(fā)現(xiàn)雖然Figma和Figma很相似，但是還是有很多功能你不懂，命名也排不上巧妙地設(shè)計(jì)系統(tǒng)的結(jié)構(gòu)，因?yàn)镕igma和Figma的文件組成邏輯不同。 ，通過(guò)示例中創(chuàng)建陰影樣式按鈕的方式可以看出區(qū)別，這將使色調(diào)和陰影形成獨(dú)立的樣式，但Figma不需要。

成分組成方法的區(qū)別

在 中，我們使用“/”來(lái)對(duì)組件進(jìn)行分類，確定組件之間的從屬關(guān)系。 Figma也是用“/”來(lái)進(jìn)行快速分組的，它的文件系統(tǒng)沒(méi)有那么精細(xì)，但是很麻煩，如果按照你想象的那樣使用。 最好保持結(jié)構(gòu)較淺（層次結(jié)構(gòu)較少），只為很少使用的內(nèi)容使用較深的文件夾。

你可能會(huì)問(wèn)“一開始沒(méi)有在Figma中整理好文件結(jié)構(gòu)怎么辦？” 事實(shí)上，F(xiàn)igma 有強(qiáng)大的管理能力，重命名和刪除東西都非常方便。 為什么要優(yōu)先組織文件，創(chuàng)建元素后很容易組織。 這對(duì)我們重建或更改設(shè)計(jì)系統(tǒng)特別有幫助，比如“按鈕+圖標(biāo)”的基本組件，你會(huì)發(fā)現(xiàn)它有兩種樣式：按鈕兩側(cè)的圖標(biāo)和按鈕左側(cè)的圖標(biāo)。 因此，有必要考慮哪些是基本組件，以及如何定義它們的級(jí)別。

雖然，大規(guī)模傳輸文件是更新迭代設(shè)計(jì)系統(tǒng)的好機(jī)會(huì)，但要么更改設(shè)計(jì)系統(tǒng)，要么更改文件結(jié)構(gòu)。

非常簡(jiǎn)單輕便

為了防止出錯(cuò)并避免花費(fèi)大量時(shí)間重新排列顏色和文本樣式，應(yīng)該首先創(chuàng)建整個(gè)工具包的核心——視口和文本樣式。 您從顏色和文本樣式等小事開始，然后轉(zhuǎn)向按鈕和輸入字段，并且不斷地定義、重命名和重組組件。 不要過(guò)多考慮文件夾和子文件夾，因?yàn)槟梢噪S時(shí)調(diào)整文件夾結(jié)構(gòu)以獲得最佳體驗(yàn)。

圖標(biāo)庫(kù)

3.使用全局和局部組件

Pages 全局系統(tǒng)頁(yè)面

我們經(jīng)常談到平衡設(shè)計(jì)系統(tǒng)的復(fù)雜性。 大致的意思是：你可以把全局設(shè)計(jì)組件看作是構(gòu)成設(shè)計(jì)的元素：圖標(biāo)、文字樣式、顏色、按鈕、頭像等，像“用戶頭像”或“搜索過(guò)濾器”這樣的組件，如果只是在一個(gè)產(chǎn)品中使用的話，不要放在全局系統(tǒng)中。

黃金法則：如果一個(gè)組件跨多個(gè)產(chǎn)品使用，請(qǐng)將其放在全局設(shè)計(jì)組件文件中。 如果它是產(chǎn)品獨(dú)有的，則將其放在本地組件文件中，并且在組件全球可用之前不要將其連接到全球設(shè)計(jì)系統(tǒng)。

我們的全局設(shè)計(jì)組件稱為 |Coresketch 圖標(biāo)打組，它只包含構(gòu)成我們?cè)O(shè)計(jì)系統(tǒng)的基本元素。 你可以理解為一組通用的基礎(chǔ)組件。 如果有人想在其他項(xiàng)目中使用這套組件，只需要告訴這個(gè)組件添加到哪個(gè)項(xiàng)目即可。 如果他們想將本地組件添加到公共基礎(chǔ)組件，只需將其移動(dòng)到那里即可。 不同的業(yè)務(wù)項(xiàng)目會(huì)有自己的業(yè)務(wù)組件庫(kù)。 我們這樣做是因?yàn)槲覀兛梢苑蛛x組件的維護(hù)權(quán)限。 不同項(xiàng)目組的設(shè)計(jì)師負(fù)責(zé)維護(hù)不同的組件，這一點(diǎn)很明確。

4.使用這個(gè)絕妙的方法

圖標(biāo)檢測(cè)器 9000

這個(gè)功能是無(wú)意中發(fā)現(xiàn)的，非常好用，簡(jiǎn)直像黑客一樣！ 當(dāng)我替換設(shè)計(jì)系統(tǒng)中的每個(gè)圖標(biāo)時(shí)，我需要知道哪些圖片已被替換，哪些沒(méi)有。 有哪些快速修復(fù)方法？ 雖然非常簡(jiǎn)單，但在調(diào)整圖標(biāo)大小時(shí)，我使用網(wǎng)格線來(lái)確保每個(gè)圖標(biāo)的大小和位置都正確，而且效果非常好——就像一棵新年樹突出了我當(dāng)前項(xiàng)目圖標(biāo)中的所有更新，我可以立即看到圖標(biāo)已被替換的地方，太棒了！

5.善用插件

批量重命名

Figma 最令人驚奇的事情之一就是您可以使用的各種插件，老實(shí)說(shuō)，其中一些真的讓我感到驚訝。 在這個(gè)設(shè)計(jì)遷移過(guò)程中，你會(huì)遇到很多問(wèn)題，比如“我如何將這些畫板全部從CRM-XX-XX批量重命名為XX-XX？”等等，你可以找插件幫你解決他們。

網(wǎng)上分享了很多好用的插件，我簡(jiǎn)單整理了一下：

實(shí)例查找器()

重命名(It)——可以解決上面提到的重命名問(wèn)題

圖像跟蹤器（圖像）

拼寫檢查器（）

ps 別忘了快捷鍵Shift+Cmd+P，下次運(yùn)行插件可以重新運(yùn)行。 超級(jí)有用。

pss學(xué)習(xí)了快捷鍵Cmd+K，用于從組中創(chuàng)建組件sketch 圖標(biāo)打組，有時(shí)候很有用。

6.整個(gè)團(tuán)隊(duì)負(fù)責(zé)遷移

一些設(shè)計(jì)師喜歡改變，另一些則反對(duì)。 當(dāng)您的團(tuán)隊(duì)是一個(gè)熱愛(ài)學(xué)習(xí)和擁抱變化的團(tuán)隊(duì)時(shí)，他們就更容易接受并習(xí)慣 Figma 及其新穎性。

別搞錯(cuò)了，必須有人帶頭做這件事，而那個(gè)人很可能就是你。 你需要向你的團(tuán)隊(duì)展示 Figma 是如何創(chuàng)建界面的，比如連接元素，向全局系統(tǒng)添加圖標(biāo)等。未來(lái)，團(tuán)隊(duì)必須共同努力才能完成這件事。 雖然設(shè)計(jì)是一種協(xié)作型的工作，但只有統(tǒng)一目標(biāo)，才能更有效率地工作。

一般來(lái)說(shuō)，從一種工具遷移到另一種設(shè)計(jì)工具并不是一件很復(fù)雜的事情。 我希望這篇文章對(duì)勇敢的設(shè)計(jì)遷移者有用。 同時(shí)，我也希望你將你的設(shè)計(jì)系統(tǒng)遷移到 Figma 的過(guò)程比我的更順利。 Figma 是一個(gè)很棒的工具，我推薦給任何喜歡一起工作的團(tuán)隊(duì)！

原來(lái)的：

如有侵權(quán)請(qǐng)聯(lián)系刪除！