配置2023:重新设想团队设计和构建的地方

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(255, 255, 255); margin-block: 24px; margin-top: 0px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(0, 56, 16);">今天,在2023年的康菲菲格,超过8000名的菲格玛社区成员聚集在一起,实际上还有成千上万的人。上一次我们面对面联系是在2020年2月n,我们的第一次会议。从那时起,我们周围的世界发生了变化,菲格玛的产品、公司和社区都发生了巨大的变化。

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(255, 255, 255); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(0, 56, 16);">我们的愿景是建立一种新的设计工具--一种为整个产品开发团队设计的工具。今天的发布重新设想如何设计和开发在菲格玛。我很兴奋地介绍了三种方法:让开发人员在FIFMA中感觉像家一样拥有发展模式,将设计与带有变量的代码语言连接起来,在2d设计和带有先进原型的已运送产品之间迈出了一步。我们还推出了一个改进的自动布局,一个更新的字体选择器,以及对文件浏览器的更新,以帮助每个人更好地使用菲格玛。

figma-better-for-developers-with-dev-mode" class="figma-y6citn" style="box-sizing: inherit; cursor: var(--cursorText); margin: 80px 0px 40px; font-family: hex-franklin-variable; font-size: min(5vw, 72px); font-variation-settings: "wght" 750, "wdth" 70; font-feature-settings: "ss01"; line-height: 1.04; letter-spacing: 0.005em; color: rgb(255, 255, 255); text-wrap: wrap; background-color: rgb(0, 56, 16);">让带有发展模式的开发人员更好地使用菲格马

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(255, 255, 255); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(0, 56, 16);">设计系统是一种共同的语言,有助于缩小设计与开发之间的差距。这一差距之所以存在,是因为我们在设计和开发时,正在对非常不同的东西进行优化。在设计过程中,你可以为快速的迭代和构思进行优化;你试图尽可能快地从头脑中得到一个想法。当你离生产越来越近的时候,你不仅要考虑一件东西的外观和工作方式,还要考虑它的维护、重复使用和稳定性。到目前为止,菲格玛是专门为设计而设计的,但我们也是时候专注于开发了。

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(255, 255, 255); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(0, 56, 16);">我们正在引入发展模式来连接设计和开发,让开发人员在菲格玛有宾至如归的感觉。发展模式是一个工作区在菲格玛带来的结构和功能,开发人员需要做他们的工作在菲格玛的无限画布。有了发展模式,开发人员可以:

• 理解设计并将其翻译为更快的代码

• 连接到他们的工具和代码栏上的插件包括 吉拉 , 吉特布 ,以及 故事书

• 去追踪需要去生产的东西

• 检查文件旁边的哪些地方他们与菲格玛编码 VS码

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(255, 255, 255); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(0, 56, 16);">Dev模式目前正在测试阶段,到2023年每个人都可以免费使用。 学习更多

figma.net.cn/core/extend/ueditor/themes/default/images/img-cracked.png" srcset="https://cdn.sanity.io/images/599r6htc/localized/a313056d03f6e2734d587ee87c5a38c23936f8e5-5569x3132.png?q=75&fit=crop&crop=focalpoint&auto=format&dpr=0.5 2785w,https://cdn.sanity.io/images/599r6htc/localized/a313056d03f6e2734d587ee87c5a38c23936f8e5-5569x3132.png?q=75&fit=crop&crop=focalpoint&auto=format&dpr=0.75 4177w,https://cdn.sanity.io/images/599r6htc/localized/a313056d03f6e2734d587ee87c5a38c23936f8e5-5569x3132.png?q=75&fit=crop&crop=focalpoint&auto=format 5569w,https://cdn.sanity.io/images/599r6htc/localized/a313056d03f6e2734d587ee87c5a38c23936f8e5-5569x3132.png?q=75&fit=crop&crop=focalpoint&auto=format&dpr=1.5 8354w,https://cdn.sanity.io/images/599r6htc/localized/a313056d03f6e2734d587ee87c5a38c23936f8e5-5569x3132.png?q=75&fit=crop&crop=focalpoint&auto=format&dpr=2 11138w" loading="lazy" alt="一个抽象的菲格玛文件,它与一个为开发人员打开发展模式的切换" style="box-sizing: inherit; border-style: none; cursor: var(--cursorPointer); display: block; object-fit: cover; aspect-ratio: 21 / 9; width: 298px;" data-catch-result="fail"/>

