开发人员掌握 Figma（完整指南）

🗝️ 关键概念

Figma 在企业中获得了广泛的欢迎。

原因包括：

1. 💸免费使用

2. 🌐 基于浏览器

3. 🌦️基于云的平台

4. 🤖 AI 集成

5. ⚡ 实时协作

🙎‍♂️本文旨在帮助那些可能不太了解设计工具或不太了解使用 Figma 所需了解的一切的开发人员。

鉴于许多开发人员可能缺乏丰富的设计工具使用经验，我们将涵盖您自信使用 Figma 所需的所有基础知识。这包括了解其基本功能以及如何从设计师发送的设计中提取信息。

👨‍💻开发者交接

让我们回顾一下Figma 出现之前的开发人员交接流程，因为它已经发生了重大变化。🎭

🧬 设计协作的革命：

设计团队过去常常向开发团队发送一封电子邮件，其中包含数十个附件，其中包含设计的静态图像、导出的资产，甚至带有页面副本的 Word 文档。

🚫 开发人员通常无法访问完整的设计文件，因为设计软件的许可证价格昂贵且并非绝对必要。

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

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

设计师通常会使用Zeplin或Invision等单独的工具将设计交给开发人员。🚮

开发人员现在可以更好地访问设计，并可以使用更多工具来提取有关排版、颜色和测量的信息。

尽管每个人都能更轻松地找到设计的最新版本，但设计师需要使用不同的工具并保持同步。🔁

有很大的进步，但仍然不完美。🙅‍♂️

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

Figma 是一款出色的设计工具，可用于 UI 设计、UX 设计和原型设计。从功能和所需的技能来看，该工具与Sketch类似。

然而，Figma 的不同之处在于它基于云并以协作为中心，因此每个人都可以使用它，无论他们使用什么操作系统，也无需安装任何东西。

Figma 的两个强大工具 FigJam 和 FigJam AI（最近发布）以及“DEV 模式”改变了 UI（用户界面）设计行业（例如 Adob​​e XD）。

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

让我向您介绍一下这些新的 Figma 工具。

🥂 FigJam

FigJam 于 2021 年推出，是一款基于 Figma 的白板工具。它允许在 Figma 平台内进行头脑风暴和创意生成。

使用 FigJam 中直观的提示，您可以轻松生成会议模板、可视化时间线并执行其他任务。您可以逐步优化细节，在几秒钟内精确实现您的需求。

FigJam AI

如果您需要快速设计演示文稿或网站，FigJam AI 提供现成的模板。它还能与您喜爱的设计平台 Figma 无缝协作。只需告诉它您想要什么，画几笔，然后，轰隆隆——您的想法就变成了现实！

它还会给你一些建议，让你的设计看起来很棒，并为你完成无聊的任务。

FigJam AI 将于 2023 年 11 月 7 日开放公测，目前所有客户等级均免费。您可以免费试用FigJam AI，直至免费等级结束。

我Dev Mode在 Figma 开发人员部分介绍了 Figma 的功能。

🥊现在准备好掌握 Figma 吧。

如果您想跟随本文（或只是想使用 Figma），您可以在注册 Figma后使用下面这个漂亮的网站模板。

我们将使用这个👇文件来解释本教程中的所有内容：

📩 Figma 启动登陆页面深色（下载）

🥷Figma 开发者指南（你需要知道的一切）

关于快捷方式的简要说明：🧑‍🍼

值得注意的是，Figma 中的大多数快捷键都设计为可在 Windows 和 Mac 系统上使用。例如，CtrlWindows 上的 键对应于CmdMac 上的 键，并且Alt可以与 Mac 上的 键互换使用Option/Alt。

例如，快捷方式在 Windows 和Mac 上Ctrl/Cmd + Alt + C转换为。Ctrl + Alt + CCmd + Alt/Option + C

Figma 的基础知识：

当您被添加为 Figma 设计的合作者时，您可以选择在 Web 浏览器中打开它或下载适用于 Windows 和 macOS 的桌面应用程序。

值得注意的是，桌面应用程序不是原生应用程序，而是一个跨平台的 Electron 应用程序，类似于 Slack 和 Visual Studio Code。尽管存在这种区别，但浏览器版本和桌面版本的功能大致相同。

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

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

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

1. 🛝画布：在界面的中心，你会发现一个宽敞的画布，你的所有设计都位于其中。

2. 🔳侧边栏：侧边栏位于左侧，包含文件的图层、资产和页面，使您的设计元素井井有条。

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

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

当您开始处理新文件时，请花点时间熟悉文件中的不同页面。

如果设计师将元素（例如颜色和字体）组织到单独的页面中，则可以大大简化您的工作流程。

🍖Figma 导航：

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

当您打开文件时，您将从适合可见区域内所有帧的最大缩放级别开始。

📚这里有一个快速指南。

放大和缩小：

• 要放大或缩小，请按住Cmd ⌘并向上/向下滚动，或使用+和-键。

• 要在画布上水平滚动，请按住空格键并用鼠标拖动。

快速缩放：

• 选择一个框架或元素并按下Shift + 2即可快速放大。

• 按下Shift + 1可返回所有元素都适合画布的默认视图。

快捷键提醒：

• 如果您忘记了任何快捷方式，请按Cmd + Shift + ?查看所有可用的快捷方式。🫗

• 使用的快捷方式以蓝色突出显示，以便于跟踪。

📐项目风格：

