什麼是 Design System｜如何快速建立一個設計系統？設計系統基礎教學2024｜设计系统基础篇

Hey 大家好 我是凯文 今天呢 我们来聊一聊如何建立设计系统 Design System 一个每个UI设计师都必须掌握的技能 今天的视频呢 我会快速介绍设计系统的构成 以及它是如何帮助设计师提高效率 并且呢在Figma中 演示创建一个基础的设计系统 好了废话不多说 我们快速开始 设计系统 包含用于设计数字产品的 一系列基础元素和规范

目的是建立统一的视觉与用户体验 直白的讲 设计系统 就是你设计网站或者APP的指导手册 以及素材库 里边包含了你应该使用的颜色、字体 图标，还有基础的组件 像按钮、导航栏 页面模板以及交互效果等等 大公司呢 通常会有很多的产品项目 那每个项目呢 有自己的UX UI设计师 甚至一些项目 会外包给其他的设计公司来完成 那如果每个设计师

按照自己的风格来做设计 同样的APP 不同的页面看起来是不一样的 同样的产品 手机端跟电脑端又是不一样的风格 这肯定不是好的、连贯的用户体验 从更宏观的品牌层面来看 视觉的统一是建立品牌的基础 杂乱的风格跟没有规律的视觉元素 是品牌建立的大忌 那大公司啊 通常都会有专门的团队和预算 来建立自己的设计系统 确保所有的产品和服务

在视觉和体验上的一致性 增强品牌的统一形象 统一的设计语言 减少了沟通成本 提高了整个公司的生产力 对于设计师而言 使用设计 系统会大大的提高工作效率 你不需要花时间去纠结 应该用什么样的风格 也不需要自己从零开始 去创建所有的元素 设计系统会为你提供基础的 可以重复使用的元素、模板 你可以把时间花在那些更需要创造性

和帮助用户解决问题的工作上去 对于开发人员来说 设计系统搭建了从设计到开发的连接 和设计师一样 开发人员也可以重复使用 自己已经写好的代码 提高效率 总的来说呢 设计系统包含了三大部分基础元素 设计组件和设计原则 基础元素 也就是为品牌形象 定下基调的视觉基础 包含颜色字体图标等等

设计组件指的是组件库 里边 包含了所有可以重复使用的基础组件 比如按钮、通知、导航栏等等 设计原则 是用来指导设计团队的规范和方法 里边包含了 如何使用设计系统中的组件和元素 什么是最佳实践 best practice 以及宏观层面的 比如 如何在设计中传递品牌的价值和理念 说了这么多啊 其实你并不需要完全记住 而且真实的设计系统

像我们公司的，庞大 复杂到 需要十几个设计师共同合作完成 所以你完全没有必要在一开始的时候 就把设计系统建立的很复杂 给自己添加不必要的麻烦 你需要根据不同的情况 来定制化你的设计系统 比如考虑到公司的规模 团队的合作方式 品牌构架等等因素 那今天呢 我们由浅入深 快速的做一个小型的设计系统 它也包含所 有设计系统中必备的基础部分

今后的项目中 你甚至可以以它来作为起点 不断的添加迭代 探索新的功能 首先我们看一下颜色系统 那颜色呢 是设计系统中最重要的组成部分之一 颜色系统帮助你的设计表达含义 建立层次 也是品牌形象的一个延展 大部分的设计系统会有一个主颜色 也就是你的品牌主颜色 那通常呢 用来强调重要的元素 以及传递品牌形象

比如这个APP设计中呢 紫色就是它的主颜色 那通常用在像主按钮 强调性的文本以及插画中等等 除此之外呢 你还需要一组中性色 通常是灰色色阶 来作为元素 组建、页面的背景啊 像这里的边框以及文本的颜色 还有语义颜色 用来表达成功 失败、警告等含义 比如这里

用红色和绿色来表达股票的涨跌 好 现在我们来从零开始 建立一个颜色系统 首先呢 我们给这个页面起名叫 foundations 这个页面呢 我们会存放所有的颜色 字体相关的基础元素 然后我们来画一个画框 来放置我们所有的颜色 首先呢第一步 你要定义所有的颜色值

