woo产品页面描述追加内容_【原创译文】我们如何创建Lyft的产品设计系统和组件库...

嗨小伙伴们大家好～☀️

今天小编给大家带来的文章是【原创译文】我们如何创建Lyft的产品设计系统和组件库，本篇文章将带领大家跟Airbnb和Lyft设计师学习如何应用Figma的强大功能创建设计规范系统 ，一起来看看吧！?

(全文共计4972字，阅读约需要15分钟)

2019年底，我帮助Lyft将所有的设计系统从Sketch转移到Figma，这也是我离开Airbnb之前从事的最后一个项目。我从这两次经历中学到的东西帮助我认识到，在Figma中设计共享库时，每个人都应该考虑的一些基本问题。我认为Figma是目前业界首选的设计工具。

在这篇文章中，我想讨论一些我们创建多个Lyft产品语言属性和组件库过程中所遵循的最佳实践。然后我将介绍一些有用的技巧和窍门，它们帮助我们有效地维护系统直至今日。

系统-感知：系统中的系统

当我们开始在Figma中创建我们的设计系统时，我们重新评估了我们在Sketch中所做的项目，审查了我们在布局、视觉层次和命名规范等方面所做的决定。我们意识到，如果想要在新的设计库中奠下一个强大的基础，我们必须在设计系统中花时间先创建一个能够应用于文件中每个元素的系统。最终我们在组件库中构建了一个具有一致性且保证质量的系统，方便我们在日后增加维护设计库人员的数量。

轮播页面的主要和内部组件。注意，主组件画布里有一个#F4F4FA的背景填充。

我们使用可视的结构层次来设置每个组件页面，以便区分主要组件和其内部组件。所有的主要组件都被放置在有4px内边框线的框架当中，这些框架就像一张张组件的贴纸。

内部组件则放置在一个白色背景的框架中。通过显示所有内部组件，维护者能够获得用于重新配置主组件选项的全貌。这些内部组件的目标是允许使用者将主要组件重新配置，成为他们所需的变体，并促进多个内部组件之间的共享，使日后的维护更加高效。

内边距系统

在每个框架中，我们都设置了特定的内边距。参考内边距系统的好处是，它在画布上的所有元素之间，在页面之间，在组件库之间，都达到了视觉上的一致性。

我们的组件库使用了以下的内边距规范:

• 60px：内部框架边距(顶部、右侧、底部和左侧)
• 40px：主标题到第一个主组件之间
• 24px：主标题到副标题之间
• 24px：主组件之间的垂直距离
• 40px：主组件之间的水平距离

图层从上到下重新排列 默认情况下，我们在Figma中添加图层时，会在图层面板中已有的图层之上创建新图层。根据框架的视觉层次结构，从上到下、从左到右重新排列图层是一项乏味的任务。但当管理大量的主要组件和内部组件时，这种图层排列方式就能够让维护人员快速地导航和了解偶尔混乱的画布。 应用于按钮组件的命名规范 我们在Slack上对使用者进行了一次快速调查之后，发现他们大多数人都还在使用资源面板来搜索和发现组件。因此组件的命名方式对改善我们的工作流程起关键作用。

于是我们制定了以下的命名结构规范，并将其应用于所有组件:

文件名/页面名/框架名/组件名(变体、样式、类型和状态)

• 文件名是特定库的名称，以及使用者需要在资源面板中启用哪些功能，才能在其原型设计文件中使用这些组件(即核心UI组件(Android/iOS)、核心UI组件(网页端)、核心UI颜色等)。
• 页面名称是组件的名称(即轮播页面指示器、按钮、列表元素等)。
• 框架名称是组件的顶层分组，通常是尺寸(例如按钮有4个不同的大小，我们分别做了4组框架)。
• 组件名称是主组件及其变体的名称。由于变体的数量多，使用反斜杠(/)可以将它们归入其他定义类别，如状态。即使实际上将它们放到了其他“文件夹”中，这也有助于使用者在 Instance下拉菜单中轻松地交换相似的变量，并在资源面板的文件夹结构中找到它们。