开始新项目时，设置项目样式是十分有用的第一步。操作方法如下：

• 项目样式显示在右侧边栏。

• 单击侧边栏即可查看设计中使用的字体、颜色、网格和其他样式。

📝仅当未选择任何元素时才会显示项目样式。

单击画布中的任意位置或按下Esc以取消选择并查看项目样式。

编辑风格：🫛

• 单击样式元素旁边的编辑图标即可查看和编辑其信息。

• 使用此信息在 CSS 中设置布局、变量和字体。

🪤选择元素：

掌握选择元素对于理解和解构 Figma 中的设计至关重要。

以下是掌握元素选择和收集基本信息的指南：🔦

🪻图层选择：

选择图层并不像单击元素那么简单，因为大多数设计都有多层元素嵌套。🚧

• 单击元素只会选择顶层。

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

• 每次双击元素都会向下钻取一个嵌套级别，有助于精确选择。

🙎‍♂️选择和导航图层的方法有很多，本文仅介绍 80% 时间使用的基础知识。

Figma 的文档教授了更多选择和导航图层的方法。

👨‍💻开发者模式：

开发者模式于 2023 年 6 月推出，可帮助您浏览设计文件并将设计无缝转换为代码。它确保设计师和开发人员保持一致，防止在交接过程中丢失关键细节。

“我们构建了 Dev Mode，以使产品开发更加高效，从创意到代码” - Figma

开发人员使用开发模式来：

• 仔细检查设计并生成不同的代码语言。
• 通过比较框架版本确保他们使用的是最新规格。
• 通过注释和标记快速检查可供开发的设计。
• 使用 JIRA、Storybook 和 GitHub 等工具让工作更轻松。
• 无需更改文件即可查看所有组件变化。
• 将设计与票证、文档和代码片段连接起来。
• 使用 Figma 的 VS Code 扩展来查看设计并一起编写代码。

🚧 开发者模式已结束 Beta 测试。
自 1 月 31 日起，开发者模式将需要付费席位才能访问。
了解开发者模式结束 Beta 测试的含义 →

🤽‍♂️访问 CSS 信息：

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

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

🎏请注意，CSS 是自动生成的，仅供参考，而不是直接复制粘贴的解决方案。

您可以在 Figma 官方网站上找到有关 Dev Mode 的更多信息 →

📐⚖️测量尺寸：

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

• 将Alt鼠标悬停在某个元素上即可测量到另一元素的距离。

• Figma 使用红线指示器显示像素距离。

如果您想测量到另一个组或框架中的特定子元素的距离，您可以按住Cmd ⌘或ctrl键，就像选择元素时一样深度选择它。

📤导出资产：

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

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

🙎‍♂️操作方法如下：

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

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

🪁导出所有资产：

您可以导出单个资产或一次导出所有可导出的资产。

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

Figma 提供了可导出项目的列表，以便在最终导出之前进行检查和调整。

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

🎴用户流程和动画：

Figma 还支持各种动画，用于状态或页面之间的转换、打开模式或菜单、在移动设备上进行拖动和滑动操作、创建令人惊叹的液体（粘性）动画等等。

您可以通过单击右上角的播放图标打开演示视图来预览这些动画。

⛹️‍♂️要在 Figma 中使用动画，请执行以下操作：

1. ▶️进入演示视图：单击位于右上角的播放图标进入演示视图并预览动画。

2. 🩺访问动画详细信息：在右侧边栏中，导航到“原型”选项卡以访问有关每个动画的详细信息。

3. 🔍了解动画组件：注意每个动画的触发器、动作和过渡组件，以实现精确的复制。

例如，考虑一个打开汉堡菜单的简单动画。当你点击汉堡图标时，它会触发过渡到打开移动菜单的屏幕。

由于Figma 中名为Smart Animate的功能，这种转变是无缝的。

Smart Animate 在 300 毫秒的时间内逐渐改变菜单的外观，创造出流畅的动画效果。

但是，与其他设计元素不同，您不会在“代码”选项卡中找到有关此动画的详细信息。

要了解有关动画的更多信息..🏑这是 Figma 的基础动画指南：

📞沟通

在 Figma 中，如果你想向项目人员寻求帮助，只需点击一下即可获得清晰的沟通。以下是如何有效使用评论的方法：

• 单击顶部工具栏中的聊天气泡图标或按 C 键切换到评论工具。

• 选择设计中的任何元素并开始输入您的评论或问题。

• 使用@符号后跟团队成员的姓名，以确保他们收到有关您的评论的通知。

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

🚧请记住，所有有权访问该设计的用户都可以看到每条评论，因为没有私人评论或聊天。问题解决后，可以进行相应的标记，评论将灰显。

👏结论

在我们学习 Figma 的过程中，你掌握了高效浏览和提取 Figma 设计文件中重要信息的技能。从理解排版和颜色选择，到测量边距、填充和元素位置，你都能胜任各种任务。

此外，您还学习了如何导出资产并与团队成员进行有效合作。

为了进一步学习您的 Figma 技能，Figma 的文档是宝贵的资源。

如果你曾经对前端开发的未来感到好奇，以及为什么 Figma 和 FigJam AI 等 AI 设计工具将主导低代码/无代码市场，那么这篇文章是必读的➡️前端开发的未来。

请继续关注更多有价值的内容，如果您发现它有用，请随时关注我的Twitter帐户。

感谢您花时间阅读这篇文章。下次再见，继续学习！💪