我们先画出一个正方形 我们先来定义主颜色 那这个步骤在实际中呢 你一定要和公司的品牌部门沟通 拿到准确的颜色色值 一般是 HEX 格式 是一个以井号键开头的6位数 那作为标准的电脑屏幕颜色格式 那这里呢 我们就随便挑选一个紫色 来作为品牌主颜色 我们把这个色值写在上面那方 便其他人查看 那下面呢

是中性色 那就像之前说的啊 它是一组这个灰色色阶 那你可以直接呢 从这个色板上 从浅到深的 来提取这个不同阶段的灰色 那如果你拿不准的话呢 我们还可以在网上搜索 像这个Shade generator 这样的在线的工具 那给出一个已有的颜色 它会帮助我们自动生成相应的色阶 然后呢标记这个色值 好最后呢 是语义颜色 那通常呢

我们可以快速的找到这个 红、黄、绿三个颜色 分别代表错误 警告和成功 然后呢 我们分别给每一行加上一下标记 那第一行是这个品牌颜色 然后是中性色 最后呢是语义颜色 我们刚才已经确定了这个颜色色值 那下面一个关键的步骤呢 就是把这些颜色标记存储起来 设计系统的功能呢 是提供给不同的设计师来使用 设计师不能每次都来到你的文件中

然后自己查看代码 复制粘贴 所以我们需要给这些颜色命名 并且呢与颜色之配对 下次某个人需要用到这个颜色的时候 可以直接从设计系统中调用 那如果你需要改动某个颜色 也可以直接在设计系统中修改 所有用到这个颜色的设计 都会相应的自动更新 这里呢我们就需要用到一个工具 叫做变量variable 我们来到右侧local variables 打开变量的面板

然后点击这里来创建一组新的变量 create collection 然后命名为颜色 然后点击这里 创建变量 选择颜色 我们先来记录这个品牌的主颜色命 名 Brand 斜线 Purple 然后呢 把这个色值复制粘贴过来 这样呢这个品牌主颜色

就被记录在了这个颜色体系中 那同样的方式 我们把所有其他的颜色全部录入进来 那注意一下这个命名啊 为什么会自动识别这个斜线前和后 那根据不同的内容 来自动给你分配不同的组合 我们可以根据这个颜色的种类 来起一个系列性的名字 比如所有的中性色呢 我全部都会以这个 Grey 开头 最后呢是语义颜色 但其实啊 在Figma中

还有一个工具可以用来记录颜色 就是样式style 在去年 Figma 推出这个变量 Variable 之前 style样式才是颜色的唯一记录工具 不过 Figma 引入了 Design Token 的概念 那Variable呢 可以帮助我们快速实现这个功能 那所以呢 很多的 Design System 已经开始使用变量 Variable 来作为颜色体系的建立工具 那这里呢 我们也要采用最新的方法 使用Variable变量

至于什么是 Design Token 以及如何使用 Variable 变量 来实现这个概念 我会在下期的节目中详细讲解 这样呢 我们就已经完成了一个基础的 颜色体系的建立 那在需要使用的时候呢 选择一个元素 然后来到右侧属性面板中 点击这里 就能看到我们刚刚创建的所有颜色 包括主颜色中性色 以及语义颜色 那这里呢 我们选择这个紫色

来给这个按钮赋予主颜色 在实际的项目中 就像我之前说的 如果你需要对某个颜色进行 更改那你只要来到这边变量面板中 找到那个颜色 然后在你修改颜色的色值的时候呢 那所有应用到这个颜色的地方呢 全部都会自动更新 比如我们想把主颜色从紫色改成红色 可以看到所有的设计都会实时的更新 非常的方便

好下面我们来看一下字体系统 那和颜色呢 类似字体也是品牌形象的一部分 每种字体都有自己独特的性格 通常呢一个网站或者APP的字体 不会超过两种 大多数情况下只要一种字体就足够了 然后呢 我们需要来定义这个文字样式 包括大小高度粗细等等 文字样式用于建立视觉层次 比如题目用大号的粗体 正文用小号的字体 好的我们回到这个

