Figma Config 2023：开启智能设计的新纪元！

type

status

slug

summary

date

1.开发模式：加速设计到生产流程

准备好使用 Figma 的最新功能：开发模式来升级您的协作游戏。这个以开发人员为中心的界面将彻底改变设计人员和开发人员的合作方式，使从设计到开发的过渡比以往任何时候都更加顺利。

开发模式是您在 Figma 中检查和导航设计的门户。无论您是希望与开发团队沟通的设计师，还是寻求无缝设计到代码转换的开发人员，此功能都能满足您的需求。最好的部分是什么？访问开发模式轻而易举！

要深入了解开发人员的使用场景，只需打开任意 Figma 设计文件即可。进入后，您可以轻松地在设计模式和开发模式之间切换。请留意位于页面右上角的明显的 </> 开发模式切换开关。或者，您可以使用键盘快捷键 Shift + D 给您的同事留下深刻的印象。

现在，我们来谈谈释放开发模式的魔力。它为开发人员提供了丰富的工具来导航设计文件并将这些像素完美的创作转换为有形的代码。设计移交过程中沟通不畅和丢失细节的日子已经一去不复返了。通过开发模式，设计师和开发人员最终发现自己处于同一页面上，为实现共同的愿景而和谐地工作。

但您可能会问，开发模式到底能做什么？做好准备，因为可能性是无限的！以下是一些等待您使用的出色功能：

检查：要检查 Figma 文件中的对象的尺寸、规格、设计和资产，请将鼠标悬停并单击。

代码片段：您可以直接从 Figma 复制 CSS、iOS 和 Android 代码，也可以使用插件来修改代码。

插件：通过代码生成和资产导出插件自动执行繁琐的任务，并通过 Jira、GitHub、Storybook 等集成与日常工具保持连接。

设计系统：将 Figma 组件连接到您的代码将使您的真相来源保持和谐。

部分状态：部分的新标签使设计人员能够通知开发人员哪些框架可用于开发以及哪些框架仍在开发中。

比较更改：通过比较帧版本立即识别文件中发生的更改。

开发模式目前处于测试阶段，到 2023 年对所有用户免费。

因此，无论您是寻求确保像素完美实现的设计师，还是渴望清晰了解设计规范的开发人员，让 Figma 的开发模式成为您在设计和开发协同之旅中值得信赖的伴侣。

2.Figma + VS Code：加强协作并为开发人员赋能

Figma 和 Visual Studio Code 联手，为设计和开发协作开辟了一个充满可能性的世界。借助强大的Figma for VS Code 扩展，开发人员现在可以无缝检查 Figma 文件、与设计人员密切协作并接收实时通知，所有这些都可以在他们喜爱的代码编辑器中轻松完成。这种集成不仅加强了设计和开发之间的联系，还简化了工作流程，使从概念到代码的旅程变得绝对愉快。就是这样：

实时查看并回复评论和活动：

不再担心 Figma 中丢失通知。使用 Figma for VS Code，在侧边栏中打开实时设计文件并实时协作。您可以检查 Figma 文件的更新并与其他用户进行讨论。当然，您可以通过基于光标的对话与设计师就设计进行交流。

获取基于设计的代码建议：

通过针对您当前正在处理的设计量身定制的自动完成功能，您可以保持专注并比以往完成更多工作。只需单击设计中的某个图层，其属性就会在您键入时作为代码建议弹出。

将代码文件链接到设计组件：

保持设计系统和代码库之间的一致性将加快整个团队的工作速度。您可以快速识别组件的现有实现，并参考设计文件记录您的代码库。

3.跟踪需要投入生产的内容

这是一个方便的功能，可以帮助开发人员跟踪最终产品中需要实现的设计元素和更改。

这将通过提供有关哪些元素已准备好移至生产阶段的清晰且有组织的概述，帮助简化对实时产品实施更改和更新的过程。

4.设计更智能，而不是更困难：使用 Figma 的变量增强您的流程

1）拥抱变量的力量

Figma 引入了一项突破性的功能，它将改变设计师的工作方式：变量。

是的，不再需要重复的手动更改；现在我们只看到的是效率和灵活性。使用变量，您可以存储颜色、数字、文本和布尔属性的可重用值。这意味着更新单个变量会自动将更改传播到整个设计，从而节省您宝贵的时间和精力。深入研究变量的世界，亲眼目睹它们如何增强您的设计过程。

这是 Config 的重大更新。变量的引入可以使设计过程更加简化和高效。变量可以存储颜色、数字、文本和布尔值，这些值可以在整个设计中重复使用。

2）变量中的别名支持

此功能允许更多基于上下文的变量使用，使整个团队更容易理解和使用它们。

