设计和代码之间有一种天然的张力。在设计的世界里，重点是决定构建什么——在代码的世界里，重点是构建它。
传统上，设计人员和开发人员占据着不同的世界，需要不同的工具。在实践中，他们是合作伙伴，致力于将产品变为现实。虽然他们的方法可能不同，但各自都有独特的优势。设计人员针对自由形式的创造性探索进行优化，而开发人员则采用更结构化的方法。结果必然会导致两者之间的紧张关系:对于开发人员来说，“破坏”组件的感觉，对于设计师来说，只是创造性的探索;在开发人员看来是“结构”的东西，对设计人员来说可能是抑制的。
我们相信采用来自工程和设计的概念，采用代码的严谨性和可重用性，同时保留快速迭代和无拘无束的探索，这使得可视化设计如此强大。
在今天上午的Config Europe上，我们宣布了几个新的特性，这些特性将在figma的系统设计中发挥两方面的优势——使它们更接近代码，使用起来更直观，同时更有效地将设计转化为产品。
支持镜像代码库的设计系统
团队通常维护一组用于设计的组件，一组用于开发。虽然这是一种正常的好方法，但跨越两个世界并不总是容易的。当代码和设计组件互为镜像时，团队可以更有效地移动。今天，我们宣布了变体、交互式组件和自动布局的改进，这些将允许团队这样做。
带变体的桥接代码和设计组件(将于11月发布)
前端代码中的单个组件通常以多种视觉风格呈现，用于不同的上下文和用户交互状态。例如，一个按钮可能有主样式和副样式，小尺寸和大尺寸，以及iOS和Android的不同版本。目前，像这样的按钮组件将由不同的组件表示，每个组件代表不同的视觉样式。这种设计和代码之间的不匹配会导致错误的沟通，最终减慢开发过程。
为了解决这个问题，我们启动了变体，这是一种逻辑地将相同组件的变体组合成单个、更强大的组件的方法。除了简化资产面板之外，这次更新将允许组件更紧密地映射到代码。
将交互组件拖放到原型中(1月份启动)
既然您已经能够将组件的交互状态与变体组合在一起，那么您可能想知道这些交互状态是否与您的原型一起工作。
尽管变体可以让我们将组件的状态组合在一起，但在今天的Figma中，构建这些状态之间的转换原型仍然需要做很多工作。仅仅是为了创造一个交互式对象的错觉，设计师就必须将多个帧与叠加连接起来。
交互组件让设计人员在变体之间添加原型交互，从而使原型设计更加高效，因此实例在原型设计模式中立即“活跃”。
用自动布局进行设计(11月推出)
2019年引入自动布局，为Figma带来了布局规则。通过允许设计者更新按钮文本而无需手动调整框架大小，自动布局使他们更容易创建响应界面。但我们知道，要使自动布局更接近CSS box模型和Flexbox在Web上的工作方式，我们还有很多工作要做。
在下进化,我们把一个简化的用户界面自动布局更容易使用,加上新特性基于我们的一些最常见的请求:沿两轴拉伸元素的能力,配置独立的padding值和优化间距等常见的UI模式导航图标。
使设计系统在规模上更易于访问
除了使设计系统更加强大之外，我们还添加了一些特性，帮助设计人员和开发人员浏览大型、复杂的库。
使用实例交换菜单快速浏览库(现在激活)
当你在成千上万个组件中导航时，在Figma中找到一个合适的组件以前是一件很麻烦的事情。你必须记住确切的组件名称，或者浏览一个巨大的列表。除了变体(它将减少设计人员需要查看的组件数量)之外，我们还彻底检查了实例交换菜单，以便它能随设计系统伸缩。现在可以使用缩略图、键盘快捷键和搜索来查找要查找的组件。
使用新的Inspect选项卡复制、粘贴和编码(现在激活)
当需要实现设计时，开发人员需要找到正确的信息。新的Inspect选项卡取代了代码面板，并提供了开发人员可以获取的更多相关属性。所选层的名称将显示在最上方，以帮助设计人员和开发人员对正在实现的内容保持一致。还有一些新的部分显示了变体、颜色、阴影、内容、排版、边框等的相关值。它还允许开发人员单击将任何值复制到他们的剪贴板中——包括整个key:value对片段——因此他们可以轻松地将内容粘贴到代码中。
这些更新只是开始，我们设想如何使设计和编码更紧密地结合在一起的Figma。有时候，设计师需要在一个自由自在的画布上工作，有时候，更结构化的代码启发方法是设计师工作的最快方式。我们设想这样一个世界，设计师可以在这两种工作方式之间顺畅地切换，只要他们认为合适。