在Instance(实例)下拉菜单中呈现文件夹结构

更灵活的组件

创建原子元素是设计系统的基础。Lyft产品语言被分解为多个原子元素，用于创建特定的组件。这些内部组件有助于为大型组件库(例如按钮)提供一致性，并减少日后维护时间，特别是当这些内部组件被多个主组件(即文本字段、文本区域、下拉列表等)之间共同使用时。 列表项组件由3个区域组成：开始、中间和结束 关于内部组件如何构成主组件的最好例子可以在我们的列表项组件中看到。这个组件使用可以重新配置的区域进行设置，以创建许多变体。每个区域下都有不同的内部组件可供选择。此外，通过以相同的大小构建它们，每个区域只允许使用这些选项(例如：上图初始状态下的“开始”区域只允许使用4个内部组件)。 允许“开始”区域使用的内部组件 允许“中间”区域使用的内部组件 允许“结束”区域使用的内部组件 对于像列表项这样的复杂组件，这种做法非常有效。因为我们允许了使用者根据具体的用例，灵活地重新配置组件的内部组件。

关于响应式设计

在创建灵活、共享的组件以设计师希望的方式响应时，还需要考虑其他事项。许多这样的选项可以在Figma的设计面板中定义。 Figma中的设计面板 创建响应性组件能够鼓励所有设计师更好地采用设计系统，因为大多数应用程序都支持各种屏幕尺寸和平台。实现这一点的一种方法是基于水平和垂直的约束设置内容和定义组件图层的大小。 水平约束

水平布局约束

• Left 将图层固定在框架的左侧。
• Right 将图层固定在框架的右侧。
• Left and right 允许图层沿X轴增大或缩小。
• Center 允许图层向框架的水平中心浮动。
• Scale 允许图层按框架尺寸的百分比增大或缩小。

设置水平约束的一个应用例子，是在调整列表项组件的大小时，让图标保持在同一位置，同时允许文本层增大或缩小。要实现这个效果，只需将“开始”区域设置为左侧水平对齐， “中间”区域设置为左右水平对齐。 列表项组件的水平约束设置示例 垂直约束

垂直布局约束

• Top 将图层固定在框架的顶部。
• Bottom 将图层固定在框架的底部。
• Top and bottom 允许图层沿Y轴中心增大或缩小，
• Center 允许图层向框架的垂直中心浮动。
• Scale 允许图层按框架尺寸的百分比增大或缩小。

设置垂直约束的一个应用例子，是在调整文本区域组件的大小时，让消息图层固定在底部，而文本区域则会增大或缩小。要实现这个效果，只需将消息图层设置为底部垂直约束，而文本框架层设置为顶部和底部垂直约束。 文本区域组件的垂直约束设置示例 第8点标记——类型大小调整选项：“自动宽度”、“自动高度”和“固定大小” 以类似的约束方法，可以在类型图层上设置一些控件，用来根据其内容进行缩减或增长。这可以和你前面设置的约束一起使用。

自动宽度

这个功能允许你的文本层根据你的内容增加宽度。当我希望我的图层基于我的内容增长时，我通常会把一个文本图层的宽度设置为自动宽度。通过将水平约束和自动宽度的选项设置为左对齐，我的文本层将会相应地调整大小。

自动高度

这个功能允许你的文本层根据你的内容增加高度。当你的内容换行到新行时，原始文本层的宽度将会相应调整。当我想让我的内容在组件内自动换行时，我通常会将文本层的高度设置为自动高度。通过将水平约束设置为左右以及自动高度选项，我的文本图层将按照我希望的方式自动环绕。 文本区域组件的自动高度文本设置示例

固定尺寸