之前建立的foundation的页面来 然后呢 在这个颜色画框旁边再建立一个画框 命名为Typography字体 在这里我们先来创建一些不同的样式 那首先我们来创建使用最多的字体 就是正文字体 Audi 然后来到屏幕右边的属性面板 在这个文字区域下边选择字体 我们使用苹果系统的默认的SF Pro

选择正常粗细就好了 大小选择16号这边的行高 如果没有特殊要求的话 使用默认的Auto（自动）就可以了 然后我们以这个正文字体为基准 来创建一些不同的字体样式 比如小于号的字体 加粗的正文 副标题 加粗的副标题 以及主标题 好的下面呢 我们来记录这些字体样式 和颜色不同的是啊 这里我们采用样式style

来记录字体样式 style可以记录文字的 粗细、字体、大小、行高、字间距等等 那需要注意的是呢 样式是不能用来记录文本颜色的 我们选择一个刚才创建的文字 我们来到右侧的属性面板 在文字区内 点击这里 打开 Text styles 面板 然后点击加号 来给我们的主标题起个名字 那同样的 把其他的文本样式

全部录入到系统中来 那这样呢 一个文字系统也建立好了 在这个右侧的面板 Local style 本地样式 下边可以看到 刚才所有我们创建的文字样式 那在使用的时候呢 选择一个文本 来到右侧的文本属性面板中 点击这个样式的图标 选择一个你需要的样式 那就像刚才我说的 样式是不能存储文字颜色的 所以呢在赋予文本样式之后呢

我们需要来到颜色面板中 点击这个样式和变量的图标 那选择一个 刚才我们创建的颜色的变量 好下面我们来看一下 基础元素的另一部分——图标 图标在网页或者APP设计中应用广泛 那可以用于辅助文字说明 甚至某些位置可以取代文字 最理想的情况是 设计师根据品牌形象 自己绘制一套图标 你需要一些原则和规范 比如使用填充图形

还是轮廓 线的粗细 圆角还是平角 这些细节都会体现品牌的性格 而且通常情况下 你需要至少两组尺寸的图标 比如16*16和24*24 用来满足不同位置的需要 但是呢如果时间有限 你可以从Figma提供的素材资源中 比如Figma community或者UI Kits 素材库中 找到需要的图标 然后以此作为基础进行调整

整合到你的设计系统中来 好下面 我们就以这个UI素材库中的图标为例 我们点击左侧的素材面板 然后呢点击这个图书的图标 打开这个library的窗口 然后点击这里 UI Kits 这边呢 是Figma刚刚加入进来的三个UI素材库 包括苹果 谷歌和 Figma 自己的 simple design system 那我们就以这个 Figma 的 design system 为例 点击add to file

加入到你的文件中来 好关闭这里 在左侧呢 你可以看到所有的元素 那在icon这里 可以看到 Figma提供了很多已经做好的图标 我们需要做的就是根据你的项目 找到你需要的图标 把它拽进你的文件中来 好这样呢 我已经选好了一些图标 然后全选 利用对齐工具 这边点击Tidy up整理 让他们看起来呢工整一些

调整一下他们的行间距 当然了 你可以直接在你的项目中使用他们 Figma 提供的素材 全部都是开源、免费的 但是目前啊 这里所有的图标都是副本 那本质上呢 他们还是存在于 Figma 的 Design system中 如果你想 把它们变成自己的设计系统中的图标 那你需要做的是全部选中之后 右键点击detach 断开连接 这样呢

就切断了跟Figma设计系统的联系 然后呢来到上边这里 点击create multiple components 这样呢 所有的图标就变成了本地的组件 那在左侧的图层 面板中可以看到 那每个图标的左侧 都出现了这样的4个点的小标志 那代表着他们已经是本地的组建了 好这里呢 我已经建立好了一套图标 那需要注意一下这个命名啊

可以看到这边和之前的颜色字体类似 我也是给图标创建了一个画框 然后命名为icon图标 用来放置所有的图标组件 下面我们来看一下 设计系统中的第二个重要组成部分——组件 我们先来到屏幕左侧 点击新建一个页面 命名为components组件 那这个页面呢 我们会用来存放所有的会用到的组件 我们先来做一个非常基础的组件按钮

