ch
English
与 Confluence 和 Avocode 等工具的集成支持设计过程的不同阶段，从用户反馈到生产。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px; margin-top: 0px;">在 Figma，我们相信开放式设计平台，因为它允许团队定制他们的工作方式。开放的 API 意味着团队可以将 Figma 与他们在整个产品开发过程中使用的其他工具集成，从而形成更有效的工作流程。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">虽然可以在 Figma 中端到端设计产品，但您可能需要与开发人员和产品经理合作来构建、测试和交付这些产品。这项工作通常发生在专门为这些目的而构建的工具中。借助开放平台，您可以轻松地将 Figma 设计引入这些工具中。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">下面，我们将分享一些最近推出的集成，这些集成可以让您更轻松地将 Figma 引入产品开发流程的不同阶段，无论您是在收集反馈、与开发人员合作，还是希望快速将设计投入生产。
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嵌入
figma.net.cn/core/extend/ueditor/themes/default/images/img-cracked.png" srcset="https://cdn.sanity.io/images/599r6htc/localized/72dc9273049a52d562f557f43cfd292569423271-4240x2000.png?q=75&fit=crop&crop=focalpoint&auto=format&dpr=0.5 2120w,https://cdn.sanity.io/images/599r6htc/localized/72dc9273049a52d562f557f43cfd292569423271-4240x2000.png?q=75&fit=crop&crop=focalpoint&auto=format&dpr=0.75 3180w,https://cdn.sanity.io/images/599r6htc/localized/72dc9273049a52d562f557f43cfd292569423271-4240x2000.png?q=75&fit=crop&crop=focalpoint&auto=format 4240w,https://cdn.sanity.io/images/599r6htc/localized/72dc9273049a52d562f557f43cfd292569423271-4240x2000.png?q=75&fit=crop&crop=focalpoint&auto=format&dpr=1.5 6360w,https://cdn.sanity.io/images/599r6htc/localized/72dc9273049a52d562f557f43cfd292569423271-4240x2000.png?q=75&fit=crop&crop=focalpoint&auto=format&dpr=2 8480w" 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-size: 16px; font-variation-settings: "wght" 600, "wdth" 98; line-height: 1.7; letter-spacing: 0px;">
它允许您将实时 Figma 文件嵌入到 Notion、Jira 和 Dropbox Paper 等工具中。Confluence现在支持嵌入，这是一个团队工作区，产品团队可以在其中协作处理文档、规划新功能并了解正在进行的项目的最新信息。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">产品规格和要求是开发人员的核心事实来源。由于他们在构建新功能时经常参考这些文档，因此所有内容都是最新的至关重要。在 Confluence 页面中嵌入 Figma 文件和原型意味着最新的设计会显示在上下文中，因此您不再需要不断更新产品屏幕截图。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">开始在下一个Confluence 页面中使用嵌入文件。
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;">GitLab
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">当开发人员完成冲刺时，他们需要一种方法来轻松管理正在进行的任务，同时对新请求和问题进行分类。产品团队使用GitLab来跟踪任务并在构建、测试和部署代码时查看更改。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">借助新的 GitLab 插件，设计可以直接从 Figma 上传到 GitLab 问题中，使开发人员可以轻松对其进行版本控制、在上下文中进行审查并提供反馈。这不仅可以节省时间，还可以让您的团队更有效地处理手头的任务。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">有关如何安装和使用 Gitlab 插件的更多详细信息，请观看此视频。
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;">团队通常在移交过程中使用Avocode来共享、检查和协作设计。自 2019 年推出定制 Figma 集成以来，Avocode 已更新并发布了其集成作为新插件。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">该插件通过将设计同步到 Avocode 中的项目来帮助设计人员指定开发就绪的设计。当设计人员继续迭代其他正在进行或探索性的工作时，开发人员可以访问 Avocode 内已完成的 Figma 设计中的所有层。这使他们能够导出所有资产，获取测量值和颜色代码等值，或以十种不同语言复制整个代码片段，包括 CSS、JS 中的 CSS 或 React Native。无需从一个工具跳到另一个工具来获取相关的设计细节，从而简化了交接过程，因此您的团队可以快速从设计转向代码。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">获取有关如何安装和使用 Avocode 重新推出的插件的所有详细信息。
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;">尽早与合适的客户共享线框图和原型可以帮助您的团队在投入资源构建产品或功能之前识别关键问题。Pendo是产品经理在整个开发过程中用来显示客户反馈的工具。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">Pendo 的集成从 Figma 文件中提取实时设计，以便您可以在目标特定用户群在您的产品中活跃时向他们展示新功能或建议的更新。虽然与协作者和内部利益相关者讨论新功能很重要，但大规模获取客户反馈可以帮助您的团队在构建和启动新功能之前了解并预测用户的反应。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">设计师与团队共享线框图和原型后，产品经理使用 Pendo 集成将这些原型嵌入产品中的特定位置，以便尽早获得用户的有针对性的反馈。用户与 Figma 文件交互后，团队可以使用 Pendo 通过调查问题和开放文本回复收集反馈，或安排用户研究访谈。通过尽早并经常收集用户反馈，您可以确保您构建的功能能够满足客户的需求。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">开始在您的下一个 Pendo 应用内指南中嵌入 Figma 文件。
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;">借助Bubble，团队可以将设计转变为 Web 应用程序，而无需编写代码，从而缩短了设计和实现之间的时间。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">首先，您的团队可以开始在 Figma 中协作设计，可以从头开始，也可以在已发布的社区文件的基础上进行构建。一旦这些设计准备就绪，您就可以使用 Bubble 的集成直接从 Figma 导入它们。文件中的每一帧都会在您的 Bubble 应用程序中创建一个新页面，并且每个矢量都将作为图像上传。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">传输完成后，您和您的团队可以通过向设计添加逻辑、工作流程和数据库功能，在 Bubble 应用程序中继续完善。无需编写代码行将帮助您的团队快速从原型开发到适用于桌面和移动网络浏览器的可投入生产的交互式应用程序。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">查看Bubble 集成并开始导入 Figma 框架。
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;">营销团队可以使用Maker（一个无代码平台）为电子商务网站创建增强的内容 - 直接从 Figma 导入。
figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">借助 Maker，Figma 中的所有内容都成为您和您的团队完全可编辑的块。您将能够转换 Figma 中的设计，以创建和发布新的登陆页面、增强现有页面的各个部分、轻松地对各种设计理念进行 A/B 测试，并为您的客户提供个性化体验。这使团队中的开发人员无需编写设计代码，从而腾出时间，并将营销人员置于主导地位。
