▲點(diǎn)擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們

歡迎來到專業(yè)設(shè)計(jì)師學(xué)習(xí)交流社區(qū)

三分設(shè)｜連接知識(shí)，幫助全球 1 億設(shè)計(jì)師成長(zhǎng)

阿里巴巴設(shè)計(jì)官方認(rèn)證 MCN 機(jī)構(gòu)

SUXA 深圳體驗(yàn)設(shè)計(jì)協(xié)會(huì)華東分會(huì)

全球服務(wù)設(shè)計(jì)共創(chuàng)節(jié)城市站發(fā)起者

轉(zhuǎn)自：TCC翻譯情報(bào)局

編輯：劉麗

共 3760 字，預(yù)計(jì)閱讀 10 分鐘

在相當(dāng)長(zhǎng)一段時(shí)間來，Sketch 一直是用戶體驗(yàn)設(shè)計(jì)師的首選應(yīng)用。但是在過去的一兩年里，我們可以看到許多新的競(jìng)爭(zhēng)者在搶占 Sketch 的市場(chǎng)份額，其中取得明顯成效是 Figma 和 Adobe XD。國(guó)內(nèi)也有相當(dāng)多的團(tuán)隊(duì)已經(jīng)從 Sketch 切換到了 Figma 在本文中，本文敘述了作者帶領(lǐng)團(tuán)隊(duì)從 Sketch 切換到 Figma 后的一些易錯(cuò)點(diǎn)，希望對(duì)大家有所幫助。

經(jīng)過幾個(gè)月的籌劃，我們終于決定將設(shè)計(jì)稿從 Sketch、Invision、Craft 和 Abstract 全部遷移到 Figma。全部遷移完成后，我們聚集在會(huì)議室，激動(dòng)之情溢于言表。當(dāng)我們導(dǎo)入每個(gè)項(xiàng)目的每一個(gè)草圖文件后，才發(fā)現(xiàn)：哎，我們的整個(gè)設(shè)計(jì)系統(tǒng)不能像以前那樣操作了。

在我看來，F(xiàn)igma 是目前市場(chǎng)上性價(jià)比最高的設(shè)計(jì)工具。但把設(shè)計(jì)項(xiàng)目從 Sketch 遷移到 Figma 并不像某些文章描述地那樣容易。

我們的這次設(shè)計(jì)遷移雖然非常艱難，甚至接連受挫，經(jīng)歷了很多失誤，但好在已經(jīng)完全成功，并沉淀了相當(dāng)多的經(jīng)驗(yàn)。我希望通過這篇文章的總結(jié)，將軟件遷移時(shí)遇到的問題告訴大家，明確哪些該做哪些不該做，能幫助其他團(tuán)隊(duì)將他們的系統(tǒng)快速的遷移到 Figma。

一、從「新」開始

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

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

一定要保留原始文件，再創(chuàng)建一個(gè)新文件。Sketch 設(shè)計(jì)系統(tǒng)并不能完美地轉(zhuǎn)移到 Figma 系統(tǒng)中，組件樣式容易產(chǎn)生混亂，所以需要根據(jù) Figma 的規(guī)則來創(chuàng)建組件的屬性樣式。我建議，先使用你會(huì)用的部分，進(jìn)行組件更新，再嘗試其余的。

以創(chuàng)建按鈕組件為例，在 Sketch 中，我們通過整體組件中嵌套的形狀修改按鈕的形狀；在 Figma 中，完全不需要制作按鈕的形狀組件，可以自由地控制任何組件或者實(shí)例的圓角半徑。

Sketch 和 Figma 中更改組件形狀的方法差異

你也可以繼續(xù)使用設(shè)計(jì)系統(tǒng)中的舊組件。但是，需要先解組組件，整理好并重新分組，按照 Figma 的規(guī)則修改。這就涉及到了我要說的下一點(diǎn)。

二、順其自然，一步步來

組件層級(jí)

