I distinctly remember how much hatred I had in my heart when I lived through my first UI update. The year was 2009; I had just gotten my braces off and I was ready to smash that ‘Like’ button on my high school crush’s status when I logged into Facebook the first time that week. I was devastated to find that something looked a miss. Text navigation was replaced with iconography, event reminders were further down on the page, and it was altogether unsettling. Who did this? I had just gotten comfortable navigating around the site like a pro, cultivating Farmville success like you wouldn’t believe while returning meaningless ‘Pokes’ at lightning speed. I knew that functionally, the site was the same, but it felt like my furniture had been completely rearranged while I wasn’t home.

我清楚地記得當我經歷第一次UI更新時，我內心深處的仇恨。 那是2009年； 我剛剛脫下牙套，當我本周第一次登錄Facebook時，我準備粉碎高中戀人狀態上的“贊”按鈕。 我很沮喪地發現有些東西似乎錯過了。 文字導航被圖標代替，事件提醒在頁面上更靠后，這完全令人不安。 這是誰做的？ 我剛剛像專業人士一樣輕松地瀏覽了該站點，培養了Farmville的成功，就像您以閃電般的速度返回毫無意義的“ Pokes”時您不會相信的那樣。 我知道從功能上來說，站點是相同的，但是感覺好像我不在家里時家具已經完全重新布置了。

Years down the line, I find myself sitting at the other end of the table, working as an Experience Designer, being the very change that I hated so much on that brace-less day. I’ve learned to appreciate the change and ~generally speaking~ improvements that I experience through the UI updates of my favorite applications. But it’s only human to be resistant to change.

幾年下來，我發現自己坐在桌子的另一端，作為體驗設計師工作，這是我在那無括號的日子里非常討厭的變化。 我已經學會了通過我最喜歡的應用程序的UI更新體驗到的變化和?通常來說?的改進。 但這是人類抵抗變化的唯一能力。

I, like many other designers who had made the bold switch from prototyping in Photoshop to prototyping in Sketch years ago, was all-in on Sketch and tended to cover my ears and rock back and forth when I heard people talk about Figma. I felt like I’d been ahead of the curve by using Sketch. I remember having to lobby for my UX team in a previous role to make the switch from Photoshop to Sketch. And a little over 2 years later, the current shifts again.

我和其他許多設計師一樣，在多年前從Photoshop中的原型制作轉向Sketch中的原型制作，就如同其他設計師一樣，我全神貫注于Sketch，當我聽到人們談論Figma時，往往會捂住我的耳朵，來回晃動。 我覺得我通過使用Sketch一直處于領先地位。 我記得以前必須要游說我的UX團隊，才能從Photoshop切換到Sketch。 兩年多一點之后，潮流又發生了變化。

In my current role at Slalom Consulting, the Experience Design Team is extremely agile and adaptable. In order to serve a variety of clients with differing tech stacks, we have to be ready to deliver quality work through Sketch, Figma, Axure, and the list continues to grow.

在我目前在Slalom Consulting的職位上，體驗設計團隊非常靈活且適應能力強。 為了為具有不同技術堆棧的各種客戶提供服務，我們必須準備通過Sketch，Figma，Axure提供高質量的工作，并且列表還在不斷增加。

Designers are notoriously picky people, it’s what makes us good at what we do. So, switching from our bread and butter to a toasted croissant is not the easiest thing for us. But, if you stop to think, you may realize croissants are just bread dough with baked-in layers of butter.

設計師是挑剔的人，這就是使我們擅長做事的原因。 因此，從我們的面包和黃油換成烤的羊角面包對我們來說不是最容易的事情。 但是，如果您停止思考，您可能會發現羊角面包只是面包面團，上面夾有黃油。

If you’ve been Figma-curious, I offer you this brief walk through of what you’ll gain, what you’ll lose, and what will be primarily the same but just different enough to drive you insane for several weeks.

如果您一直對Figma感到好奇，那么我將向您簡要介紹一下您將獲得的收益，所遭受的損失以及基本相同但又有所不同的內容，足以使您瘋狂數周。

基本原理 (Fundamentals)

• Both tools are top of line. If you’re new on the block and are coming to either of these tools for the first time, know that you have already made a good choice. Either tool is an absolute state-of-the-art prototyping software and no one would argue otherwise. Chances are, you’ll just like whatever feels most similar to the tools you come from!

  兩種工具都是最重要的。 如果您是新手，并且是第一次使用這兩種工具，請知道您已經是一個不錯的選擇。 每種工具都是絕對的最新原型軟件，沒有人會反對。 您可能會喜歡與您所使用的工具最相似的東西！