这个功能在不管内容是什么的时候设置你的文本层的宽度和高度。当你的内容换行到新的一行时，文本图层设置的宽度将会被调整，并且会延伸到超过文本图层设置的高度而不被剪切。 另一种创建灵活组件的方法是利用自动布局功能，根据内容及时调整组件。与自动布局配合非常好的组件包括：按钮、列表和面板。但是这个特性有其局限性，需要你自己决定如何在组件中使用它。 使用自动布局的响应按钮 比如你要创建一个按钮，自动布局框架可以设置所有内容，包括它自己的内边距、填充、边框和角半径。当你输入内容时，框架会自动调整大小，并保持你原本设置的内边距。这也适用于堆叠按钮的自动布局。 文字时会自动移动其他元素 另外一个能体现自动布局强大功能的例子，是能够让你复制粘贴内容到文本层的同时，又自动调整了你的设计中的其它元素。 使用自动布局能够方便地自动重新排序 大家平时有没有觉得对重复的UI元素重新排序很乏味，比如在列表或菜单中调整排列？自动布局允许你很方便地重新排序，只需拖放它们或使用键盘上的上下箭头键。

行业诀窍

我每天都使用键盘快捷键来帮助我在团队管理的所有设计组件库中更高效地工作。其中一些用在别的设计软件上，有些简而精的提示则使我用Figma的工作更加得心应手。

• 选择具有相同Instance(实例)的所有项当需要在一个满是主要组件的页面中重命名多个内部组件时，只需导航到“编辑”菜单并选择“选择所有其他具有相同实例的所有项“。

编辑>选择具有相同实例的所有项

• 创建一个组件任何设计系统设计师都知道他们会一直创造新组件，直到天荒地老。这个时候我会频繁地键入 “Option + Command + K”快速创建组件。
• 重命名图层Figma的默认重命名功能非常强大。选择多个图层并键入“Command + R”将触发一个重命名图层模式，该模式具有更多的重命名选项，包括查找和替换、升序和降序数字以及当前名称的前缀或追加。

选择多个图层并键入“Command + R”

• 粘贴覆盖选择的项在 Figma中，当已经选择了某个对象时，你只需键入“Shift + Command + V“ 即可完成粘贴覆盖的操作。
• 要快速放大一个图层只需双击“图层”菜单中该图层的图标

快速放大任一个图层

• 组件描述这是帮助大家交流有关组件特定细节的方法。当你将鼠标悬停在资源和代码面板中的实例上时便会显示出来。我们利用这个区域向我们的开发小伙伴传递信息。

放置在组件描述中的开发交付信息

• 忽略约束有时，你或许想暂时忽略你在组件层上设置的水平和垂直约束。做法是按住“Command”键的同时调整组件大小。如果要遵守约束，请松开“Command”键即可。
• 防止图层自动嵌套当我在画布周围移动图层时，我发现了一件令人沮丧的事情，那就是它会自动将图层放置到其他框架中。若要防止这种情况发生，请在拖动图层的同时按住空格键。
• Instance实例交换这个专业的技巧可以用来交换任何实例，我专门用它来做替换图标的动作。做法是从资源面板拖动组件时保持按住“Option”。

  像王者一样替换图标

最后

当我创建Airbnb的设计组件库时，是我第一次接触设计系统。随着设计系统库被逐步完善，我学到了很多东西。由于我在一开始使用了“系统中的系统”这个概念，我能够以一种具有连贯性、保证质量和灵活性的方式将像设计系统这样复杂的东西呈现出来。这就是我如何利用Figma帮助构建Lyft设计系统的秘诀。

原作者：Jeremy D. 原文来源： https://medium.com/tap-to-dismiss/building-a-design-system-library-532ef2492811 原文作者授权：

小编：@Kerr Xu

更多阅读1.视觉和交互都必须知道的交互设计模式2.2018设计师超详细面试指南3.产品设计心得-视觉篇4.扁平描边插画呕血教程5.老司机教你3步解析品牌设计6.【只言片语01】设计的逻辑7.【只言片语02】设计中的加载8.【只言片语03】无效的用户测试9.【只言片语04】体验设计杂谈10.【只言片语05】app中5种形式的地址选择11.交互输出文档12.用户体验设计师的8个关键问答由于微信官方将公众号文章的推送规则作出了新的改动(现在已经不是按照发布时间排序)如果大家还想看到应谋鬼计的文章准时出现，一定点击文章右上角的“...”将应谋鬼计设为星标?，也要多点点右下角的「在看」哦～点我，这里这里