在 FIGMA 中创建设计系统:实用指南

当你开始创建你的设计时,你要开始与你的系统第一,并研究你的基本色到最低的颜色在可能的情况下;即小学中学三级

当然,为了不同的目的,然后通过提供程度的色调(较浅的变体)质地(深的变体)来扩展这些基色是结果的。

现在,您可以通过调整Figma 颜色面板中HSL选项中的饱和度亮度值,从最终基色创建不同的色调和颜色,但这是一个持续的过程。

可以在以下链接中找到我使整个Tints & Shades创建过程的方法的工具 -

https://maketintsandshades.com

在这里,您可以通过简单地粘贴您的基本颜色 HEX来快速生成图像和轮廓,然后会为您完美计算的色调和线条。

然后,您的选择要中使用的调色和在系统中,将您选择的十六进制值复制,然后您就可以将其插入到相关的填充选项中。

在我们继续之前,让我给你一个关于以前的板子约定的简单提示......

我强烈建议使用如下简单的东西......

  • 初级/基础
  • 次要/基地

使用正斜杠(/)是您对颜色进行分类,并从“检查器”面板中快速找到相关的颜色。

例如,您还需要考虑实现标准的Red (Error)Green (Success)Yellow (Warning) Base Colors 以供在NotificationsBadgesInput Field Borders 中使用。

黑色和深浅不一的灰色也是绝对必须的。

除了强制性的白色,我还建议添加具有不同不透明度级别的白色。例如,当您想在颜色或图像的顶部插入图标时,这些变体是完美的,让您轻松地允许尽可能多或尽可能少的颜色或图像泄漏。

并且不要忘记那些品牌颜色

您会发现自己在许多项目中都需要这些,并且在创建主调色板的同时创建它们是值得的。

最后,健康的渐变选择总是派上用场。

如果您决定在初始构建中添加渐变,请确保您从一开始添加从左到右从上到下的变体,从而为自己提供一些多功能性。

不像 Sketch 这样的应用程序,它将AlignmentColorText Style 中联系在一起。Figma 将它们分开,让您可以管理更少的文本样式,并使文件更清晰、更轻巧。

即便如此,在构建自己的系统时,我建议尽可能坚持2 Font Family规则。

对于我自己的系统,我选择了InterOxygen作为基本字体系列,因为它们相互补充非常好,而且它们不像初始 Base 选项那样具有装饰性。

以及创造超大 显示样式,我还为通常的嫌疑犯创建了样式 H₁ 到 H₅ 使用模块化缩放,我的正文大小设置为 18pt,并使用比率 1.2.

Body 我设置为健康的18pt以提高易读性,尤其是在创建长篇内容时。

除了标题和正文样式外,我还为LeadSmallCaptionX-Small创建了样式,后者非常适合为移动设备创建设计,而前者非常适合处理桌面项目。

这里的命名约定完全取决于您,以及您觉得最舒服的方式。我知道有些人喜欢选择命名结构,例如Heading 1Heading 6,以及BodyBody LBody S等……以及其他一百万种命名约定。什么都适合你?

不过,我建议遵循与您的调色板类似的模式,再次使用那些可靠的正斜杠(/)来对您的文本样式进行分组,并使它们更易于参考。

像下面这样的东西很好用......

  • 铅 24 / 家庭 #1 / 常规
  • 铅 24 / 家庭 #2 / 常规

使用这2 个字体系列及其各种样式(即:Hero、H₁、Body 等...),我建议创建一个常规粗体字重变体作为最低限度。当然,您可以随时添加以适应您的个人喜好(即:Light、Semi-Bold 等……)

现在。目前在 Figma 中,当您想更改为不同的字体系列时,您必须手动执行操作……一次更改每个样式。

不酷!

但是不要绝望,我强烈推荐一个很棒的插件,我强烈推荐来自非常有才华的Jan Six 的Batch Styler

使用此插件,您可以一次更改多种样式。都好!

除了您的调色板和排版样式之外,任何优秀设计系统的核心样式的最后一个补充是Elevations 和 Shadows

我建议创建适合LightDark设计的阴影,以及它们伴随的 Elevations (20%、40%、60%、80% 等……)

每个好的设计系统从一开始就需要一套很棒的图标。

强大的设计系统的核心要素是-

  • 颜色
  • 排版
  • 高程和阴影
  • 图标

