Figma 开发者版

如果您是一位与设计师合作的开发者，那么您一定对臭名昭著的“交接”环节并不陌生——也就是在工作流程中，您将线框和模型转化为代码的环节。即使您个人并不熟悉这个过程，听到这可能是一个真正的痛点也并不奇怪。然而，如果双方都能理解对方在交接过程中的需求，这种痛点就可以减轻。

设计师应该对前端 Web 有相当透彻的了解：HTML 元素、CSS 盒模型、响应式调整大小的工作原理、基于组件的结构等。然而，当我们翻转脚本时，很少期望开发人员了解设计基础知识——这是怎么回事？

更不用说，Figma 套件正成为使用第三方组件库的团队越来越受欢迎的选择。例如，KendoUI 的这款 Figma 套件提供了所有组件，并分解成基本元素，方便在 Figma 中进行自定义。使用其中一款套件，您可以与设计师完美同步……但是，为了充分利用这样的工具，您需要至少了解一点 Figma 的使用方法。

当双方对彼此的工具和优先级有深入的了解时，团队合作会更高效，创造出更优质的产品。更不用说，访问设计源文件还能让你的工作更加轻松。考虑到这一点，我很乐意向我的开发者朋友们介绍Figma，它是最受欢迎、使用最广泛的 UI 设计工具之一。它个人免费使用，所以我鼓励你注册一个账户，开始体验吧！这是最好的学习方式。

与任何专业软件一样，如果您不熟悉 Figma 文件，浏览起来可能会有点不知所措。因此，让我们从头开始，了解基础知识，以及对开发人员最有用的 Figma 功能。

Figma 文件组织

Figma 文件按页面（类似于应用程序的屏幕）组织，每个页面包含框架（子页面，通常用于组织各种用户交互状态下的页面模型）。每个框架由元素（形状、文本、矢量等）组成。元素（或元素组）可以保存为可重复使用的组件。元素可以使用样式（例如颜色或字体）进行自定义。样式（或样式组）可以保存为设计令牌，并组织到可共享的库中，以便于重复使用。

了解情况

首次打开 Figma 文件时，您将看到以下内容：

• 中央面板显示当前页面内容。点击任意元素即可选中它，左侧和右侧边栏均会显示选中内容。
• 您可以在左侧边栏找到文档结构，该结构以嵌套和分层的视图形式组织。
• 右侧边栏有三个主要部分——设计、原型和检查。
  • 设计允许设计师调整每个元素的样式。此选项卡的内容将根据所选元素而变化（形状的颜色、边框等，文本的字体选择、大小等）。
  • 原型允许设计师将所有框架连接在一起形成一个可点击的原型。
  • Inspect将选定的内容总结为 CSS 属性和代码。

开发人员为什么要关注？
原型工具是进行用户测试和验证想法的绝佳方式，无需开发人员编写任何代码。这不仅节省了开发时间，因为设计师可以在开发阶段之前调整UI（这有什么不好呢？），而且在此阶段进行用户测试还为开发人员提供了在开始构建之前与设计师和用户进行交流的机会。当开发人员能够实时了解用户的动机和痛点，并在流程早期参与用户对话时，就能打造出更加直观、更具凝聚力的产品。这有助于将开发周期从被动（“我们必须修复这个收到很多负面反馈的问题”）转变为主动（“我们在测试过程中发现用户在执行这项任务时遇到了困难，所以让我们更加注意简化流程”）。更不用说，能够随时探索原型意味着您无需再思考“等等，当他们点击这个按钮时应该会发生什么？”

如果您想仔细查看模型的细节，可以使用Ctrl+G打开网格，这将帮助您了解正在构建内容的间距和结构。您还可以使用Shift+R切换标尺，并通过选择元素并按住 Option 键并将鼠标悬停在其周围的项目上来显示元素之间的间距值。

导出资产

好了，你已经浏览了文件，并且感觉对需要构建的内容和原因有了扎实的理解。是时候开始写代码了。好消息是——Figma 也让这一切变得更容易！

要定义高级样式，您需要库中的内容——这些设计令牌是重复出现的 CSS 值，您需要将其转换为变量和/或分配给全局样式表中的属性。如果您从左侧边栏中选择最高级别的页面，设计令牌将显示在右侧边栏中。您可以点击每个页面的旋钮图标进行检查，并查看在 CSS 文件中重新创建它所需的所有细节。

不幸的是，Figma 没有原生方式导出这些库……幸运的是，你可以添加一些第三方 Figma 插件来帮你完成这项工作！我推荐Unite UX，它真的让导出变得轻而易举。如果你下载Figma 插件，你可以将 Figma 文件中的所有数据导出到 Unite UX，根据代码检查设计，然后从 Unite UX 导出最终的样式文件。Unite UX 导出包将包含大量有用的 SASS 文件（其中之一是“_tokens.scss”），你可以将它们直接添加到项目中。搞定！

开发人员为什么要关心？
不用再复制粘贴样式了！不用再费力想出独特的变量名，结果却发现设计团队给同一个变量起了完全不同的名字！不用再费力地在导出的 PDF 和浏览器之间来回切换，直到它们看起来越来越像，从而匹配 padding 值了！唉，光是写这些就已经让我精疲力尽了。

一旦你了解了高级样式，并深入了解细节，Figma 右侧边栏的“检查”工具就会成为你的新朋友。与所有主流浏览器中的检查工具类似，Inspect 工具可以让你深入研究单个元素并获取所有详细信息——这些信息会被格式化为 CSS 属性。你可以以属性列表或自动生成的代码的形式获取这些信息，这两种方式都提供快速复制选项。

开发人员为什么要关注？
Figma 的 Inspect 工具真正让开发人员眼前一亮，它能将样式汇总到 CSS 属性甚至代码片段中！一如既往，盲目复制粘贴机器生成的代码并不明智，但作为调整和调整的起点，它非常有用。这比从头开始使用某种颜色选择器工具，或者（不寒而栗）尝试用眼睛匹配值要好得多。

最后，如果模型中包含任何图像或自定义图标，您也需要将其导出。理想情况下，您的设计师会将您需要的资源标记为“可导出” ——如果是这样，那么您可以选择要导出项目的页面或框架，使用Cmd+Shift+E打开“导出面板” ，然后将他们标记的所有内容从一个地方导出。如果没有，则必须一次导出一个资源。选择要导出的内容，然后在右侧边栏中向下滚动，直到看到“导出”部分。在那里，您可以自定义大小和导出文件类型（PNG、SVG、JPG 或 PDF），然后点击下方的“导出”按钮。

开发者为什么要关心这个问题？
有多少次，你不得不暂停项目，以便联系 DM 设计师（他们可能正忙于其他事情），并要求他们发送你需要的素材？然后，当你终于拿到这些素材时，却发现它们的分辨率不够高，或者缺少了某些东西，或者导出的是 JPG 格式，而不是……嗯，其他格式？现在就不用再来回奔波了，放心地从源文件直接获取所需内容吧。

减轻交接的痛苦

如果设计/开发团队愿意互相妥协，交接过程并不一定非得是痛点。许多优秀的产品都在努力弥合这一差距，但归根结底，即使是最好的工具，也只有在你对使用场景有充分的理解时才会发挥作用。你无需深入了解设计概念，也能从 Figma 的使用中受益。当开发人员能够探索和使用实际的设计源文件时，每个人都能从中受益！