如果你是 Figma 的新手或使用過一小段時(shí)間，會(huì)發(fā)現(xiàn) Figma 和 Sketch 雖然相似，但還是有許多不了解的功能，也不能巧妙地安排好設(shè)計(jì)系統(tǒng)的命名架構(gòu)，因?yàn)?Figma 和 Sketch 的文件組成邏輯不一樣，通過案例中創(chuàng)建陰影樣式按鈕的方式可以看出差別，Sketch 會(huì)讓色彩和陰影構(gòu)成一個(gè)獨(dú)立的樣式，而 Figma 則不需要。

組件構(gòu)成方式的區(qū)別

在 Sketch 中，我們使用 " / " 來為組件做結(jié)構(gòu)分級(jí)，確定組件之間的從屬關(guān)系。Figma 也是使用 “ / ” 進(jìn)行快速分組，但是它的文件系統(tǒng)并不那么精細(xì)，反而很麻煩，如果你想像 Sketch 一樣使用它的話。最好是保持淺層結(jié)構(gòu)（較少的層級(jí)），這種深層的文件夾只適用于那種很少使用的內(nèi)容。

你可能會(huì)問 "如果一開始沒有在 Figma 中整理好文件結(jié)構(gòu)，我該怎么辦？"，實(shí)際上，Figma 有一個(gè)超強(qiáng)的管理能力，重命名和刪除東西都非常方便。你不必優(yōu)先考慮整理文件，元素都創(chuàng)建好之后再整理也很輕松。這非常有利于我們重新搭建或是修改設(shè)計(jì)系統(tǒng)，比如 “按鈕 + 圖標(biāo)” 這樣的基礎(chǔ)組件，你會(huì)意識(shí)到它有兩種樣式：圖標(biāo)位于按鈕的右側(cè)和圖標(biāo)位于按鈕左側(cè)。所以，需要思考基本組件有哪些，該怎么定義它們的層級(jí)。

其實(shí)，大規(guī)模的轉(zhuǎn)移文件是更新迭代設(shè)計(jì)系統(tǒng)的好機(jī)會(huì)，要么改變你的設(shè)計(jì)系統(tǒng)，要么你改變你的文件架構(gòu)。

非常簡(jiǎn)單、輕巧

為了避免出錯(cuò)，同時(shí)避免花費(fèi)大量的時(shí)間來重新規(guī)整配色和文本樣式，所以，首先應(yīng)該創(chuàng)建整個(gè)工具包的核心 -- 圖層和文本樣式。先從顏色和文本樣式等小的方面開始，然后再到按鈕和輸入框，之后你不斷地對(duì)組件進(jìn)行劃分、重命名和重組。不用過多地考慮文件夾和子文件夾，因?yàn)槟憧梢噪S時(shí)調(diào)整文件夾結(jié)構(gòu)以獲得最佳體驗(yàn)。

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

三、使用全局和本地組件

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

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

黃金法則：如果一個(gè)組件 跨越多個(gè)產(chǎn)品被使用，就把它放在 全局設(shè)計(jì)組件 文件中。如果它是某個(gè) 產(chǎn)品獨(dú)有 的，就把它放在 本地組件 文件中，直到在全局范圍內(nèi)該組件，才將它移動(dòng)至全局設(shè)計(jì)系統(tǒng)中。

我們的全局設(shè)計(jì)組件名叫 Oxygen | Core，它只包含構(gòu)成我們?cè)O(shè)計(jì)系統(tǒng)的基本元素，你可以理解它是一套 公共基礎(chǔ)組件。如果有人想在其他項(xiàng)目中使用該套組件，他們只需要講組件添加到那個(gè)項(xiàng)目就好了，如果想把本地的組件添加到公共基礎(chǔ)組件中，移過去就好了。不同的業(yè)務(wù)項(xiàng)目會(huì)有自己的 業(yè)務(wù)組件庫(kù)，我們這樣做是因?yàn)槟軐⒔M件的維護(hù)權(quán)限分開，不同的項(xiàng)目團(tuán)隊(duì)的設(shè)計(jì)師負(fù)責(zé)維護(hù)不同的組件，清晰明了。

