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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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