- ［蒙］嗨我叫蒙欢迎来到
由Design+Code提供的设计系统课程
我们会在Figma中来讲授。
在Design+Code,我们已经建立了一整套设计系统
因此整个团队，设计人员和编程人员，
都可以去使用同样的设计语言，
同样的内容和风格这样设计本身
就会非常连贯。
现在你可以看到我们有颜色，排版，
图标，一直到控制，如按钮，
表单输入，卡片，组件和单元格
和导航组件。
因此，所有这些都是以一种
可以在团队库中共享的方式创建的
任何人都可以启用它
并将所有这些样式和组件应用到设计中去。
所以正如你在这里看到的我们有一个宏大的设计
它是由我们设计系统中的所有元素组成的。
因此，这是一致的，团队中的任何人
都可以导入这些设计组件和样式
到新的设计，新的页面
而不必从头开始。
您还可以在我们
的设计系统页面
中找到这些相同的元素
该页面是官方网站上的网站
您可以找到颜色和字体、链接、图标，
并使用Figma中的实时嵌入，这完全连接到实际的设计系统，
因此您可以在这里看到图标。
如果我做出改变，
像这样，
你会发现它已经被更新到实时嵌入
这很酷。
因此，我们正在创建一个
实时更新的设计系统，它不会冲突
可以与设计师
开发人员和产品经理进行交流这样一切
都是同步的任何人都可以对
相同的组件和样式提出想法，
无论是在Figma内部还是在编码中。
所以，所有这些都可以在官方网站
上使用代码，但也注重非常一致的
设计语言。
很明显我们不会在五个小时的课程
中创建所有这些部件但是我们要做的
是涵盖所有的技术，
这些技术被用来创造相同的颜色，同样的风格
我们可以在这里找到。
我们还将设计这些页面，
或者至少是其中的一些页面，这样我们就能
很好地理解Figma是如何工作的。
在团队环境中工作的最佳工作流是什么
以及如何引入产品经理、其他设计人员
一起实时地工作。
所以我们要涵盖很多事情。
当然了，我们将要创建一个设计系统
但是也要去学习如何用基本的技术
创建一个基本的布局
而且要学习如何使用限制
以及如何创建恰当的布局，
如何使用风格和团队图书馆
还有配件和嵌套组件。
我们还将学习如何使用
向量网络、布尔人和形状从头开始创建图标
然后我们将学习如何使用互动来创建原型
以及如何与我们的同事和客户共享交互
然后我们将学习如何将我们的设计导出
到线索中，然后如何邀请用户
来检查距离和属性
以及代码，例如SVG，CSS、SWIFT或Android
最后，我们将探索
使用实时协作的一些关键技术，以及如何使用评论功能
以便团队中的每个人都能同步。
现在让我们再倒退一点。
什么是Figma，为什么设计师
学习Figma如此重要？
那么，首先，Figma几年前就出现了
它是第一个真正利用网络力量
的设计工具
他们提出了这个非常酷的实时协作概念
这意味着您可以有多个设计师
或产品经理、内容创建
在同一个画布上工作并真正负责
不同部分的布局。
那么和Sketch相比怎么样？
首先，您会很高兴知道
大多数设计工具彼此之间
并没有很大的不同并且布局非常相似，
您将发现相同的基本工具
例如组件库和开发人员切换
但是同时，您必须将Figma
作为Sketch与craft，Abstract，还有ZePin相比，
所有这些嵌入到一个单一的应用程序
这是真的，非常强大的。
不仅如此，你可以从Sketch将文件导入
真的非常简单就像这个来自Angle的文件，
你可以看到它可以导入一切
并保证90-95%的准确性并同时保留所有的层面
和标记不变动。
因此Figma可以与视窗系统兼容这意味着
来自你团队的任何人，包括使用视窗机器的开发人员
可以来并且检查你已经有的同一
设计元素，甚至也可以对设计提出自己的想法。
Figma还可以进行实时的合作，那真的是很
棒的事情，它还有视觉控制
因此你可以删除或决定留下一些东西来制成
一份你认为非常酷的景致。
Figma与Sketch有非常相似的键盘快捷键
就像你在这里看到的，你可以下载
你的Mac应用程序这样它就像一个本地应用程序。
事实上，我想说的是其实际的表现
远远超过了Sketch，例如，
当你需要处理很多东西，那么多艺术板的时候。
你可以在这里看到，没有视觉滞后
这绝对是一种愉快的工作体验。
让我们开始吧让我们先去到figma.com，
当然，让我们创建一个帐户
让我们下载Mac应用程序这样我们就可以获得
您的计算机上的本地字体而且
您将在使用这一程序时
有一个更好的用户体验。
当您第一次登陆Figma时，您可能会看到
这样一个屏幕它是在最近的或草稿中出现的
您可能有大量的示例文件
和Google材料设计以及个人颜色。
您还可以获得一些新的资源例如
我这里免费提供的标志性图标，
您也可以从互联网下载UI工具包
所以让我们开始吧。
如果你去Figma资源，你会发现文件
这里是你可以点击的页面
之一而当你这样做时，
它将自动上传和创建
一个副本到你的Figma帐户。
所以我们可以在这里找到同样的图标。
你基本上可以免费使用它。
Figma的一个优点在于
它实际上是一个免费应用程序
只要您的团队中没有超过三个项目
或两个成员，您基本上可以永远免费使用Figma
这是非常慷慨的。
事实上，大多数自由职业者，大多数在
一个很小的团队中工作或自己工作的人，
都可以在这些项目中创建
他们想要的文件。
您可以创建三个项目但您可以存储
任意数量的文件而且文件大小没有限制
这是非常棒的。
当然，现在您也可以升级到
具有无限版本历史的PRO帐户，例如，
项目或免费查看器以及团队库，
但主要是关于组件的。
您仍然可以共享风格但您将
无法共享组件如果您不是在
一个大的环境中但如果您是一个大的团队，
那么您可以使用一个专业的帐户
考虑到它提供的内容
这是相当合理的价格这意味着
你可以在必须创建
Dropbox, Abstract, Zeplin等方面省很多钱。
那么回到Figma应用程序，我们将
进入我的设计团队在这里您可以决定
邀请更多的人加入您的团队
并创建一个新的项目。
所以我可以创建一个项目，DesignCode 3，
在这里，我将为我的第一个设计
创建一个新的文件，像这样。
从现在起我们就可以开始了。
在下一节中，我们将学习如何
进行基本布局，如何处理框架，
如何使用网格以及一些基本工具，
一切都将从头开始
逐步讲授
这个课程是完全免费的这意味着你可以分享
所有的成果给你的朋友包括
视频，文本，课程和链接
将免费提供给每个人甚至包括
所有的源文件的每一步。
现在唯一提供给我们的专业用户的部分
并不是所有人都可以使用的，就是因为
从零开始构建的
整个设计系统的源文件
这些文件不像假源文件，
这些是我们为官方网站实际
使用的真实源文件包括
我们迄今为止创建的所有页面。
我们已经在这些页面中花费了数千个小时，
在所有这些图标中，在所有这些源中
您可以从中学习，而那些
想要支持我们的人可以通过
获得一个专业帐户来做到这一点，不然的话，
您可以按照每个部分的
所有源文件以及开始时的成果来操作每一步。
下一节见。