四、使用這個(gè)絕妙的技巧

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

我意外的發(fā)現(xiàn)了這個(gè)功能，非常好用，簡(jiǎn)直像黑客一樣！當(dāng)我在替換設(shè)計(jì)系統(tǒng)中的每一個(gè)圖標(biāo)時(shí)，需要知道哪些圖片被替換了，哪些還沒有。有什么快速的辦法呢？其實(shí)非常簡(jiǎn)單，在調(diào)整圖標(biāo)大小時(shí)，我使用了 網(wǎng)格線 來確保每個(gè)圖標(biāo)的大小和位置是正確的，它有一個(gè)非常棒的效果 —— 像圣誕樹一樣點(diǎn)明了我當(dāng)前項(xiàng)目中所有更新了的圖標(biāo)，我立即能看到哪里的圖標(biāo)被替換了，簡(jiǎn)直太棒了！

五、善用插件

批量重命名

Figma 最神奇的地方之一就是你可以使用各種各樣的插件，說實(shí)話，有些插件令我非常驚喜。在本次設(shè)計(jì)遷移過程中，你會(huì)面臨很多問題，比如 "我怎么把這些畫板全部批量從 CRM - XX - XX 重命名為 XX - XX？" 等等，都能找到插件幫你解決。

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

實(shí)例查找器（Instance Finder）

重命名（Rename It）-- 可以解決上文提到的重命名的問題

圖像跟蹤器（Image Tracer）

拼寫檢查器（Spellchecker）

p.s. 別忘了快捷鍵 Shift + Cmd + P，它能重新運(yùn)行你上次運(yùn)行的插件。超級(jí)有用。

p.s.s. 學(xué)習(xí)快捷鍵 Cmd + K，用于從一個(gè)組中創(chuàng)建組件，有時(shí)非常有用。

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

有些設(shè)計(jì)師喜歡變化，有的也會(huì)抗拒。當(dāng)你的團(tuán)隊(duì)是那種熱愛學(xué)習(xí)善于擁抱變化的團(tuán)隊(duì)時(shí)，他們更容易接受并習(xí)慣 Figma 和它的新奇特點(diǎn)。

毫無(wú)疑問，必須有一些人需要帶頭做這件事，當(dāng)然這個(gè)人很有可能是你。你需要向你的團(tuán)隊(duì)展示 Figma 如何創(chuàng)建界面的，比如讓移動(dòng)元素，在全局系統(tǒng)中添加圖標(biāo)等等。之后還得團(tuán)隊(duì)一起來完成這件事，畢竟設(shè)計(jì)是協(xié)同的工種，只有大家統(tǒng)一了目標(biāo)做事才能更加高效。

總的來說，從一個(gè)工具遷移到另一個(gè)設(shè)計(jì)工具并不是一件非常復(fù)雜的事，我希望這篇文章對(duì)你們這些勇敢的設(shè)計(jì)遷移者們有用，同時(shí)，我也希望你們將設(shè)計(jì)系統(tǒng)遷移到 Figma 的過程比我更順利。Figma 是一個(gè)非常好的工具，我向任何喜歡協(xié)同工作的團(tuán)隊(duì)推薦它！

原文：https://uxdesign.cc/dont-make-the-mistakes-i-did-moving-your-design-system-from-sketch-to-figma-11002c43b29f

作者：Zandre Coetzer

譯者：曹競(jìng)羽

審核：張聿彤

超值課程推薦

華為用戶體驗(yàn)設(shè)計(jì)的體系搭建方法

超 10 億用戶的產(chǎn)品，到底是怎么做用戶體驗(yàn)的？

揭秘滴滴、蔚來等大廠的用戶體驗(yàn)設(shè)計(jì)策略

原創(chuàng)好文推薦

一款為你帶來難忘體驗(yàn)的美食 APP

Web Vitals —— 谷歌的新一代 Web 性能體驗(yàn)和質(zhì)量指標(biāo)

2021 年用戶體驗(yàn)設(shè)計(jì)趨勢(shì)分析