先创建一个画框来放置我们的按钮 那创建按钮的方法啊 其实很简单 我们直接先用文字工具创建一个文本 然后呢 Shift+A 给这个文本添加一个自动布局 然后呢来到右侧 在这个自动布局面板之下呢 我们调整一下它的左右间距 把它改为32 然后来到画框属性面板 那在这里呢 把这个按钮的高度设定为48

然后呢在颜色面板中点击变量 那选择我们刚才创建好的主颜色 然后点击文字 那还是一样 我们来使用这个白色的变量 那这个时候呢 如果我想让我的按钮 看起来更圆润一些 我可以点击 来到右侧的画框属性面板之下 那找到这个圆角工具 输入一个数值 把它变成圆角按钮 最后来到上边 点击这里创建组件

把它变成一个组件 然后在左侧命名为 按钮/primary 我来解释一下 因为通常啊 在一个网站或者APP的设计中 我们需要使用到多种不同的按钮 来表达主次关系 通常呢 包含至少一个主按钮和一个次按钮 所以呢 我们还要再来创建一个次按钮 那还是一样的操作 那为了区分这个主次 对于次按钮呢 我会使用描边的方式

创建组件 然后呢 这里按照同样的方式来命名 Button / secondary 然后我们把它全选 来到右侧 选择这个combine as variants 把这两个组件呢 合并成一个组件(component)下的两个不同变体(variant) 那Figma呢 会根据我们的命名方式 来自动为我们创建相应的变体 在这个组件属性之下呢

我们来双击把它改成style 使用的时候 我们只需要来到这边的素材面板 然后选择local components (本地组件) 然后在组件页面下点击选择button 把它呢直接拖拽到你的设计中来 然后呢在这边的组件属性中 可以选择次按钮的风格 然后来到上边

在这里选择fill container 它会自动调整宽度 适应所在容器的宽度 调整位置 修改文字 通常 一个设计系统可能会包含几十个组件 那在制作组件的时候 最常用的工具 就是自动布局 (Auto layout) 和组件属性 (Component properties) 那我会分别做视频详细讲解 那这里假设我们已经完成了 需要的组件包括按钮 文本框底部导航栏和这个Tile（瓷砖）

那需要强调一点的是呢 你的Figma文件的规划和命名非常重要 当你的设计系统变得越来越庞大 复杂的时候 合理的规划和命名会为你节省时间 同时对设计系统的使用者来说 也很重要 比如这里 每个组件呢 放置在单独的画框中 然后呢 以这个组件的名字来命名这个画框 这种方式之下 在使用组件的时候 Figma也会使用这个关系 来呈现你的组件

比如我们来到素材页面 那local components本地组件中 可以看到第一层呢 是你的页面的名字 包括组件和基础元素 那点击打开 那第二级呢 包含了所有画框的名字 那figma呢 会根据名字的首字母 从a到z进行顺序排列 那这样做的好处呢是 有的时候 设计师更习惯把一些相似的变体(variants) 拆分开作为两个不同的组件

比如这里的主按钮和次按钮 那之前呢 是一个组件的两个变体 现在拆分开 分别为不同的组件 但是 同样都放置在这个按钮的画框之中 这样呢 当设计系统的使用者来到这边 点击这里 可以看到每一个不同按钮的缩略图 那可以更容易的找到自己需要的按钮 而如果把所有的按钮 合并成一个组件之后 在这里只会显示一张缩略图

好的这样呢 我们就完成了一个基础的设计系统 那在实际的项目中啊 你需要根据情况 不断的对你的设计系统进行扩展 更新、优化 而且很重要的一点是 设计系统 是由设计师和开发人员共同创建的 永远和你的程序员保持沟通交流 那同时呢 也要听取使用者的反馈 及时调整优化 说白了呀 设计系统 就是公司内部的一个产品 那用户体验一样很重要

好了这就是今天全部的内容 那下面呢 我会制作一期进阶版的Design system教程 深入学习下Figma提供的一些功能 比如design token、组件属性、自动布局等等 以及呢分享一些 大型设计系统的创建经验和体会 记得点赞、关注 我们下期见