其他核心组件,例如ButtonsInputsModals等……紧随其后,我很快就会详细介绍这些。

为您的初始构建找到一个轻量级但多样的图标集。

对于我自己的设计系统;Cabana,我想要一个相当大但不是超大的基本图标集。

我的目标是有多种图标可供选择,风格不太古怪,并且有填充线条选项可供我使用,这就是我选择开源集的原因;伊娃

我强烈推荐的另一个开源图标集是漂亮的羽毛图标集

想要更好地组织您的图标吗?让自己成为一个图标组织者。

将 Icons 添加到我自己的系统时,我个人的选择是IconJar

IconJar 仅适用于 Mac,但如果您是 Windows 用户,请不要绝望,您可以使用很棒的Nucleo

回到我的系统,在我之前创建的主要组件页面上,我简单地将Eva Icon Set 中的图标一个一个地放入。

IconJar 很酷的一点是,它会插入带有已应用的24pt 边界框的图标,这有助于您的设计中的对齐视觉一致性

然后,这只是附加我之前创建的主要基色样式的情况……

...选择命名约定以帮助对我的图标进行分类(类似于我之前使用颜色和排版创建的内容)...

  • 图标/警报圈/填充
  • 图标/警报圈/线

...然后简单地将其转换为组件Alt + Cmd + K)。

冲洗。重复。

现在,这部分看起来有点费时,但我还没有找到可以帮助很好地自动化这个过程的 Figma 插件,所以恐怕暂时是手动的。

那么,多功能且功能强大的设计系统是什么?

组件。而且很多。

在第一个实例中创建数百个组件是一项艰巨的工作,但是当它完成后,它会更顺畅,只需根据需要进行较小的增量添加。

这是创建设计系统的一部分,它将占用您的大部分时间。不要指望在一个晚上用一杯热可可抽出您的主要成分。恐怕你将不得不多留一点时间。

始终首先从那些较小的组件开始。

在构建我的主要组件时,我首先从什么开始?

纽扣。

而且很多。

较小的组件(例如按钮)是任何项目中最常用的元素之一,因此在继续创建较大的组件(例如ModalsCardsCalendars等)之前先创建这些组件是有意义的……这些组件将不可避免地包含这些较小的组件在某个阶段。

对于我的系统,我创建了Primary ...

...具有以下变体:

  • 按钮/主要/超大/默认
  • 按钮 / 主要 / 超大 / 左图标
  • 按钮 / 主要 / 超大 / 右侧图标

除了“超大”选项,我还创建了“大”“中”“小”变体,以涵盖桌面和移动使用。

您较小的组件将成为更大的组件的一部分。

正如我对 Buttons 组件所做的那样,并且知道它们将成为一个更大的组件(即:卡片、模态等)的一部分,我继续创建了其他较小的组件,例如Avatars ......

… 这仅仅是列举的一小部分。

这样做使我能够在构建这些组件时将这些较小的组件嵌套在较大的组件中。

现在,有些人喜欢首先创建较大的组件(即卡片),然后将其包含的所有元素(即按钮、占位符、头像等)分离成较小的组件。

就我个人而言,我喜欢先设计那些较小的组件,将它们全部准备好,然后我就可以开始创建更大的组件,并快速从可用的组件中进行选择,直到我对最终构建感到满意为止。

反正。我不想在这里占用你太多的宝贵时间。所以,这里只是我添加到我自己的系统中的一些组件:

  • 头像
  • 按钮组
  • 日历
  • 图表
  • 评论
  • 地图
  • 媒体控制(视频和音频)
  • 模态
  • 通知
  • 分页
  • 占位符
  • 工具提示

只需记住将最常用的 UI 元素放置到位以涵盖足够的用例,然后您就可以进行初始构建。

就像我之前提到的。构建您自己的系统确实需要时间(我花了 3 个月的时间来构建自己的系统,无论给与否),但是一旦您构建了它,满足感是无法估量的。

一旦你有了自己的系统,再也不用担心开始一个设计项目时盯着一张空白的画布,这是一种很棒的感觉。

技巧教程

Figma中使用变体(variant)设计Button(按钮)组件的思路讲解

2021-4-1 13:53:28

插件

figma的搜索插件Search & Focus

2020-5-18 10:50:11

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索