Figma已经在许多公司中广受欢迎。

原因包括：

  1. 💸 免费使用
  2. 🌐 基于浏览器
  3. 🌦️ 云端平台
  4. 🤖 AI集成
  5. ⚡ 实时协作

鉴于许多开发人员可能对设计工具不太熟悉，我们将涵盖您有信心使用Figma所需的所有基本知识。这包括了解其基本功能，并学习如何从设计师发送的设计中提取信息。

开发者交接 #

让我们回顾一下Figma出现之前的开发者交接过程，因为它发生了重大变化。

设计协作的革命 #

设计团队过去会通过电子邮件向开发团队发送数十个附件，其中包含设计的静态图像、导出的资源，甚至带有页面内容的Word文档。

沟通和反馈分散在电子邮件、项目管理工具和会议记录中。每个人都在努力跟踪设计的更改；每次设计更新，都需要将其发送给所有相关人员。

随着设计工具的现代化，这个过程变得更加高效。

设计师通常会使用类似于Zeplin (opens new window)或Invision (opens new window)的独立工具将设计交给开发人员。

现在，开发人员可以更好地访问设计，并有更多工具可用于提取有关字体、颜色和尺寸的信息。

尽管每个人更容易找到最新版本的设计，设计师仍需要在不同的工具中工作并保持同步。

然后Figma出现并解决了这个问题。

Figma是一个出色的用于UI设计、UX设计和原型设计的工具。如果查看其特性和所需技能集，该工具类似于Sketch (opens new window)。

但是，Figma在于它是基于云的且注重协作，因此每个人都可以使用它，而无需安装任何内容。

Figma的两个强大工具，FigJam和FigJam AI（最近发布），以及“DEV模式”已经改变了UI设计行业。

现在开发人员和设计师可以在一个地方共同工作。

让我简要介绍一下这些新的Figma工具。

FigJam (opens new window) #

FigJam是2021年推出的一款基于Figma的白板工具，可在Figma平台内进行头脑风暴和构思。 使用FigJam中的简单提示，您可以轻松生成会议模板，可视化时间轴，并执行其他任务。您可以逐步完善细节，以在几秒钟内精确实现您所需的内容。

🤖🦾FigJam AI (opens new window) #

如果您需要快速为演示文稿或网站设计，FigJam AI具有现成的模板。它与Figma，您最喜爱的设计平台，无缝配合。只需告诉它您想要什么，稍微画一下，您的想法就会活现！

它还会给出让您的设计看起来很棒的提示，并为您执行无聊的任务。

FigJam AI于2023年11月7日开始提供公开测试版，并对所有客户层次“目前免费”。您可以在免费层结束之前尝试FigJam AI (opens new window)。

我在Figma for Developers部分介绍了Figma的“开发者模式”功能。

🥊现在准备好掌握Figma。

如果您想跟随本文（或只是玩弄Figma），可以在注册Figma (opens new window)后使用下面这个漂亮的网站模板：

📩 Figma startup landing page dark (opens new window)（下载）

🥷Figma for Developers（您需要了解的一切） #

🧑‍🍼快捷键的一点提示： #

重要的是要注意，Figma中的大多数快捷键都设计为在Windows和Mac系统上均可使用。例如，Windows上的Ctrl键对应于Mac上的Cmd键，Alt可与Mac上的Option/Alt互换使用。

例如，快捷键Ctrl/Cmd + Alt + C在Windows上对应为Ctrl + Alt + C，在Mac上为Cmd + Alt/Option + C。 🦴Figma基础知识:

当您被添加为Figma设计的协作者时，您可以选择在网页浏览器中打开它或下载桌面应用程序 (opens new window)，该应用程序适用于Windows和macOS。

然而，桌面应用程序提供了内置支持使用本地字体，而浏览器版本则需要安装Figma字体助手才能实现相同的功能。

💇现在，让我们来谈谈Figma的界面。

