掌握 Figma 设计工具:有用的技巧和方法

已发表: 2019-03-26

使用过 Google Docs 的每个人都知道它是多么方便 — 易于在网络上编辑、协作和保存文件。 如果网页设计师为他们的项目使用相同的工具会怎样? 嗯,他们实际上有一个,它是 Figma。 在这篇 Figma 评论中,我们将引导您了解该平台最闪亮的功能,这些功能使其成为设计师的首选工具。

什么是Figma

Figma 是一种基于云的设计工具,与其他专门在 Mac OS 或 Windows 上运行的流行设计工具不同,它也可以在 Linux 上运行。 因此,该平台使使用不同操作系统并需要为他们的工作生成 SVG 代码、CSS 和 iOS 或 Android 代码的设计师之间进行协作。

该平台使用户能够在一个平台上创建设计、制作原型和收集反馈。

为什么要使用 Figma

在我们深入了解 Figma 设计工具的优点之前,让我们先看看是什么让这个平台对设计师如此有吸引力。

  1. 它是基于网络的。 Figma 在您的浏览器中运行,您可以处理您的项目,而无需将它们作为单独的文件保存到您的计算机——所有编辑都会自动保存到您的云中。 但请记住,您需要有效的互联网连接才能保存所有更改。
  2. 它允许团队合作。 使用 Figma,您可以拥有一个 2 人到无限数量的编辑团队,这一切都取决于您的定价计划。 您将始终能够看到有多少团队成员在处理单个项目以及他们正在做出哪些更改。
  3. 它对独立设计师是免费的。 所有功能都可以完全免费使用,无需任何试用期。

总的来说,Figma 有三个定价计划。 让我们发现平台为每个人提供了哪些功能。

Figma 定价计划

起动机专业的组织
自由

使用此计划来测试平台并感受其基本功能:原型设计、代码属性、评论、无限存储空间和无限查看器、Sketch 导入以及要导入的各种文件格式。

每位编辑 12 美元/月

如果您的项目需要团队编辑和共享,请切换到以下计划。 使用此计划,您可以享受无限数量的编辑器、项目和免费查看器,以及无限的版本历史和存储空间。 您还可以使用整个团队都可以使用的共享 UI 组件创建私有项目和系统。

每位编辑 45 美元/月

升级到此计划并享受更广泛的功能:无限数量的团队、草稿所有权、链接访问控制或共享字体。 您将能够通过活动日志报告、集中成员管理、单点登录 (SSO) 和组织身份提供者的远程配置确保帐户控制更深入地挖掘。

Figma 入门

注册后,用户会收到一封欢迎电子邮件,其中包含入门所需的链接:帮助中心、视频教程、论坛和有用的资源。

figma welcome email
Figma 的欢迎邮件

此外,当用户开始使用该工具时,会为他们提供快速的平台演练。 您既可以在线工作,也可以下载 Figma 桌面版来离线设置您的工作流程。 事实上,界面非常直观,带有包含项目元素的图层面板、带有工具和可用选项的工具栏以及右侧的属性面板。

figma interface
Figma 界面

现在让我们概述 Figma 最出色的功能和选项,看看如何应用它们。

Figma 功能和有用的选项

原型制作

Figma 允许您通过创建任意数量的屏幕来制作网站或应用程序的可点击版本。 通过这种方式,您将能够测试、编辑或调整任何功能——按钮功能、元素的翻转、模态窗口动画——而无需在选项卡之间切换。 您将能够为您的设计创建连接和热点,以模拟它在真实环境中的外观。

只需在属性面板中切换到原型并开始创建路径和交互。

figma prototyping
使用 Figma 原型模式创建元素之间的交互

成分

这些是可以在您的项目中重复使用的 UI 元素。 此功能允许您通过翻转组件或通过平铺组件来重复图案来创建对称组件。 您可以从按钮、字段或菜单创建组件。 要创建主组件,请单击选项菜单中的创建组件按钮或右键单击图层并选择创建组件选项。

您可以通过创建实例来重用主组件。 您还可以将颜色、块、按钮、形状和登录页面等 UI 元素作为单独的组件来制作这些组件。

为了创建实例组件,选择主组件,按住热键(Windows 和 Mac OS 分别为 Alt 或 D),从组件中拖动实例并在必要时将其复制粘贴到另一个位置。

figma components
创建实例组件

请记住,您创建的实例链接到主组件,这意味着您对后者所做的所有更改都将应用于所有前者。 例如,通过更新主组件中按钮的形状或颜色,您将在整个网站设计中更新其子组件。

矢量网络

这个 Figma 功能允许您创建复杂的矢量形状,因为您不再受到来自两点的只有两条线的限制。 您可以使用钢笔工具从您创建的形状的任何点绘制额外的线条。

figma vector networks
使用中的矢量网络

最重要的是,Vector Networks 可以简化您的 HTML 程序,因为您可以从外部源复制 SVG 代码并将其作为矢量图层直接粘贴到 Figma 中。 您还可以将 Figma 矢量复制为 SVG 代码。 为此,只需右键单击该元素,选择复制为 SVG,然后将代码粘贴到 HTML 或您正在创建的任何 Web 项目中。

内置评论、编辑和分享

使用 Figma,您可以创建一个团队并选择每个团队成员有权对您的项目执行的操作:查看或查看和编辑。 您还可以查看团队成员如何实时更新或更改设计。

figma editing
实时团队编辑

您的团队可以直接在工作区留下反馈或讨论项目的任何元素,并将其固定在画布上的任何位置,就像在 Google 文档中一样。 要留下您的评论,请选择上方菜单中的对话气泡,单击您要评论的元素,然后写下您的反馈。

figma commenting
评论一个用 Figma 设计工具创建的项目

版本控制

使用 Figma,您可以跟踪每个协作者的历史记录,甚至可以回滚到以前的版本。 当用户关闭带有项目的选项卡或在 30 分钟内未进行任何更改时,该服务会自动保存版本。 要快速访问此选项,请选择工具栏中项目名称左侧的下拉图标。 您将在右侧看到版本历史记录,其中包含命名、恢复或复制特定版本的选项。

figma version history
版本历史菜单

Figma 设计工具在行动

在熟悉了该平台及其功能后,我们决定尝试使用 Figma 设计选项并为电子书创建一个简单的页面。 首先,我们点击上方菜单中的“+”号。 之后,我们单击工具栏中的“框架”图标来创建一个框架并在画布上组织我们的设计。 接下来,我们用必要的图层填充我们的项目——文本块、矩形和图像——并配置元素之间的所有空间。

这是我们设法创建的内容:

figma design example
使用 Figma 设计工具创建的电子书页面

请记住,您将无法进行高质量的打印,因为该平台缺少用于绘画的主要调色板 — CMYK 调色板 — 或毫米和厘米之间的大小切换。

最后取

Figma 感觉就像是设计师为设计师精心设计的工具。 该平台允许您

  • 在线工作并将您的设计保存在云端,而无需依赖计算机的存储空间;
  • 在各种操作系统上创建设计;
  • 与团队实时协作、评论、编辑和共享文件;
  • 享受有用的功能,如原型制作、矢量网络、创建组件及其实例,以编辑、测试、调整您的设计并扩展其可能性。

我们希望我们的 Figma 评论已经清除了该平台的内部技巧,并且您有足够的灵感来尝试它。 使用 Figma 创建您的设计并使用 SendPulse 创建营销项目。 再见!