設(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ì)。設(shè)計(jì)人員針對(duì)自由形式的創(chuàng)造性探索進(jìn)行優(yōu)化，而開發(fā)人員則采用更結(jié)構(gòu)化的方法。結(jié)果必然會(huì)導(dǎo)致兩者之間的緊張關(guān)系:對(duì)于開發(fā)人員來(lái)說(shuō)，“破壞”組件的感覺(jué)，對(duì)于設(shè)計(jì)師來(lái)說(shuō)，只是創(chuàng)造性的探索;在開發(fā)人員看來(lái)是“結(jié)構(gòu)”的東西，對(duì)設(shè)計(jì)人員來(lái)說(shuō)可能是抑制的。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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