Figma的界面分为三个主要部分。

  1. 🛝画布: 在界面中央，您会找到一个宽敞的画布，所有设计都驻留在这里。

  2. 🔳侧边栏: 位于左侧，侧边栏包含文件的图层、资源和页面，使您的设计元素得到组织。

  3. 🔦右侧工具栏: 右侧工具栏提供有关设计元素的详细信息，帮助精确编辑。

每个Figma文件可以包含多个页面，每个页面都有自己的画布。设计师通常利用页面来对设计的不同方面进行分类，例如颜色方案、排版和图标。

当您开始在新文件上工作时，请花点时间熟悉文件中不同的页面。

如果设计师已将元素组织到单独的页面中，比如颜色和排版，这将极大地简化您的工作流程。

🍖导航Figma:

在我们深入了解之前，重要的是您能快速在Figma中导航，以便更高效地工作。

当您打开一个文件时，您会从适合所有框架的可见区域开始。

这是一个快速指南。

放大和缩小:

  • 要放大或缩小，按住Cmd ⌘并上下滚动，或使用+和-键。
  • 对于画布上的水平滚动，按住空格键并用鼠标拖动。

快速缩放:

  • 选择一个框架或元素，按Shift + 2快速放大。
  • 按Shift + 1返回到默认视图，所有元素都适合画布。

快捷键提醒:

  • 如果您忘记任何快捷键，按Cmd + Shift + ?查看所有可用的快捷键。
  • 使用的快捷键以蓝色高亮显示，便于跟踪。 ### 项目样式:

在开始新项目时，设置项目样式是一个有帮助的第一步。以下是如何操作:

  • 项目样式显示在右侧边栏中。
  • 点击侧边栏查看设计中使用的排版、颜色、网格和其他样式。

项目样式只会在未选择任何元素时显示。

点击画布中的任何位置或按 Esc 键取消选择并查看项目样式。

编辑样式:

  • 点击样式元素旁边的编辑图标以查看和编辑其信息。
  • 使用此信息在 CSS 中设置布局、变量和字体。

选择元素: #

熟练选择元素是理解和解构 Figma 设计的基础。

以下是您的指南，帮助您掌握元素选择并收集必要的信息:

图层选择:

选择图层并不像简单地点击元素那样简单，因为大多数设计中的元素有多个嵌套层级。

  • 点击元素只会选择顶层图层。
  • 要选择嵌套元素中的特定图层，请按住 Command ⌘ 或 Ctrl 键单击或右键点击以访问嵌套图层菜单。

双击元素可以深入到更深的层次中。 在Figma中，有许多更多选择和导航图层的方法，本文只涵盖了80%的时间使用的基础知识。

Figma的文档教授了更多关于选择和导航图层的方法。 (opens new window)

👨‍💻开发者模式： (opens new window) #

开发者模式于2023年6月推出，可帮助您轻松导航设计文件并将设计转换为代码。它确保设计师和开发者保持一致，防止在交接过程中遗漏关键细节。

开发者使用开发者模式来：

  • 仔细检查设计并生成不同的代码语言。
  • 确保他们通过比较框架版本使用最新的规格。
  • 快速检查准备开发的设计，带有注释和标记。
  • 使用JIRA、Storybook和GitHub等工具简化工作。
  • 查看所有组件变化，而无需更改文件。
  • 使用Figma for VS Code扩展一起查看设计并编写代码。

🚧 开发者模式不再是测试版本
从1月31日开始，开发者模式将需要付费才能访问。
了解开发者模式退出测试版意味着什么 → (opens new window)

🤽‍♂️访问CSS信息：

在Dev Mode测试版结束后，没有完整版或开发者模式席位的用户仍然可以通过“属性”选项卡访问设计信息。该选项卡仅对对文件具有只读访问权限的用户可见。

对于具有编辑权限的用户，他们可以选择使用开发者模式或通过“设计”面板检查设计。