figma-19jvqfh" style="box-sizing: inherit; cursor: var(--cursorPointer); margin: 12px 0px 4px; font-family: hex-franklin-variable; font-size: 16px; font-variation-settings: "wght" 600, "wdth" 98; line-height: 1.7; letter-spacing: 0px;">

 为什么我们要建立发展模式 看一看 所有的功能和后贝塔定价。

figma.net.cn/core/extend/ueditor/themes/default/images/img-cracked.png" srcset="https://cdn.sanity.io/images/599r6htc/localized/a313056d03f6e2734d587ee87c5a38c23936f8e5-5569x3132.png?q=75&fit=max&auto=format&dpr=0.5 2785w,https://cdn.sanity.io/images/599r6htc/localized/a313056d03f6e2734d587ee87c5a38c23936f8e5-5569x3132.png?q=75&fit=max&auto=format&dpr=0.75 4177w,https://cdn.sanity.io/images/599r6htc/localized/a313056d03f6e2734d587ee87c5a38c23936f8e5-5569x3132.png?q=75&fit=max&auto=format&dpr=2 5569w" loading="lazy" alt="博客标题。" style="box-sizing: inherit; border-style: none; display: block; object-fit: cover; width: 280px; border-radius: 12px; min-width: 280px;" data-catch-result="fail"/>

figma-y6citn" style="box-sizing: inherit; cursor: var(--cursorText); margin: 80px 0px 40px; font-family: hex-franklin-variable; font-size: min(5vw, 72px); font-variation-settings: "wght" 750, "wdth" 70; font-feature-settings: "ss01"; line-height: 1.04; letter-spacing: 0.005em; color: rgb(255, 255, 255); text-wrap: wrap; background-color: rgb(0, 56, 16);">对于变量,设计系统和代码使用相同的语言

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(255, 255, 255); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(0, 56, 16);">团队依靠设计系统来支持产品需要设计的所有不同方式。虽然结构有助于创建一致性,但它往往牺牲了在设计师需要时为其提供灵活性。随着产品变得越来越复杂,设计系统变得越来越复杂,因为它们可以灵活地支持所有的东西--多个主题、平台、产品、品牌等等。设计系统管理员不得不用多个库、大的组件集和定制的插件来解决这个复杂性。但是他们的设计都没有与代码连接。

figma-1a2w2qo" style="box-sizing: inherit; font-family: inherit; font-size: inherit; line-height: inherit; margin: 0px 0px 40px; overflow: visible; appearance: none; cursor: var(--cursorPointer); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; font-weight: inherit; text-align: inherit; position: relative; border: 1px solid var(--quaternary-color); border-radius: 6px; padding-top: 6px; padding-bottom: 6px; outline: none;">

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(255, 255, 255); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(0, 56, 16);">代币是我们社区长期以来要求的功能。今天,我们推出了变量,一种更全面的解决方案,以简化设计过程。变量可适应许多用例:

• 颜色、数字、文本和布尔变量,这些变量存储可重用的值,并可用于主题设计和标记设计

• 为整个团队提供背景化变量的调整和范围化支持