• Sketch runs on Mac OS only. Figma is a browser-based application that also has Desktop Apps for Mac, and Windows. It sure sounds nice that Figma has 3+ options, but you probably only really need one. And if you’re a designer, chances are you live and die by your Macbook, so both options are a fit. Don’t let this be a deciding factor to you if you don’t plan on collaborating cross-platform. (However, do consider that being a web-based platform, Figma stores all of your design files in the cloud, freeing up space on your hard drive, and ensuring your most-up-to-date files are accessible from any machine with an internet browser.)

  Sketch僅在Mac OS上運行。 Figma是一個基于瀏覽器的應用程序，還具有Mac和Windows桌面應用程序。 Figma擁有3種以上的選擇，這聽起來確實不錯，但是您可能只需要一個即可。 而且，如果您是設計師，那么Macbook可能會生死攸關，因此這兩種選擇都是合適的。 如果您不打算跨平臺協作，請不要將其作為決定因素。 (但是，請務必將Figma作為基于Web的平臺，將所有設計文件存儲在云中，以釋放硬盤驅動器上的空間，并確保可從任何具有以下功能的計算機上訪問最新文件：網絡瀏覽器。)

• Figma offers Real-Time collaboration. Sketch has workarounds. From the start, Figma has had the capability to allow multiple designers, developers, and/or content teams to be simultaneously working in one file. Similar to editing a Google Doc with multiple people, or collaborating in Miro. This ability is extremely beneficial if your design team is working in tandem on a shared file. Version control is never an issue in Figma.

  Figma提供實時協作。 Sketch具有解決方法。 從一開始，Figma就具有允許多個設計人員，開發人員和/或內容團隊同時在一個文件中工作的功能。 與多人編輯Google文檔或在Miro中進行協作相似。 如果您的設計團隊正在處理共享文件，則此功能非常有用。 在Figma中，版本控制絕不是問題。

• In Sketch, collaborating in a file with other designers can be tricky. For instance, imagine your design team is managing a comprehensive design system or a framework style guide. Your teammate is designing a set of new components while you have been managing typography. The changes you make to the text styles will impact any components that include text so you have to be in constant communication about who is hitting the save button when. You may even become blocked by your teammate out of fear that you’ll override their work if you start before they’re done. Aside from team communication, Sketch does offers a handful of workarounds that can help with version management. Plugins like Abstract and the recently launched Sketch Teams are made to circumvent this issue, though they’re not foolproof.

  在Sketch中，與其他設計師在文件中進行協作可能很棘手。 例如，假設您的設計團隊正在管理一個全面的設計系統或框架樣式指南。 在您管理版式時，您的隊友正在設計一組新組件。 您對文本樣式所做的更改將影響包括文本在內的所有組件，因此您必須始終保持溝通，了解何時有人點擊保存按鈕。 您甚至可能因為擔心在開始之前就忽略他們的工作而被隊友擋住。 除了團隊溝通之外，Sketch確實提供了一些變通辦法，可以幫助進行版本管理。 諸如Abstract之類的插件和最近推出的Sketch Teams都是為了規避此問題而制作的，盡管它們并非萬無一失。

• Figma has more sophisticated, built-in developer hand-off capabilities. To belabor the point of Figma’s robust collaboration, it was created with cross-functional teams in mind, specifically design and development teams. Figma has a built-in panel view for developers accessing the file. It allows them to view the specifications for CSS, iOS, and Android instantly as designs are updated. Sketch’s built-in capabilities are limited to allowing the user to right click on an element and “Copy CSS”. However, Sketch has plugins and integrations aplenty to serve development teams just as well as Figma.

  Figma具有更復雜的內置開發者移交功能。 為了不讓Figma進行強大的協作，我們在創建時就考慮了跨職能團隊，特別是設計和開發團隊。 Figma具有供開發人員訪問文件的內置面板視圖。 隨著設計的更新，它使他們可以立即查看CSS，iOS和Android的規范。 Sketch的內置功能僅限于允許用戶右鍵單擊元素并“復制CSS”。 但是，Sketch具有與Figma一樣的大量插件和集成服務于開發團隊。