别名允许您为变量创建不同的名称（别名），当在项目中以不同方式引用相同的值时，这会很有用。

例如，您可能有一个主要品牌颜色，在某些地方用作背景颜色，在其他地方用作边框颜色。您可以为颜色值创建一个变量，然后创建引用原始变量的别名，例如“背景颜色”或“边框颜色”，而不是为每个变量创建单独的变量。这样，如果品牌颜色发生变化，您只需更新原始变量，所有别名都会反映变化。

3）变量的范围支持

范围是指变量可用的上下文。在设计系统的上下文中，范围可能是一个特定的项目、项目中的特定页面，甚至是单个组件。范围界定通过明确变量的适用范围来帮助管理设计系统的复杂性。

例如，您可能有一个变量来定义整个设计中常用的填充大小。这可以是全局范围变量。但在特定组件内，您可能需要不同的填充大小。您可以定义一个具有相同名称但范围仅限于该组件的新变量。当您引用该组件内的填充变量时，它使用组件范围的值。如果您在其他地方引用填充变量，它将使用全局值。

4）具有不同值的变量模式

为浅色和深色主题设计单独版本的日子已经一去不复返了。Figma 的变量模式允许您根据浅色和深色模式等主题定义和组织不同的变量值。将这些模式应用到您的设计中可以立即在主题之间切换，使您能够创建适应不同用户偏好的适应性界面。了解可变模式如何将您的设计提升到新的复杂水平，确保在不同环境下提供一致且令人惊叹的视觉体验。

在 Figma 中使用变量模式时，您可以为每个主题定义变量集。

例如，您可能有适合浅色主题的颜色变量，如light-background和light-text，以及适合深色主题的相应变量，如dark-background和dark-text。

这些变量不仅限于颜色，还可以包括其他设计元素，例如排版、间距或控制某些元素显示的布尔值。

定义这些与主题相关的变量后，您只需切换变量模式即可轻松在设计中的主题之间切换。例如，如果您想查看设计在深色模式下的外观，只需将变量模式切换为“深色”，所有引用主题变量的设计元素都将更新以反映深色主题值。

5）使用插件和 REST API 进行扩展和简化

Config 2023 也为插件爱好者带来了好消息。Figma 现在提供强大的插件 API，使您能够轻松扩展变量的创建和管理。将变量导入和导出到令牌中从未如此简单，让您能够对设计系统进行前所未有的控制。对于企业用户，Figma 引入了 REST API，提供变量的读写功能。探索这些 API 如何开启协作和定制的无限可能性，将您的设计工作流程推向无与伦比的高度。

这扩展了变量的功能，帮助您扩展创建和管理。

插件支持允许开发人员创建与变量交互的 Figma 插件。例如，可以设计一个插件来自动执行将某些变量应用于所选对象的过程，或者生成有关如何在设计文件中使用变量的报告。这可以显着加快重复任务的速度，增强一致性，并为您的设计系统提供有价值的见解。

REST API 支持可以通过其应用程序编程接口 (API) 将 Figma 的设计数据与其他系统集成。这意味着 Figma 中的变量可以从 Figma 外部以编程方式访问和操作，同样，外部数据可以用于更新 Figma 中的变量。

5.彻底改变原型设计：Figma 在几帧内实现更高水平的现实主义

使用变量、条件和表达式使您的设计更具活力和交互性，这使您能够创建以更现实和响应更灵敏的方式对用户输入做出反应的原型。

设置变量动作：为原型注入动态能量

Figma 通过引入卓越的“设置变量”动作，增强了其原型制作能力。这一新功能使设计人员能够比以往更有效地创建动态原型。只需单击几下，您现在就可以设置和修改变量，解锁无限可能的世界。

可以保存数字、文本、颜色或布尔值（真/假）等值。这些值可以在整个原型中使用和操作，以创建更动态的交互。例如，变量可能保存按钮被单击的次数，或存储切换开关的当前状态。

多个操作和条件逻辑：创建交互式杰作

Figma 通过引入通过单个操作触发跨变量的多个操作的功能，提高了交互性。这意味着您可以毫不费力地在原型中协调复杂的交互。

允许您在原型中创建逻辑。您可以根据变量的当前值指定不同的操作或结果。例如，您可以制定一条规则，规定“如果按钮被单击超过 5 次，则导航到不同的屏幕”。

解锁数学表达式：用风格处理数字

准备好拥抱你内心的数学家，因为 Figma 已经解锁了原型中数学表达式的力量。告别静态字符串和数字 - 现在您可以使用一系列运算符（例如加、减、乘和除）生成动态值。

使您能够对变量执行计算或转换。例如，您可以在每次单击按钮时增加计数器变量，或者根据用户输入计算新颜色。

