如何使设计工具对开发人员更有效?这是一个我们一直在问自己和我们社区的问题。今天,我们很高兴地引入了开发模式,这是一个费格玛的新工作区,它设计的目的是在开发人员需要时,利用他们每天使用的工具,向他们提供他们需要的东西。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px; margin-top: 0px;">菲格玛诞生于网络上--这是一个非传统的设计工具的开端,但我们觉得产品设计是急需的。只要有一个链接,设计师就可以在进行中的工作上进行协作,分享早期的探索,而不是在他们感到"抛光"之前保护设计。"随着越来越多的设计师拥抱菲格玛和这种多人工作方式,我们开始看到跨团队和学科的使用自然地扩大,特别是对开发人员。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">今天,我们知道在我们的付费计划中,访问菲格玛的开发人员多于设计师。我们也知道,了解开发人员的需求和他们的挑战,对于使菲格玛成为一个能够更高效、协作和表现的产品开发的地方至关重要。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">开发人员有独特的工作流和偏好。从与成熟设计系统合作的前端开发人员,到设计系统工程师构建组件,到那些与品牌设计师合作的构建内容布局和输出资产,每个团队都希望尽可能减少摩擦。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">与…有关 动态模式 我们看到了一个巨大的机会,可以快速有效地向开发人员提供他们需要的东西--就像我们第一次开始构建FIFMA时对设计师所做的那样。团队越容易设计、记录、找到和实现高保真设计,同时又不忽视工作和彼此,产品效果越好。我们很高兴在菲格玛的设计和开发中迈出了第一步,我们迫不及待地想看看下一步团队会做什么。
figma-eunxs4" style="box-sizing: inherit; margin: 0px auto; width: calc((var(--blog-col-width) * 12) + (var(--blogGutterWidth) * 11) - 0px);">figma-1tn5cqn" style="box-sizing: inherit; font-family: inherit; font-size: inherit; line-height: inherit; margin: 0px; overflow: visible; appearance: none; cursor: var(--cursorPointer); padding: 0px; background: rgb(19, 19, 19); font-weight: inherit; text-align: inherit; position: absolute; bottom: 16px; right: 72px; width: 49px; height: 49px; border-width: 1px; border-style: solid; border-color: rgb(255, 255, 255); border-radius: 100%; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; transition: opacity 200ms ease 0s; color: rgb(255, 255, 255); z-index: 100; outline: none;"> figma-13ayngw" style="box-sizing: inherit; font-family: inherit; font-size: inherit; line-height: inherit; margin: 0px; overflow: visible; appearance: none; cursor: var(--cursorPointer); padding: 0px; background: rgb(19, 19, 19); font-weight: inherit; text-align: inherit; position: absolute; bottom: 16px; right: 16px; width: 49px; height: 49px; border-width: 1px; border-style: solid; border-color: rgb(255, 255, 255); border-radius: 100%; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; transition: opacity 200ms ease 0s; color: rgb(255, 255, 255); z-index: 100; outline: none;">
figma-j5f16m" style="box-sizing: inherit; font-size: 14px; line-height: 1.64; margin-top: 12px;">
figma-y6citn" style="box-sizing: inherit; cursor: var(--cursorText); margin: 80px 0px 40px; font-size: min(5vw, 72px); font-variation-settings: "wght" 750, "wdth" 70; font-feature-settings: "ss01"; line-height: 1.04; letter-spacing: 0.005em;">快编码 figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">虽然菲格玛画布对于自由格式设计探索来说是很棒的,但是如果你掉进一个缺少实现所需信息的设计文件,它会让你感到困惑。开发模式就像设计文件的浏览器检查员,它带来了设计概念--形状、层和组--更接近开发人员的概念,比如代码、图标和标记。通过在菲格玛画布周围盘旋和点击,您可以找到和导出您需要的所有信息,如测量、规格和资产,并从您的设计系统中发现额外的上下文。很像 发展工具 ,开发模式从其他开发工具中汲取灵感,创建一个你马上就熟悉的环境。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">在发展模式中的代码是完全重新设计和定制的,无论您在哪种语言中工作。我们知道密码在盒子里是没用的。相反,这是一个起点,所以你不必每次都从0到1。现在你将看到一个CSS框模型,一个带有树视图的现代语法,你可以在维度单位之间切换以匹配你的代码栏。
figma-11iqi6v" style="box-sizing: inherit; margin: 0px auto; width: calc((var(--blog-col-width) * 8) + (var(--blogGutterWidth) * 7) - 0px);">figma-13ayngw" style="box-sizing: inherit; font-family: inherit; font-size: inherit; line-height: inherit; margin: 0px; overflow: visible; appearance: none; cursor: var(--cursorPointer); padding: 0px; background: rgb(19, 19, 19); font-weight: inherit; text-align: inherit; position: absolute; bottom: 16px; right: 16px; width: 49px; height: 49px; border-width: 1px; border-style: solid; border-color: rgb(255, 255, 255); border-radius: 100%; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; transition: opacity 200ms ease 0s; color: rgb(255, 255, 255); z-index: 100; outline: none;">
figma-j5f16m" style="box-sizing: inherit; font-size: 14px; line-height: 1.64; margin-top: 12px;">
figma-y6citn" style="box-sizing: inherit; cursor: var(--cursorText); margin: 80px 0px 40px; font-size: min(5vw, 72px); font-variation-settings: "wght" 750, "wdth" 70; font-feature-settings: "ss01"; line-height: 1.04; letter-spacing: 0.005em;">把你需要的东西,放在一个地方
使用GITUUB插件,您可以链接文件、问题和对FIFMA组件和设计的请求,因此您总是在一个地方拥有所需的上下文。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">构建产品需要一个强大的工具链,但是在设计库、代码库和其他项目管理工具之间跳跃会造成效率低下,特别是当组件和样式名称与代码中的内容不匹配,或者团队无法跟踪和记录任务时。开发模式旨在通过将您使用的工具和代码组件连接到设计文件,使您更加高效。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">在你的团队工作的时候,你可以扩展菲格玛的功能。你可以用 吉拉 , 直线的 ,以及 吉特布 这样你和你的设计师就能知道在你各自的过程中发生了什么。 故事书 在设计本身的上下文中,帮助您参考代码库中发生的事情。科德根插件来自 放大工作室 , 谷歌中继 ,以及 阿尼玛 帮助您定制代码输出-您甚至可以根据您的唯一工作流创建自己的代码输出。
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-ykdrjc">
figma-ti75j2" style="box-sizing: inherit; margin: 0px;">figma-e4r5nb" style="box-sizing: inherit; 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; font-family: reform; margin-bottom: 40px;">figma-mayfla" style="box-sizing: inherit; position: absolute; height: 1px; width: 1px; text-wrap: nowrap; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); overflow: hidden;">拥有与我们的日常工具互联的插件是非常有用的。我们使用吉塔布,我们使用故事书-它节省了我很多时间。 figma-1mr4x4q" style="box-sizing: inherit; margin-left: -0.46em; opacity: 1;">“ figma-0" style="box-sizing: inherit; opacity: 1;">它是 figma-0" style="box-sizing: inherit; opacity: 1;">非常地 figma-0" style="box-sizing: inherit; opacity: 1;">有用的 figma-0" style="box-sizing: inherit; opacity: 1;">到 figma-0" style="box-sizing: inherit; opacity: 1;">拥有 figma-0" style="box-sizing: inherit; opacity: 1;">普尔金斯 figma-0" style="box-sizing: inherit; opacity: 1;">那个 figma-0" style="box-sizing: inherit; opacity: 1;">互相连接 figma-0" style="box-sizing: inherit; opacity: 1;">与…有关 figma-0" style="box-sizing: inherit; opacity: 1;">我们的 figma-0" style="box-sizing: inherit; opacity: 1;">每日的 figma-0" style="box-sizing: inherit; opacity: 1;">工具。 figma-0" style="box-sizing: inherit; opacity: 1;">我们 figma-0" style="box-sizing: inherit; opacity: 1;">使用 figma-0" style="box-sizing: inherit; opacity: 1;">吉特布, figma-0" style="box-sizing: inherit; opacity: 1;">我们 figma-0" style="box-sizing: inherit; opacity: 1;">使用 figma-0" style="box-sizing: inherit; opacity: 1;">故事书--它 figma-0" style="box-sizing: inherit; opacity: 1;">挽救 figma-0" style="box-sizing: inherit; opacity: 1;">我 figma-0" style="box-sizing: inherit; opacity: 1;">A figma-0" style="box-sizing: inherit; opacity: 1;">分配 figma-0" style="box-sizing: inherit; opacity: 1;">属于…的 figma-0" style="box-sizing: inherit; opacity: 1;">时间。 figma-0" style="box-sizing: inherit; opacity: 1;">”
figma-33cd3m" style="box-sizing: inherit; font-size: 16px; font-variation-settings: "wght" 600, "wdth" 98; line-height: 1.7; letter-spacing: 0px; margin-left: 1em;">劳伦特蒂博,工程经理和设计系统领导,十元全能(部分发展模式测试版)
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">设计系统越来越强大 通过变量介绍设计标志
figma-19jvqfh" style="box-sizing: inherit; cursor: var(--cursorPointer); margin: 12px 0px 4px; font-size: 16px; font-variation-settings: "wght" 600, "wdth" 98; line-height: 1.7; letter-spacing: 0px;">
.令牌就像可以跨设计和跨代码使用的一些UI数据。这些现在以发展模式出现,所以马上就可以清楚地知道需要什么来开始构建。您还可以添加与画布上的对象相关的链接来引用文档,或者您的插件中的内容。
figma-y6citn" style="box-sizing: inherit; cursor: var(--cursorText); margin: 80px 0px 40px; font-size: min(5vw, 72px); font-variation-settings: "wght" 750, "wdth" 70; font-feature-settings: "ss01"; line-height: 1.04; letter-spacing: 0.005em;">追踪需要去生产的东西 figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">即使在产品开发的设计和开发阶段 混在一起
figma-19jvqfh" style="box-sizing: inherit; cursor: var(--cursorPointer); margin: 12px 0px 4px; font-size: 16px; font-variation-settings: "wght" 600, "wdth" 98; line-height: 1.7; letter-spacing: 0px;">
来自每个设计文件和代码的工件仍然是不同的。到目前为止,导航设计文件、选择特定组件及其属性都不容易,甚至不知道自上次查看文件以来发生了什么变化。现在,设计人员可以简单地将一个部分贴上"准备开发"的标签,直接发送给你,而不创建单独的页面或文件。DIFF支持允许您比较不同版本的框架的更改,并保持最新状态。
figma-2w6ihj" style="box-sizing: inherit; margin: 0px;">
figma-2w6ihj" style="box-sizing: inherit; margin: 0px;">
figma-y6citn" style="box-sizing: inherit; cursor: var(--cursorText); margin: 80px 0px 40px; font-size: min(5vw, 72px); font-variation-settings: "wght" 750, "wdth" 70; font-feature-settings: "ss01"; line-height: 1.04; letter-spacing: 0.005em;">扩展您的工作流程 figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">与… VS代码扩展 您可以将发展模式的力量引入代码编辑器,以审查设计,查看通知和注释,并保持对更改的最高控制,而不必离开编码环境。V代码扩展部分还自动完成了基于您正在检查的设计的代码,帮助您更快地工作。
figma-2w6ihj" style="box-sizing: inherit; margin: 0px;">
figma-j5f16m" style="box-sizing: inherit; font-size: 14px; line-height: 1.64; margin-top: 12px;">VS代码扩展名的菲格马将您的菲格马文件导入代码编辑器 figma-2w6ihj" style="box-sizing: inherit; margin: 0px;">figma-1tn5cqn" style="box-sizing: inherit; font-family: inherit; font-size: inherit; line-height: inherit; margin: 0px; overflow: visible; appearance: none; cursor: var(--cursorPointer); padding: 0px; background: rgb(19, 19, 19); font-weight: inherit; text-align: inherit; position: absolute; bottom: 16px; right: 72px; width: 49px; height: 49px; border-width: 1px; border-style: solid; border-color: rgb(255, 255, 255); border-radius: 100%; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; transition: opacity 200ms ease 0s; color: rgb(255, 255, 255); z-index: 100; outline: none;"> figma-13ayngw" style="box-sizing: inherit; font-family: inherit; font-size: inherit; line-height: inherit; margin: 0px; overflow: visible; appearance: none; cursor: var(--cursorPointer); padding: 0px; background: rgb(19, 19, 19); font-weight: inherit; text-align: inherit; position: absolute; bottom: 16px; right: 16px; width: 49px; height: 49px; border-width: 1px; border-style: solid; border-color: rgb(255, 255, 255); border-radius: 100%; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; transition: opacity 200ms ease 0s; color: rgb(255, 255, 255); z-index: 100; outline: none;">
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">动态模式 和 比较代码 在2023年剩下的时间里,所有用户都可以免费试用。从2024年开始,您将需要一个付费计划来访问开发模式。如果你今天是一个付费计划的编辑,那么就包括了发展模式。我们知道有一些开发人员可能不需要完全堆叠的菲格玛特性,所以我们为他们推出了两个新的计划选项。从2024年开始,你将有一个选择,购买发展模式访问,每个组织每月25美元,每个企业每月35美元。
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-ykdrjc">
figma-ti75j2" style="box-sizing: inherit; margin: 0px;">figma-e4r5nb" style="box-sizing: inherit; 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; font-family: reform; margin-bottom: 40px;">figma-mayfla" style="box-sizing: inherit; position: absolute; height: 1px; width: 1px; text-wrap: nowrap; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); overflow: hidden;">There’s a much higher level of trust when people are in the same tool—the information is much more up-to-date, you’re not pulling down some files to your computer or chasing things over email anymore. It’s a much more collaborative process. figma-1mr4x4q" style="box-sizing: inherit; margin-left: -0.46em; opacity: 1;">“ figma-0" style="box-sizing: inherit; opacity: 1;">有一种 figma-0" style="box-sizing: inherit; opacity: 1;">A figma-0" style="box-sizing: inherit; opacity: 1;">非常地 figma-0" style="box-sizing: inherit; opacity: 1;">较高的 figma-0" style="box-sizing: inherit; opacity: 1;">水平的 figma-0" style="box-sizing: inherit; opacity: 1;">属于…的 figma-0" style="box-sizing: inherit; opacity: 1;">信任 figma-0" style="box-sizing: inherit; opacity: 1;">何时 figma-0" style="box-sizing: inherit; opacity: 1;">人 figma-0" style="box-sizing: inherit; opacity: 1;">是 figma-0" style="box-sizing: inherit; opacity: 1;">在…中 figma-0" style="box-sizing: inherit; opacity: 1;">… figma-0" style="box-sizing: inherit; opacity: 1;">相同的 figma-0" style="box-sizing: inherit; opacity: 1;">工具---- figma-0" style="box-sizing: inherit; opacity: 1;">信息 figma-0" style="box-sizing: inherit; opacity: 1;">是 figma-0" style="box-sizing: inherit; opacity: 1;">非常地 figma-0" style="box-sizing: inherit; opacity: 1;">更多的 figma-0" style="box-sizing: inherit; opacity: 1;">最新的, figma-0" style="box-sizing: inherit; opacity: 1;">你就是 figma-0" style="box-sizing: inherit; opacity: 1;">不 figma-0" style="box-sizing: inherit; opacity: 1;">拉 figma-0" style="box-sizing: inherit; opacity: 1;">向下地 figma-0" style="box-sizing: inherit; opacity: 1;">一些 figma-0" style="box-sizing: inherit; opacity: 1;">文件 figma-0" style="box-sizing: inherit; opacity: 1;">到 figma-0" style="box-sizing: inherit; opacity: 1;">你的 figma-0" style="box-sizing: inherit; opacity: 1;">计算机 figma-0" style="box-sizing: inherit; opacity: 1;">或 figma-0" style="box-sizing: inherit; opacity: 1;">追踪 figma-0" style="box-sizing: inherit; opacity: 1;">事物 figma-0" style="box-sizing: inherit; opacity: 1;">超过 figma-0" style="box-sizing: inherit; opacity: 1;">电子邮件 figma-0" style="box-sizing: inherit; opacity: 1;">不会再有了。 figma-0" style="box-sizing: inherit; opacity: 1;">它是 figma-0" style="box-sizing: inherit; opacity: 1;">A figma-0" style="box-sizing: inherit; opacity: 1;">非常地 figma-0" style="box-sizing: inherit; opacity: 1;">更多的 figma-0" style="box-sizing: inherit; opacity: 1;">合作的 figma-0" style="box-sizing: inherit; opacity: 1;">程序。 figma-0" style="box-sizing: inherit; opacity: 1;">”
figma-33cd3m" style="box-sizing: inherit; font-size: 16px; font-variation-settings: "wght" 600, "wdth" 98; line-height: 1.7; letter-spacing: 0px; margin-left: 1em;">乔里·拉洛,线性公司联合创始人
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">这只是使FIFMA对开发人员更好的第一步。你的投入来自于 动态模式 和 VS码 我们兴奋地扩展功能,包括更多的方法来改进设计师和开发者的协作,提取规格,以及推动设计和代码之间的更一致。
ch
English