• When it comes to resources, Sketch takes the cake. Sketch has been around longer and has a much larger community than Figma thus far. There’s almost an infinite amount of icon libraries, design systems files, app plugins, vector illustrations, etc. made just for Sketch. The great thing about being a Sketch veteran is as you get more comfortable working in the tool and want for some automation of tedious tasks, all you need do is ask! Search for a solution and you shall receive.

  在資源方面，Sketch承擔了重任。 到目前為止，Sketch的時間更長，并且社區比Figma大得多。 專為Sketch制作的圖標庫，設計系統文件，應用程序插件，矢量插圖等幾乎無限。 成為Sketch老手的好處在于，您可以更輕松地使用該工具，并且想要一些繁瑣的任務自動化，您所要做的就是問問！ 搜索解決方案，您將收到。

  In contrast Figma finally released plugin functionality in the Fall of 2019, starting off with a modest 40 public plugins. That being said, I’m sure that Figma will catch up quickly as its popularity momentum continues to heat up. One of my co-workers actually created a Figma plugin called

  相比之下，Figma最終于2019年秋季發布了插件功能，從適度的40個公共插件開始。 話雖這么說，但我敢肯定，隨著Figma的普及勢頭持續升溫，它將很快趕上。 我的一位同事實際上創建了一個名為Figma的插件

  Conditioner in his spare time, so make that 41+ plugins!

  業余時間使用調節器 ，因此可以制作41個以上的插件！

畫板(素描)與畫框(Figma)： (Artboards(Sketch) vs Frames (Figma):)

• Artboards — Sketch uses the term ‘Artboard’ to describe the highesst-level container of your design content. Both Sketch and Figma support pinning and re-sizing rules within the ‘Artboard’ and work essentially the same way, with the notable exception that Sketch does not support nested artboards.

  畫板 — Sketch使用術語“畫板”來描述設計內容的最高級容器。 Sketch和Figma都支持“畫板”中的固定和調整大小規則，并且基本上以相同的方式工作，但值得注意的例外是Sketch不支持嵌套畫板。

• Frames — Figma uses the term ‘Frame’ to describe the top-level container of your design content. What makes Frames more powerful than Artboards is the ability to nest them. Each frame can have it’s own layout grid, sizing preferences, and content clipping preferences. Figma’s approach intentionally translates better to a development rationale in which you would use “frames” or “divs” to hold sets of content.

  框架 -Figma使用術語“框架”來描述設計內容的頂級容器。 使Frames比Artboards更強大的是嵌套功能。 每個框架都可以具有自己的布局網格，大小調整首選項和內容剪輯首選項。 Figma的方法有意更好地轉化為一種開發原理，在這種開發原理中，您將使用“框架”或“ divs”來保存內容集。

符號與組件 (Symbols vs Components)

• Symbols — Sketch creates a page in your file called “Symbols” as soon as you designate your first one. This is by design and it can be very useful for keeping track of and updating your symbols. Editing your Master component will apply that change to all of the instances without existing overrides. You can also quickly locate symbols in the “Components” panel to search through Symbols. Text Styles, and Layer Styles you’ve designated.

  符號 -指定第一個符號后 ，Sketch會在文件中創建一個名為“符號”的頁面。 這是設計使然，對于跟蹤和更新符號非常有用。 編輯您的Master組件會將所做的更改應用于沒有現有替代的所有實例。 您也可以在“組件”面板中快速找到符號，以搜索符號。 您指定的文字樣式和圖層樣式。

• Figma — Figma’s equivalent of Symbols are called Components. Unlike Sketch, Figma doesn’t move or duplicate your master Component into its own page. Your master component lives wherever it was created and can move to whatever page you’d like it on. This can be a bit of an adjustment if you’re used to seeing all your symbols nicely displayed in a page view. But fear not, you can navigate to them and edit them just as quickly as in Sketch by finding each Master Component within the Assets panel, similar to Sketch’s Components Panel. The Assets Panel will show you all of your locally created components as well as any enabled library’s components.

  Figma — Figma的“ Symbol”等效于“組件”。 與Sketch不同，Figma不會將主組件移動或復制到其自己的頁面中。 您的主組件可以放置在任何創建的位置，并且可以移動到所需的任何頁面。 如果您習慣于在頁面視圖中很好地顯示所有符號，則這可能會有所調整。 但是請不要擔心，您可以通過在Assets面板中找到每個Master Component來像在Sketch中一樣快速地導航和編輯它們，類似于Sketch的Components面板。 資產面板將向您顯示所有本地創建的組件以及任何已啟用的庫的組件。