🎏请注意，CSS是自动生成的，仅用作指南，而不是直接复制粘贴的解决方案。

您可以在Figma官方网站上找到有关开发者模式的其他信息 → (opens new window)

📐⚖️测量尺寸： #

准确测量元素之间的距离对于布局和对齐至关重要。以下是方法：

  • 按住Alt键，将鼠标悬停在一个元素上，以测量到另一个元素的距离。
  • Figma会以像素显示距离。 如果您想测量到另一个组或框架中特定子元素的距离，您可以按住Cmd ⌘或ctrl键，就像选择元素以深度选择它一样。

导出资源: #

在过去，设计师通常负责导出所有资源，因为大多数开发人员没有在其系统上安装设计软件。

在Figma中，您现在可以完全访问设计，并自行导出所有内容。

🙎‍♂️以下是操作步骤:

  • 选择要导出的元素，然后点击右侧边栏中“导出”标题旁边的加号图标。

  • 自定义导出设置，如文件类型和名称后缀。

导出所有资源:

您可以逐个导出单个资源或所有可导出资源。

  • 转到主菜单，点击“导出...”下的“文件”菜单，或使用键盘快捷键Shift + Cmd + E（MacOS）或Shift + Ctrl + E（Windows）。

Figma提供了一个可导出项目列表，供最终导出前检查和调整。

📂如果您在单个文件中有大量可导出的资源，可以在图层名称中使用斜杠“/”将其标记为资源组。 Figma将自动生成一个文件夹，用于该组，并将该组中的资源导出到相应的子文件夹中。

用户流程和动画: #

Figma还支持各种动画，用于在状态或页面之间进行过渡，打开模态框或菜单，移动设备上进行拖动和滑动操作，以及创建令人惊叹的液体（粘稠）动画。 To play around with animations in Figma, follow these steps:

  1. Enter Presentation View: Click the play icon in the top right corner to enter Presentation view and preview animations.

  2. Access Animation Details: In the right sidebar, navigate to the Prototype tab to access detailed information about each animation.

  3. Understand Animation Components: Pay attention to the trigger, action, and transition components of each animation for precise replication.

For example, consider a simple animation that opens a hamburger menu. When you tap on the hamburger icon, it triggers a transition to a screen where the mobile menu is open. This transition is seamless due to a feature called Smart Animate in Figma, which gradually transforms the menu's appearance over a duration of 300 milliseconds, creating a smooth animation effect.

To learn more about animations, check out the Basics Animation Guide by Figma.

Communication #

In Figma, clear communication is just a click away. If you'd like to ask someone on the projects for clarifications, follow these steps to use comments effectively:

  • Click on the chat bubble icon in the top toolbar or press the C key to switch to the Comment tool.
  • Select any element in your design and start typing your comment or question. 使用 @ 符号后跟团队成员的名字，以确保他们收到关于您的评论的通知。

解决问题后，将评论标记为 已解决，以简化沟通。

请记住，每条评论对所有可以访问设计的个人都是可见的，因为没有私人评论或聊天。一旦问题解决，就可以相应地标记评论，评论将变灰。

在我们与 Figma 的旅程中，您已经掌握了从任何 Figma 设计文件中高效导航和提取关键信息的技能。从理解字体和颜色选择到测量边距、填充和元素位置，您已经具备处理各种任务的能力。

此外，您还学会了如何导出资源并与团队成员有效合作。

要进一步学习您的 Figma 技能，Figma 的文档 (opens new window) 是一个宝贵的资源。

如果您曾经想过前端开发的未来以及为什么像 Figma 和 FigJam AI 这样的 AI 设计工具将主导低代码/无代码市场，那么这篇文章是必读的 ➡️ 前端开发的未来 (opens new window)。

敬请关注更有价值的内容，如果您觉得有帮助，请随时关注我的 Twitter (opens new window) 账号。

感谢您抽出时间阅读本文。下次再见，继续学习！💪