使用 Figma 的前端开发人员

在这篇文章中，我想告诉你我第一次使用 Figma 的经历，我如何定义我的设计系统，我找到了哪些资源以及如何用自己的品牌创建幻灯片。

设计系统如何帮助我

创建自己的设计系统帮助了我：

• 为了使我创建的产品保持一致。例如，我的网站使用与幻灯片相同的组件、样式和排版。这有助于保持一致并打造品牌。

• 复用元素、创建组件并将其用于新页面、产品或版块。这让我在添加新内容和修改现有内容方面节省了大量时间。

尽管设计系统很耗时，但好处是你可以一点一点地做，并随着时间的推移定义和改进它。

下一步将是制定指导方针，以便有一天我与更多的人合作，并将我的副业项目的设计与 Dawntraoz 的品牌统一起来，但要一点一点地进行。

现在，我留给你们的是 Figma 制作的这个设计系统，它太棒了，🦄 Pegasus 设计系统

如果您想了解有关此主题的更多信息，我建议您看看Míriam González的演讲，她在其中分享了超级有用的资源👉设计系统 101

学习 Figma 的第一步

我开始阅读Figma基础教程，其中解释了 Figma 背后的概念。我总结一下我使用过程中发现的一些非常有用的内容：

• 框架：Figma 的画板，其中预设了标准桌面、平板电脑和手机尺寸。

• 约束：将元素固定到其父元素的侧面，这对于在调整屏幕大小时调整元素大小很有用。

例如，标题元素固定在其父级主页框架的左上角和右上角，当主页宽度增加时，标题也会随之增长。

您还可以选中复选框 -滚动时修复位置- 来模拟位置：粘性。

• 组件：重复使用设计元素，创建它们的新实例。

要创建组件，您只需右键单击已创建的元素并选择选项“创建组件”。

准备就绪后，创建一个新实例：转到“资产”面板并拖放组件。

• 样式：定义一组属性，如颜色、文本、阴影……可以在整个设计中重复使用。

例如，要创建通用文本：定义文本的属性，即字体系列、大小、装饰等；然后，单击样式图标（带有 4 个点的图标），然后单击 + 图标进行保存。

如果您想了解可以添加到自定义文本样式的所有属性，请检查Figma 中的排版系统。

要重复使用，只需再次点击样式图标，然后选择所需的样式即可。您将看到类似以下内容：

• 智能选择：使用 Ctrl+Shift+Click 选择多个元素，您可以调整元素之间的 间距（单击并拖动 - 粉红色线条）并更改位置（拖放 - 粉红色圆圈）。

• 导出、评论和共享：您可以以PNG、JPG、SVG和PDF格式导出所有元素和设计，更多人将能够通过评论对您的设计提供反馈，并且您将能够通过链接与任何人分享您的设计。

要详细了解这些要点并通过用例进行练习，只需在Figma注册✨ 您的前 3 个项目都是免费的🎉

组织我的内容

当我了解了 Figma 的基础知识后，我开始组织我的项目并将我的网站变成一个已经设计好的设计（虽然不理想，但这就是我开始的方式）。

接下来，我将分部分地告诉您我是如何设置项目的。

风格指南：颜色、排版和图像

Figma 最强大的两个功能是组件和样式。它们允许你重复使用 UI 对象和属性，从而可以系统地大规模维护设计。—— Figma

当我浏览我的网站主页时，我保存了我定义的样式，包括颜色和字体。

定义完所有这些之后，我创建了一个名为“样式指南”的页面，其中我表示了颜色、它们的名称和十六进制值，以及每种标题或文本的字体。

同样的事情也发生在图标设计上，当我将 SVG 图标添加到我的设计中时，我在样式指南页面创建了组件。这样，我就可以从一个地方控制它们的显示方式，并将它们单独导出。

成分

对于构成我的设计并且我将要重复使用的部分，它只能是组件部分。这就是 Figma 为我们提供的变体和属性发挥作用的地方，让我们看看它的作用是什么。

我会告诉你我是如何在项目中使用它们的，但由于我不是专家，最好看看 Figma 在https://www.figma.com/best-practices/creating-and-organizing-variants/上给我们的建议

好吧，我要做的第一件事就是创建我的第一个组件的内容，一个带有颜色渐变的自定义标题。这个组件在桌面和移动设备上有不同的大小，在明暗模式下有不同的渐变，总共有4 个变体。

为了定义变体，我必须考虑两个属性：屏幕（对应于桌面版或移动版）和模式（亮或暗）。

在上图中，左上角的第一个标题是亮模式下的桌面版本，右下角的第一个标题是暗模式下的移动版本。

这种分组可以以不同的方式完成，我们将在下一节的 Header 布局组件中看到这一点。

布局