矢量網絡 (Vector Networks)

Figma challenges what a prototyping tool can do with its invented concept of vector networks. If you’ve ever made a donut chart in Sketch, you can appreciate this.

Figma挑戰了原型工具可以利用其發明的矢量網絡概念實現的功能。 如果您曾經在Sketch中制作過甜甜圈圖，則可以欣賞一下。

While Figma may have Sketch beat with it’s ability to quickly make donut charts, rest easy knowing that the unspoken Sketch motto goes: “There’s a plugin for that”. In fact, there’s your choice of plugins for that and pretty much everything else.

雖然Figma可以快速制作甜甜圈圖，但它具有Sketch Beat的能力，但請放心，潛意識中的Sketch座右銘是： “有一個插件” 。 實際上，您可以選擇用于此的插件以及幾乎所有其他插件。

A vector network takes the concept of paths — think back to Photoshop’s pen tool — and adds a much needed degree of freedom. Paths and the pen tool work the same way a machine drawing lines with a pen would work. It follows a chain of lines and curves from a start point to an endpoint, not able to lift up until the path is completed.

向量網絡采用路徑的概念-回想一下Photoshop的鋼筆工具-并增加了非常需要的自由度。 路徑和筆工具的工作方式與機器用筆繪制線的工作方式相同。 它從起點到終點遵循一連串的直線和曲線，直到路徑完成后才能抬起。

This means if you’re drawing a shape with intersecting or perpendicular lines, you’ll need to create multiple paths. Vector networks improved this age old technology by allowing lines and curves between any two points rather than needing to following a single chain.

這意味著，如果要使用相交或垂直的線來繪制形狀，則需要創建多個路徑。 矢量網絡通過允許任意兩個點之間的直線和曲線而不需要遵循一條鏈來改進了這一古老的技術。

Beyond reinventing paths, Figma’s vector networks also improve upon direction manipulation and object filling. I won’t pretend to be an expert on the subject matter of geometry and pen tools physics, but if it piques your interest, I highly recommend glancing over Figma’s explanation of their vector networks.

除了重塑路徑，Figma的向量網絡還改善了方向操縱和對象填充。 我不會假裝自己是幾何和鋼筆工具物理領域的專家，但是如果它激起了您的興趣，我強烈建議您瀏覽一下Figma對它們的矢量網絡的解釋 。

One thing I have to warn you about vector networks is that they are good design. Which means, *drumroll* you probably won’t notice them! If you are a design geek like myself you are probably gushing over the words you just read on the improvement vector networks make. But truth be told, my imposter syndrome had a good toy with me when, some two months into using Figma, I learned that there was any difference at all between Figma’s pen tool and every other pen tool I’ve ever used. However, I was somewhat relieved to read that in Figma’s own user testing, they discovered that many designers didn’t notice the difference between vector networks and paths. The tool just worked the way they expected it to!

關于矢量網絡，我必須警告您的一件事是它們是好的設計 。 這意味著，* drumroll *您可能不會注意到它們！ 如果您是像我這樣的設計極客，那么您可能會迷惑于剛剛在改進矢量網絡上讀到的單詞。 但是說實話，當使用Figma大約兩個月后，我得知我的冒名頂替綜合癥很好玩，我發現Figma的鋼筆工具與我使用過的所有其他鋼筆工具之間根本沒有任何區別。 但是，讓我有些欣慰的是，在Figma的用戶測試中，他們發現許多設計人員沒有注意到矢量網絡和路徑之間的區別。 該工具以他們期望的方式發揮了作用！

Embrace the Adjustment Period

接受調整期

If you‘re coming from Sketch and finally ready to give Figma the old College try, get ready for a little turbulence during the adjustment period. The tools work almost identically but I’m just warning you not to pull your hair out when you’re still looking for the phantom ‘Create Symbol’ button 3 hours into using Figma. The muscle memory will get there.

如果您來自Sketch，最后準備給Figma做舊的學院嘗試，請準備在調整期間稍作動搖。 這些工具的工作原理幾乎相同，但我只是警告您在使用Figma 3小時后仍在尋找幻像“創建符號”按鈕時，不要拉扯頭發。 肌肉記憶會到達那里。

TL;DR: Figma is the future, but Sketch has an unmatched wealth of resources. Follow your heart!

TL; DR： Figma是未來，但Sketch具有無與倫比的豐富資源。 跟隨你的心！