從2019年設(shè)計(jì)工具調(diào)查報(bào)告中可以看出，Sketch作為UI設(shè)計(jì)界的扛把子雄踞了多項(xiàng)榜首，但是2020年突如其來的疫情，讓許多人不得不在家辦公，這時(shí)候團(tuán)隊(duì)協(xié)作就變得格外重要。也正是借助這一時(shí)機(jī)，F(xiàn)igma的用戶量在最近一年開始瘋漲，很多國外的團(tuán)隊(duì)紛紛拋棄了Sketch，投入了這一設(shè)計(jì)界小鮮肉的懷抱，不論是我之前實(shí)習(xí)的小團(tuán)隊(duì)，還是現(xiàn)在正式工作的大公司，都在使用Figma作為首選的設(shè)計(jì)工具。雖然2020年的調(diào)研報(bào)告還未出爐，但是結(jié)果已經(jīng)可想而知，設(shè)計(jì)工具屆的頭把交椅非Figma莫屬。
目前國內(nèi)UI設(shè)計(jì)的主流工具依然是Sketch，但是一些科技巨頭公司像百度、騰訊、阿里巴巴已經(jīng)開始逐漸將項(xiàng)目轉(zhuǎn)移到Figma，相信不久的將來，這種趨勢會(huì)越來越明顯。Figma接下來的動(dòng)作勢必會(huì)在互聯(lián)網(wǎng)屆掀起一場巨大的革命，它徹底顛覆了我們以往的工作模式，強(qiáng)大的在線協(xié)作功能讓設(shè)計(jì)師和程序員之間的合作越來越緊密，云端存儲(chǔ)、實(shí)時(shí)更新、版本回退等功能讓設(shè)計(jì)流程越來越順暢，設(shè)計(jì)師再也不用被改回第一稿的恐懼所支配。
目前云端存儲(chǔ)功能已經(jīng)幫助用戶節(jié)省了2000%的空間，生產(chǎn)力大幅提高之后，終結(jié)996、按時(shí)下班也就指日可待了。
在9月17日的早上，CEO Dylan在Config Europe上宣布了Figma接下來的幾項(xiàng)重大更新。本次演講的主題是<打破代碼與設(shè)計(jì)之間的技術(shù)壁壘>，在產(chǎn)品研發(fā)的過程中，代碼與設(shè)計(jì)之間一直存在一些看似難以跨越的障礙，在設(shè)計(jì)師的眼中，他們看重的是該去設(shè)計(jì)什么樣的產(chǎn)品，而在開發(fā)人員關(guān)注的是如何實(shí)現(xiàn)產(chǎn)品的功能。
在以往的工作流程中，設(shè)計(jì)和開發(fā)是兩個(gè)不同的職業(yè)領(lǐng)域，他們分別使用不同的工具。在團(tuán)隊(duì)中，他們一起相互合作，讓產(chǎn)品最終從概念變成現(xiàn)實(shí)，最終被用戶們所使用。盡管他們的工作內(nèi)容有所不同，但是每一個(gè)人都發(fā)揮著重要的作用。設(shè)計(jì)師們對(duì)于產(chǎn)品形態(tài)、外觀進(jìn)行創(chuàng)造性和突破性的探索，開發(fā)人員選擇最安全、可靠的方法來構(gòu)建它們。
但是結(jié)果是，在這個(gè)過程中不可避免的會(huì)產(chǎn)生一些矛盾，程序員們認(rèn)為，在設(shè)計(jì)師看來那些有創(chuàng)造力的設(shè)計(jì)給他們的開發(fā)工作帶來了很大的挑戰(zhàn)和困難；而在開發(fā)人員看來比較合理的設(shè)計(jì)方法，設(shè)計(jì)師們又會(huì)覺得不夠有設(shè)計(jì)感。
Figma的愿景就是打破這些隔閡，在保證代碼的嚴(yán)謹(jǐn)性和可用性的同時(shí)，給予設(shè)計(jì)師們極大的自由探索和創(chuàng)造的空間，以最小的更新成本，加快產(chǎn)品的迭代速度。
Figma接下來更新的幾項(xiàng)功能，會(huì)幫助開發(fā)人員更直觀的理解設(shè)計(jì)稿，同時(shí)高效的將之轉(zhuǎn)化為可執(zhí)行的代碼，免去了大量的重復(fù)且低效的體力勞動(dòng)。
代碼組件庫與設(shè)計(jì)組件庫的融合（Variants）
團(tuán)隊(duì)中通常需要維護(hù)兩套組件，一套是設(shè)計(jì)文件，一套是開發(fā)文件。雖然這是常規(guī)操作，看起來也十分有效，但是兩個(gè)庫如果可以達(dá)到統(tǒng)一，那么開發(fā)人員就可以快速的將設(shè)計(jì)文件轉(zhuǎn)換成代碼，這樣，整個(gè)開發(fā)進(jìn)程就會(huì)更加高效。所以Figma將要宣布的第一個(gè)新功能就是Variants，它是一個(gè)新的可交互組件，在Auto Layout的基礎(chǔ)上進(jìn)行了升級(jí)和改進(jìn)，可以幫助團(tuán)隊(duì)實(shí)現(xiàn)上述功能。
通過Variants連接設(shè)計(jì)和開發(fā)組件（將于11月上線）
針對(duì)于不同的情況，組件會(huì)呈現(xiàn)不同的狀態(tài)。在開發(fā)中，一個(gè)組件往往會(huì)有各種不同的視覺樣式。例如，一個(gè)按鈕組件或許會(huì)分為主要按鈕和次要按鈕，大尺寸和小尺寸，以及針對(duì)iOS和Android的不同版本。目前這樣的按鈕將用不同的組件表示，每一個(gè)都有不同的視覺樣式，這時(shí)候，設(shè)計(jì)和代碼之間的這種不匹配就會(huì)導(dǎo)致設(shè)計(jì)和開發(fā)兩方溝通不暢，最終拖慢開發(fā)進(jìn)程。
為了解決這個(gè)問題，F(xiàn)igma推出了Variants，它可以在邏輯上，將由同一個(gè)組件變體出來的、具有相同功能的一系列子組件重新歸類到一起，這個(gè)集成了父組件和子組件群的、功能更強(qiáng)大的組件就叫做Variant?？赡苓@段話理解起來有點(diǎn)繞，其實(shí)意思就是將組件們?cè)俅未蚪M，形成一個(gè)“更大的組件“就是Variant。為了簡化配置面板，這個(gè)更新讓設(shè)計(jì)組件們，可以更好的轉(zhuǎn)換成程序代碼。
通過拖拽，在原型中使用可交互的組件（將于明年1月份上線）
通過Variants，你可以將這些組件的不同交互狀態(tài)集合到一起，這時(shí)候你可能會(huì)想，那么我在制作可交互的原型時(shí)，是否能讓它們直接在同一個(gè)頁面中，在不同的狀態(tài)之間進(jìn)行切換。因?yàn)楝F(xiàn)在我們?nèi)绻胗梢粋€(gè)狀態(tài)轉(zhuǎn)換到另一個(gè)狀態(tài)，就需要再多復(fù)制一個(gè)頁面，而有些時(shí)候除了這個(gè)可交互組件的狀態(tài)改變，頁面中的其他的內(nèi)容都是不變的。
這些大量的重復(fù)內(nèi)容造成了頁面的視覺混亂，尤其當(dāng)設(shè)計(jì)師在演示一個(gè)交互邏輯非常復(fù)雜的產(chǎn)品原型時(shí)，混亂程度往往就會(huì)到達(dá)災(zāi)難級(jí)。
為了解決這個(gè)問題，F(xiàn)igma讓組件之間直接進(jìn)行交互，然后通過Variant將這些具有交互邏輯的組件集合在一起，設(shè)計(jì)師在設(shè)計(jì)稿中只需要使用Variant就可以繼承這個(gè)組件的所有交互行為，而不必再去為每一個(gè)交互狀態(tài)創(chuàng)建一個(gè)演示頁面，從而使原型制作更加高效。
更加符合代碼規(guī)則的Auto Layout布局（將于11月上線）
Figma的Auto Layout功能在2019年上線，為我們帶來了全新的布局規(guī)則，通過這一功能設(shè)計(jì)師們不需要再去手動(dòng)調(diào)整按鈕，只需要設(shè)置好固定的間距，它就可以根據(jù)按鈕中的文字長短自動(dòng)變換尺寸，Auto Layout讓我們可以更加方便地創(chuàng)建響應(yīng)式布局。
但是這些還遠(yuǎn)遠(yuǎn)不夠，為了讓Auto Layout更加接近CSS代碼中的盒模型和Web前端中Flexbox的工作方式，F(xiàn)igma在下一次的更新中，為Auto Layout功能創(chuàng)建了一個(gè)簡單的UI面板，方便用戶更加快捷的設(shè)置各項(xiàng)參數(shù)，并根據(jù)一些最常見的工作場景和用戶需求，增加了新的功能：它允許沿兩個(gè)軸向（橫向和縱向）拉伸元素，為某一元素設(shè)置單獨(dú)的間距數(shù)值，并且為一些常見的，例如導(dǎo)航欄圖標(biāo)等UI模型，提供間距自動(dòng)優(yōu)化方案。
使組件庫更易于訪問（已上線）
當(dāng)我們需要構(gòu)建功能復(fù)雜、結(jié)構(gòu)龐大的產(chǎn)品時(shí)，往往會(huì)使用到非常多的組件，這個(gè)時(shí)候組件庫就會(huì)變得非常復(fù)雜。
當(dāng)需要替換掉某一個(gè)組件的時(shí)候，設(shè)計(jì)師們就必須要記住它確切的名稱，然后打開龐大的組件庫，接著是很多層級(jí)的菜單列表，在成千上萬個(gè)icon中苦苦尋覓那一個(gè)正確的組件。
為了改善這一笨重的搜索體驗(yàn)，幫助設(shè)計(jì)師和開發(fā)人員更快速的定位，F(xiàn)igma除了即將推出的Variants，還支持直接在搜索結(jié)果中顯示對(duì)應(yīng)組件庫，現(xiàn)在這一功能已經(jīng)上線。我們可以通過縮略圖、快捷方式和名稱搜索來定位組件。
全新的代碼顯示面板（已上線）
當(dāng)進(jìn)行到開發(fā)階段的時(shí)候，程序員們需要找到正確的樣式信息。新的Inspect Tab面板取代了原有的Code 面板，提供了更多有效的屬性代碼。所選圖層的名稱會(huì)顯示在頂部，幫助設(shè)計(jì)師和開發(fā)人員同步獲取實(shí)時(shí)信息。
并且增加了對(duì)于Variants、顏色、陰影、內(nèi)容、字體、邊框等屬性值的支持。程序員們只需要點(diǎn)擊一下，就可以將這些屬性值復(fù)制粘貼到編輯器中，輕松的還原設(shè)計(jì)稿的視覺呈現(xiàn)。
以上這些更新只是Figma消除設(shè)計(jì)師和開發(fā)人員技術(shù)壁壘的開始，設(shè)計(jì)師們常常希望自己可以擁有極高的創(chuàng)作自由，盡情創(chuàng)新；程序員們希望代碼結(jié)構(gòu)更清晰，易于開發(fā)和維護(hù)。Figma的出現(xiàn)讓我們可以暢想這樣一種美好的未來：設(shè)計(jì)和開發(fā)的交付變得更加順暢自然，設(shè)計(jì)師和程序員可以在各自的領(lǐng)域以最舒服的狀態(tài)進(jìn)行工作，由相愛相殺變成相輔相成。