• 不同数值的可变模式(例如:可以在不同的设计主题之间进行切换。

• 对变量的插入和RESTAPI支持,以帮助您扩展创建和管理
  

figma-y6citn" style="box-sizing: inherit; cursor: var(--cursorText); margin: 80px 0px 40px; font-family: hex-franklin-variable; font-size: min(5vw, 72px); font-variation-settings: "wght" 750, "wdth" 70; font-feature-settings: "ss01"; line-height: 1.04; letter-spacing: 0.005em; color: rgb(255, 255, 255); text-wrap: wrap; background-color: rgb(0, 56, 16);">在原型设计中使用变量,使设计充满活力

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(255, 255, 255); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(0, 56, 16);">随着产品团队面临的压力越来越大,以较少的资源运输高质量的产品,原型和测试比以往任何时候都更加重要。但到目前为止,菲格玛的原型设计一直是耗时和复杂的。我们听说过这样的故事:用户构建原型,而这些原型是无法编辑或求助于其他工具的。有时候,他们会完全跳过这个过程,等到设计被编码出来,看看他们是如何活过来的。

figma-1a2w2qo" style="box-sizing: inherit; font-family: inherit; font-size: inherit; line-height: inherit; margin: 0px 0px 40px; overflow: visible; appearance: none; cursor: var(--cursorPointer); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; font-weight: inherit; text-align: inherit; position: relative; border: 1px solid var(--quaternary-color); border-radius: 6px; padding-top: 6px; padding-bottom: 6px; outline: none;">

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(255, 255, 255); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(0, 56, 16);">使用变量,设计者可以轻松地创建和更新更多的动态原型。这使得早期和经常测试完整的体验成为可能,这样团队就能够理解无限的静态设计思想如何在现实中工作,并选择最好的。就像EXERL公式一样,原型交互现在可以通过数学表达式和条件逻辑来引用和修改变量(例如。您可以指定"每次点击更改号变量" X 到 x+10 ,或"导航到 框架1 如果变量是 X ,以其他方式 框架2 ")。原型设计比以往任何时候都更加强大和简单。另外,一个新的内联预览可以帮助您更快速地迭代并即时播放您的设计。

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(255, 255, 255); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(0, 56, 16);">今天我们介绍:

• 具有变量、条件和表达式的高级原型功能

• 可使用性更新,如内部编辑和内部预览,以编辑设计和预览原型相同的视图

figma-y6citn" style="box-sizing: inherit; cursor: var(--cursorText); margin: 80px 0px 40px; font-family: hex-franklin-variable; font-size: min(5vw, 72px); font-variation-settings: "wght" 750, "wdth" 70; font-feature-settings: "ss01"; line-height: 1.04; letter-spacing: 0.005em; color: rgb(255, 255, 255); text-wrap: wrap; background-color: rgb(0, 56, 16);">提高生活质量的工作效率

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(255, 255, 255); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(0, 56, 16);">我们总是在监听和迭代,我们知道新的功能和改进可以在日常工作流程中产生很大的变化。以下是最新的更新,以简化您在菲格玛的工作方式:

• 改进的自动布局,包括包装和设置最小/最大高度/宽度的能力

• 一个升级的字体选择器,这样你就可以搜索和筛选你正在寻找的字体,并且很容易地在他们自己的字体中预览字体名称

• 更新文件浏览器,以便更容易找到外部团队与您共享的文件和项目
  

figma-y6citn" style="box-sizing: inherit; cursor: var(--cursorText); margin: 80px 0px 40px; font-family: hex-franklin-variable; font-size: min(5vw, 72px); font-variation-settings: "wght" 750, "wdth" 70; font-feature-settings: "ss01"; line-height: 1.04; letter-spacing: 0.005em; color: rgb(255, 255, 255); text-wrap: wrap; background-color: rgb(0, 56, 16);">投资于未来

figma-81kuz0" style="box-sizing: inherit; cursor: var(--cursorText); margin: 80px 0px 40px; font-family: hex-franklin-variable; font-size: min(3.8889vw, 56px); font-variation-settings: "wght" 750, "wdth" 74; font-feature-settings: "ss01"; letter-spacing: 0.01em; line-height: 1.12; color: rgb(255, 255, 255); text-wrap: wrap; background-color: rgb(0, 56, 16);">艾:下一章的设计

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(255, 255, 255); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(0, 56, 16);">作为2023年的一名技术专家,我写未来的文章时不能不提及人工智能。这是我如何看待人工智能影响设计:它将帮助人们在视觉上表达自己。它会加速你的工作流程。它将使任何人创造一个好的初稿。但是从一个好的草稿到一个世界级的产品仍然需要 你 .

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(255, 255, 255); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(0, 56, 16);">我们已经建立了我们的ML团队,投资于早期开发已经有一段时间了。为了加速这项投资,我很高兴今天能分享我们获得的图表。图是由乔丹辛格创建的,他是菲格玛社区的长期成员,多年来在我们的平台上建立了3支由ii协助的工具。图表的工具使设计感到神奇。我们将使用图表 通过整个菲格玛平台提供人工智能功能 .

figma-81kuz0" style="box-sizing: inherit; cursor: var(--cursorText); margin: 80px 0px 40px; font-family: hex-franklin-variable; font-size: min(3.8889vw, 56px); font-variation-settings: "wght" 750, "wdth" 74; font-feature-settings: "ss01"; letter-spacing: 0.01em; line-height: 1.12; color: rgb(255, 255, 255); text-wrap: wrap; background-color: rgb(0, 56, 16);">为每个学生建立一个数字化的未来

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(255, 255, 255); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(0, 56, 16);">未来需要更多的思考者和建设者,人工智能将使更多的人响应这个呼吁。这就是为什么我们的无花果教育计划对我们如此重要的原因。这是我们从菲格玛早期就开始投资的东西。我们一直致力于向任何学生或教育者免费提供所有菲格玛产品。我们会永远这样做的。

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: rgb(255, 255, 255); margin-block: 24px; font-family: hex-franklin-variable; font-size: 18px; text-wrap: wrap; background-color: rgb(0, 56, 16);">去年,我们 宣布与谷歌Chrome图书公司合作 把菲格玛和菲格姆带到教室里的学生(13岁以上)。我们与全国50所学校和10万名学生合作,了解他们的特殊需求。今天,我们 将这一伙伴关系转变为普遍提供

figma.net.cn/core/extend/ueditor/themes/default/images/img-cracked.png" srcset="https://cdn.sanity.io/images/599r6htc/localized/bac38be5cf9cea2d75ade36cff69527fb096fc34-3840x2160.jpg?q=75&fit=crop&crop=focalpoint&auto=format&dpr=0.5 1920w,https://cdn.sanity.io/images/599r6htc/localized/bac38be5cf9cea2d75ade36cff69527fb096fc34-3840x2160.jpg?q=75&fit=crop&crop=focalpoint&auto=format&dpr=0.75 2880w,https://cdn.sanity.io/images/599r6htc/localized/bac38be5cf9cea2d75ade36cff69527fb096fc34-3840x2160.jpg?q=75&fit=crop&crop=focalpoint&auto=format 3840w,https://cdn.sanity.io/images/599r6htc/localized/bac38be5cf9cea2d75ade36cff69527fb096fc34-3840x2160.jpg?q=75&fit=crop&crop=focalpoint&auto=format&dpr=1.5 5760w,https://cdn.sanity.io/images/599r6htc/localized/bac38be5cf9cea2d75ade36cff69527fb096fc34-3840x2160.jpg?q=75&fit=crop&crop=focalpoint&auto=format&dpr=2 7680w" loading="lazy" alt="学生们坐在笔记本旁" style="box-sizing: inherit; border-style: none; cursor: var(--cursorPointer); display: block; object-fit: cover; aspect-ratio: 21 / 9; width: 298px;" data-catch-result="fail"/>

figma-19jvqfh" style="box-sizing: inherit; cursor: var(--cursorPointer); margin: 12px 0px 4px; font-family: hex-franklin-variable; font-size: 16px; font-variation-settings: "wght" 600, "wdth" 98; line-height: 1.7; letter-spacing: 0px;">

,所以美国任何一个学区的教室都可以免费使用菲格玛。我们将首次扩大我们的课程,将美国和日本的所有年龄段的学生都包括在内,我们在这里引入了菲格玛的第一个本地化用户界面。