尽管我们的布局元素（页眉和页脚）是 Figma 中的组件，但对我来说，为它们设置一个特殊部分更有意义，这就是我创建布局页面的原因。

正如我之前提到的，当我必须为每个组件创建 4 个变体以在明暗模式下覆盖桌面和移动设备时，我想知道我是否做得正确，当我在 Twitter 上询问时，我的疑问得到了解决。

就这样，我发现了基础组件（杰作）。基本上，创建变体时，实际上是在复制内容，而不是实例。例如，当我想在桌面上修改某些内容时，我必须针对明暗模式分别进行操作，这很不理想。所以，基础组件拯救了我！

• 标题

  在 Header/Base 组件中，我设计了桌面版和移动版的 Header，只考虑了屏幕属性。然后，我创建了使用 Header/Base 实例的Header组件，并在那里设计了亮色和暗色模式的变体。这样，当我想在移动/桌面版设计中更改某些内容时，只需在 Header/Base 中应用它，Header 就会自动更新！

  

• 页脚

  对于页脚来说，这比较简单，因为它不会根据模式而变化，所以一个Footer组件就足够了。但是，当我尝试为页脚标题添加底部边框时，我发现我需要一个插件来帮助我应用我想要的边框：Border

页眉和页脚创建完成后，我将它们添加到页面布局中，直到我决定创建一个模板来复用结构，并在正文部分添加容器间距。如下所示：

网格

为了避免每次我想要修改其中一个网格时都必须重新定义大小并将组件适合列，我决定创建一个部分，在其中我可以隔离它们并在页面设计中实例化它们。

例如，对于博客列表，我在桌面上创建了一个两列网格，并在移动设备上创建了全宽版本（使用具有屏幕属性的变体）：

页面

现在，我们已经将所有设计部分整合在一起，是时候定义我们的页面了！

利用我们在布局页面上创建的模板，并在轻量模式下为桌面或移动设备选择相应的标题组件以及列表网格，我们就可以开始了🎉

文章卡片

由于我想为文章的特色图片留出空间，因此我创建了一个名为“文章卡”的页面，在那里我可以设计图片并导出它们。

为了导出带有特征图像的框架，我添加了一个导出选项，并将导出文件类型设置为 JPG。然后我点击了预览选项卡查看结果，并点击了导出按钮获取图片。

关于 Figma 导出你需要知道的一切

使用插件

在确定了我的项目之后，我决定做一些研究，寻找一些有趣的东西。让我们看看我的发现🔍

自定义幻灯片

说实话，我对这部分感到非常自豪🙈。

我最近开始做演讲，但由于是自己做的，我没有公司模板来制作幻灯片。所以我决定用网上找到的免费模板。不过，你可以想象，这跟我的网页设计完全没关系。

在 Google 上搜索如何使用 Figma 制作自己的幻灯片时，我找到了这个视频将幻灯片演示文稿从 Figma 导出到 Google Slides，其中解释了如何使用插件将在 Figma 中制作的框架转换为 Google Slides，甚至是在 url 中生成的交互式幻灯片。

这个插件是Pitchdeck Presentation Studio，我强烈推荐。它看起来是这样的：

您可以在那里为元素添加动画（与 Google 幻灯片不兼容）、添加演讲者备注、更改幻灯片顺序等。

最棒的事情是能够将你的网页设计组件用于你的幻灯片，真是太奇妙了🦄

插图

当我创建新的幻灯片时，我想加入一些很酷的几何形状，我想，为什么不加入插图呢？

当我想到插图时，我总是会想到Pablo Stanley的Humaaans，所以我直接去了他的网站，找到了一个很棒的 figma 插件，这样我就可以添加我的插图而不用离开这里，这太棒了😍。

该插件名为 Blush，您可以在社区中找到它，也可以直接访问其页面👉 https://www.figma.com/community/plugin/838959511417581040/Blush

对于 TailwindCSS 爱好者

可以使用插件将我们的所有样式、颜色和排版导出为 tailwind.config.js 的预设：https://www.figma.com/community/plugin/785619431629077634/Figma-Tailwindcss

附注：如果插件没有关于如何使用它的描述，那是因为您需要转到“文件”选项卡（或右键单击）> 插件> 单击要使用的插件，瞧！

这是在我的项目中使用它的结果：

{
 "colors": {
  "white": "#ffffff",
  "gray-light": "#e5e7eb",
  "gray-dark": "#111827",
  "fuchsia": "#a21caf",
  "black": "#000000"
 },
 "fontSize": {
  "sm": "0.75rem",
  "base": "1rem",
  "lg": "1.125rem",
  "xl": "1.5rem",
  "2xl": "1.875rem",
  "3xl": "2.25rem",
  "4xl": "3.75rem"
 },
 "fontFamily": {
  "gilroy-bold": "Gilroy-Bold",
  "segoe-ui": "Segoe UI"
 }
}