設(shè)計和代碼之間有一種天然的張力。在設(shè)計的世界里，重點是決定構(gòu)建什么——在代碼的世界里，重點是構(gòu)建它。

傳統(tǒng)上，設(shè)計人員和開發(fā)人員占據(jù)著不同的世界，需要不同的工具。在實踐中，他們是合作伙伴，致力于將產(chǎn)品變?yōu)楝F(xiàn)實。雖然他們的方法可能不同，但各自都有獨特的優(yōu)勢。設(shè)計人員針對自由形式的創(chuàng)造性探索進行優(yōu)化，而開發(fā)人員則采用更結(jié)構(gòu)化的方法。結(jié)果必然會導(dǎo)致兩者之間的緊張關(guān)系:對于開發(fā)人員來說，“破壞”組件的感覺，對于設(shè)計師來說，只是創(chuàng)造性的探索;在開發(fā)人員看來是“結(jié)構(gòu)”的東西，對設(shè)計人員來說可能是抑制的。

我們相信采用來自工程和設(shè)計的概念，采用代碼的嚴謹性和可重用性，同時保留快速迭代和無拘無束的探索，這使得可視化設(shè)計如此強大。

在今天上午的Config Europe上，我們宣布了幾個新的特性，這些特性將在figma的系統(tǒng)設(shè)計中發(fā)揮兩方面的優(yōu)勢——使它們更接近代碼，使用起來更直觀，同時更有效地將設(shè)計轉(zhuǎn)化為產(chǎn)品。

支持鏡像代碼庫的設(shè)計系統(tǒng)

團隊通常維護一組用于設(shè)計的組件，一組用于開發(fā)。雖然這是一種正常的好方法，但跨越兩個世界并不總是容易的。當(dāng)代碼和設(shè)計組件互為鏡像時，團隊可以更有效地移動。今天，我們宣布了變體、交互式組件和自動布局的改進，這些將允許團隊這樣做。

帶變體的橋接代碼和設(shè)計組件(將于11月發(fā)布)

前端代碼中的單個組件通常以多種視覺風(fēng)格呈現(xiàn)，用于不同的上下文和用戶交互狀態(tài)。例如，一個按鈕可能有主樣式和副樣式，小尺寸和大尺寸，以及iOS和Android的不同版本。目前，像這樣的按鈕組件將由不同的組件表示，每個組件代表不同的視覺樣式。這種設(shè)計和代碼之間的不匹配會導(dǎo)致錯誤的溝通，最終減慢開發(fā)過程。

為了解決這個問題，我們啟動了變體，這是一種邏輯地將相同組件的變體組合成單個、更強大的組件的方法。除了簡化資產(chǎn)面板之外，這次更新將允許組件更緊密地映射到代碼。

將交互組件拖放到原型中(1月份啟動)

既然您已經(jīng)能夠?qū)⒔M件的交互狀態(tài)與變體組合在一起，那么您可能想知道這些交互狀態(tài)是否與您的原型一起工作。

盡管變體可以讓我們將組件的狀態(tài)組合在一起，但在今天的Figma中，構(gòu)建這些狀態(tài)之間的轉(zhuǎn)換原型仍然需要做很多工作。僅僅是為了創(chuàng)造一個交互式對象的錯覺，設(shè)計師就必須將多個幀與疊加連接起來。

交互組件讓設(shè)計人員在變體之間添加原型交互，從而使原型設(shè)計更加高效，因此實例在原型設(shè)計模式中立即“活躍”。

用自動布局進行設(shè)計(11月推出)

2019年引入自動布局，為Figma帶來了布局規(guī)則。通過允許設(shè)計者更新按鈕文本而無需手動調(diào)整框架大小，自動布局使他們更容易創(chuàng)建響應(yīng)界面。但我們知道，要使自動布局更接近CSS box模型和Flexbox在Web上的工作方式，我們還有很多工作要做。

在下進化,我們把一個簡化的用戶界面自動布局更容易使用,加上新特性基于我們的一些最常見的請求:沿兩軸拉伸元素的能力,配置獨立的padding值和優(yōu)化間距等常見的UI模式導(dǎo)航圖標。

使設(shè)計系統(tǒng)在規(guī)模上更易于訪問

除了使設(shè)計系統(tǒng)更加強大之外，我們還添加了一些特性，幫助設(shè)計人員和開發(fā)人員瀏覽大型、復(fù)雜的庫。

使用實例交換菜單快速瀏覽庫(現(xiàn)在激活)

當(dāng)你在成千上萬個組件中導(dǎo)航時，在Figma中找到一個合適的組件以前是一件很麻煩的事情。你必須記住確切的組件名稱，或者瀏覽一個巨大的列表。除了變體(它將減少設(shè)計人員需要查看的組件數(shù)量)之外，我們還徹底檢查了實例交換菜單，以便它能隨設(shè)計系統(tǒng)伸縮?，F(xiàn)在可以使用縮略圖、鍵盤快捷鍵和搜索來查找要查找的組件。

使用新的Inspect選項卡復(fù)制、粘貼和編碼(現(xiàn)在激活)

當(dāng)需要實現(xiàn)設(shè)計時，開發(fā)人員需要找到正確的信息。新的Inspect選項卡取代了代碼面板，并提供了開發(fā)人員可以獲取的更多相關(guān)屬性。所選層的名稱將顯示在最上方，以幫助設(shè)計人員和開發(fā)人員對正在實現(xiàn)的內(nèi)容保持一致。還有一些新的部分顯示了變體、顏色、陰影、內(nèi)容、排版、邊框等的相關(guān)值。它還允許開發(fā)人員單擊將任何值復(fù)制到他們的剪貼板中——包括整個key:value對片段——因此他們可以輕松地將內(nèi)容粘貼到代碼中。

這些更新只是開始，我們設(shè)想如何使設(shè)計和編碼更緊密地結(jié)合在一起的Figma。有時候，設(shè)計師需要在一個自由自在的畫布上工作，有時候，更結(jié)構(gòu)化的代碼啟發(fā)方法是設(shè)計師工作的最快方式。我們設(shè)想這樣一個世界，設(shè)計師可以在這兩種工作方式之間順暢地切換，只要他們認為合適。