6.设计师也是用户！：通过可用性改进增强用户体验

1）通过自动布局革命赋予设计力量

Figma 通过令人难以置信的新自动布局功能提升了其游戏水平。告别设计限制，迎接增强的灵活性。最新的更新允许您轻松地将自动布局对象包装到新行，从而使您能够创建适应各种屏幕尺寸的动态布局。此外，您现在可以设置最小和最大宽度和高度，确保整个设计中的组件标准化。有了 Figma，您的设计比以往任何时候都更具适应性！

自动布局功能现在允许元素以前所未有的方式响应容器大小。

换行

本质上使您的设计元素能够像文本一样流动。如果您有一组水平排列的元素，并且该组对于其父框架来说太宽，则元素将自动“换行”到下一行。当设计需要适应不同数量的内容或屏幕尺寸的组件（例如标签列表中的标签或网格中的项目）时，这特别有用。

最小或最大高度/宽度

有助于保持设计的一致性和完整性。通过定义这些约束，您可以确保元素永远不会变得太小（这可能使其无法读取或无法单击）或太大（这可能会破坏您的布局或与其他元素重叠），无论它包含的内容或大小如何查看它的屏幕。

2）字体选择器进行视觉改造

寻找完美的字体变得更加容易且更具视觉吸引力。Figma 为字体选择器引入了令人兴奋的更新，这将彻底改变您的字体选择过程。通过新的视觉预览了解您喜欢的字体，帮助您做出更快、更明智的决策。改进的搜索功能和新类别使浏览广泛的字体库变得轻而易举。

新的和改进的字体选择器使设计人员能够比以往更快、更轻松地找到完美的字体。

在更新的字体选择器中进行搜索

使设计人员可以通过键入其名称来快速找到他们正在寻找的确切字体。这在使用大型字体库时特别有用，因为它不需要手动滚动列表来查找所需的字体。这可以大大加快设计过程，并使尝试不同字体变得更加容易。

过滤

提供了一种根据特定条件（例如衬线、无衬线、等宽字体等）缩小字体列表范围的方法。当您不确定要使用哪种字体并想要比较某个类别中的几个选项时，这会非常有用。它使选择正确字体的过程不再那么繁重，而且更加集中。

预览

以自己的字体预览字体名称是一个小但重要的更新。以前，您必须将字体应用于设计中的某些文本才能看到它的外观。现在，您可以在字体选择器中看到每种字体的预览，这可以节省您大量的时间和点击次数。它还可以让您一目了然地了解每种字体的特征和个性如何适合您的设计。

3）以闪电般的速度浏览文件

使用 Figma 改进的文件浏览器，搜索文件并与团队成员协作变得轻而易举。共享项目和共享文件选项卡的引入可确保您轻松找到并访问其他人与您共享的文件。搜索、最近使用的内容和通知功能现在涵盖您的整个帐户，为您节省宝贵的时间并保持工作流程不间断。F

其中一项显着的改进是增强的搜索功能。新的更新允许用户使用特定的关键字或短语快速找到外部团队与他们共享的文件或项目。事实证明，这在 Figma 中处理大量项目时特别有用。

文件浏览器现在改进了排序和过滤选项。用户可以根据各种参数对文件进行排序，例如上次修改日期、文件所有者或共享文件的团队。这样可以更轻松地导航并有助于保持工作空间井井有条。

此外，还有一个新的“共享文件”部分。这是一个专用空间，外部团队与用户共享的所有文件和项目都分组在一起。这可以为经常与不同外部团队协作的用户节省大量时间，因为他们不再需要筛选自己的文件来查找与他们共享的文件。

4）上下文编辑和内联预览

这些可用性更新使我们能够在同一视图中编辑和预览原型，从而加快设计过程。

传统上，设计人员需要在不同的视图或模式之间切换以对设计进行更改，然后预览这些更改在原型中的外观。这可能是一个耗时的过程，尤其是在根据反馈或测试迭代设计时。

通过此更新，设计人员现在可以对其设计进行更改，并立即查看这些更改如何影响原型，而无需切换视图。这种上下文编辑和内联预览功能可以通过允许快速迭代和对设计更改的即时反馈来显着加快设计过程。

7.Figma新浪潮

1）Figma 游乐场

欢迎每个人在为此目的提供的游乐场上尝试 Figma 的创新功能。这是在无风险的环境中亲身体验最新功能和改进（例如开发模式、变量和高级原型设计）的最佳方式。Figma 中的 Playground 是边做边学、自由实验和发掘这些功能全部潜力的好方法。如果您想走在设计和开发的最前沿，您绝对不能错过这些尝试！

您可以在这里（https://www.figma.com/@figma）找到 Figma 的所有新游乐场：