在本文中，我们将介绍如何在真空中开发出非球形的产品，而是开发一个真正的组件库，以及如何设法忽略过度的完美主义（不损害项目），以
节省25％的预算 。
这是本文的第一部分，其中将提供有关在Figma中创建组件的大量无聊但具体的实用信息，以及在省级环境中创建预算有限的项目的细微之处，陷阱和现实=）
在开始工作之前，需要进行长时间的谈判和分析工作，在此基础上，将详细的ToR写入功能（动态）和静态模块中。 有关它的详细信息可以
在本文中找到。 如果您尚未从事此类传统知识的开发，我们强烈建议您使用。 对于整个开发团队和整个项目都具有极其积极的经验。
但是回到设计
值得一提的是，Figma在工作的高度进行了非常令人愉快的更新，因此不会对颜色和文本样式有所了解。 我们希望即使没有这些细微差别，专心的读者也会学到一些对自己有用的东西。 另外，如果您对figma中组织组件的原理没有基本的了解，我们建议您在habr.com上进行搜索（有关该主题的很多资料非常丰富）。
在开始像素完美设计之前，在大多数情况下，我们会提出一个设计概念。 通常，它是一种原始的（从视觉角度而言）布局，应根据不同屏幕上的行为进行透彻考虑，并考虑主要功能。 这是必要的，以避免将来在被批准的布局中未嵌入被遗忘的块时产生令人不快的意外情况。 因此，概念更像是实际页面的草稿布局，而不是样式板，后者仍然
为以后的页面提供了一组基本样式和基本
布局 。
在这种情况下，概念如下：
一般来说，没有什么复杂的。 唯一需要特别注意的地方（在此页面上）是批次（这些卡片）的预览，其中包括无限制的位置集（这些行在卡片中）以及用于不同角色的不同按钮集。
有些细微之处无法解释，但我们同意诚实做事，没有不必要的摆姿势，因此，我们将告诉您它们在过程中是如何浮出水面的。
所以-一切准备就绪。 我们拥有具有规定功能的TK，用于了解组件的操作； 样式板作为理解元素样式的概念； 命名组件的标准，以实现设计到布局的轻松转换，以及无数种各种颜色的镇定剂...
您可以开始在图中戳一下
设计系统开发算法将是从简单的，不可分割的组件（原子）到更复杂的组件的移动，并且对于层次结构的可视化显示，我们将在新列中绘制下一个复杂性级别。
文字内容
首先，我们将定义不可分割的元素：一组标准的标题，一个段落，按钮文本的各个样式，占位符和过滤器名称的样式以及其他内容。 别忘了将一切变成组件！
蒙特塞拉特（Montserrat）为主要字体，蒙特塞拉特（Montserrat）粗体为标题和重点。
转到图标。 我们从免费图书馆“羽毛”中拉了他们
图示
每个图标均放置在24x24像素的容器中，并沿两个轴在中心对齐（以防万一）。 所有图标都称为品尝的名称，但添加了前缀“ i”，因此名称中没有重复项，并进行分组，以免面板层层混乱。
我们还将提供社交网络图标和其他电子邮件，用于通知输入内容不完整，过滤器重置，在批次中所需位置的星号，用于下拉菜单的V形字形以及用于复选框和无线电台的复选标记。 所有这些图标将比主要的图标更小，更轻，但是为了标准化，我们也将它们放在24x24的容器中。
接下来，我们继续讨论更复杂的组件。 我们将它们定位在右侧，并使用第一列和操纵杆中的元素进行组装。
选框
让我们从简单的事情开始。
16x16像素容器中的复选框和单选按钮。 对于每个状态，创建一个单独的组件。 这是必要的，以便在设计页面（由这些组件组装而成）时，我们可以通过INSTANCE面板将一种状态替换为另一种状态。
我们对具有指导状态（主动，被动等）的所有动态元素执行相同的操作。
计数器和滑块
我们还需要一个计数器来显示一些东西。 根据其位置，这将是不同的数据。 我们制作一个20x20的框架，并在中央放置一个图形。
滑块对象的按钮对我们也很有用。 我们将它们设置为30x30，然后将人字形图标有条件地放置在中间。 我们为不同状态创建组件。
目录树
最近，我们开始坚持在不同设备上重复使用相同组件的原则，以免产生不必要的实体并保持代码的纯度（尽可能）。 因此，我们从移动显示开始创建目录树。 TK告诉我们一棵树的最大嵌套级别是3。
我们从第一层开始：一个高度为60像素，无量纲宽度的框架（它将适应容器），图标垂直对齐，并且距左边缘20像素，分支的名称将来自h4组件。 所有这些都粘贴在“约束”面板的左侧。 将手数（也为h4）和V形臂粘到右侧。
重新绘制打开分支的组件。 我们以相同的方式组织目录的第二级，但是因为 我们不会在任何地方重复使用这些样式-只是以20像素的增量克隆段落线。 就像在Photoshop中一样-没有麻烦。 同样对于第三级+操纵杆+线条颜色更改。
接下来是一系列持续的妥协
菜单
我们将所有菜单和选项卡的选项卡面板放置在高度为60px的容器中，并将项本身放置在中间。 展望未来，我们说这种方法是不正确的，因为如果您要获得完全橡胶的布局，则每个选项卡都必须放在单独的框架中。 否则，设置选项卡相对于彼此的行为将不起作用。 但是，我们与开发人员交谈时，以一颗冷静的心给它打分。
清单
随着时间的流逝，我回想起编号列表和未编号列表这样的琐事。 要添加数字，我们返回第一列并创建一个两位数的数字部分。
输入和过滤器
我们违反了自己的层次结构规则，将组成部分和由这些组成部分组成的组成部分（* _______ *）放在一栏中的那一刻（请记住：规则是将它们放在右侧，将它们分开放置）。 可以不这样做，但是我们决定块（过滤器或输入）及其下拉列表将包含处于不同状态的一个组件。 正如萨尔沃·哈丁（Salvor Hardin）所说：“永远不要让道德妨碍您做正确的事。”
我们做出这种折衷的原因如下：输入的构成（例如，复选框）应属于同一难度级别（一列），但是输入中的下拉列表可以包含复选框。 我们确实希望下拉列表与输入组成一个单元-为了产生美丽的阴影。
您可以说，然后您必须将带有下拉菜单的输入放在单独的位置（下一列），您将是正确的。 但是，在此过程中，对我们而言，它并不立即变得显而易见。 自从传送带启动以来，在预算和截止日期的推动下，我们被迫违反了建造原子设计系统这一不成文的法律。 让我从经验中告诉您-没有一个设计师或开发人员会遭受此困扰。
我们将回到实际的飞机上。
输入项
在60px的框架内，我们将段落组件放置为占位符。 输入焦点后，占位符将向上移动。 我们给它缩进20像素，然后将其粘贴到左侧边缘。 在块的下边框上，添加一条2像素的线（使用矩形！），垂直将胶水粘贴到底部。 水平，可以选择比例。 在右侧，在不同情况下，我们可以有一个度量单位或一个下拉V形。 将其与另一个相加，然后粘贴到右边缘。 现在，所有内容都经过了整齐的拉伸，并且此组件的所有副本都继承了父对象的行为。
我们添加了用于不同状态的组件：光标在光标输入上方，焦点，打开下拉菜单，有效和无效。 快速创建状态的方法之一是：克隆组件，按选项+ Command + b或“子实例”-通过上下文菜单。 我们编辑所需的内容并将其变成一个新的组件。 不要忘记重命名。
使用过滤器时，情况类似，除了默认状态和为复位值添加叉号之外，它们与输入没有区别。 忘了-输入将在水平方向上一个接一个地移动，因此我们在右侧添加了一条2px的灰线。 不要忘记将其粘贴到右侧边缘。
按键
我们项目中的按钮将有两种类型。
首先：通常的按钮，除了很多预览卡外，将在所有地方使用。 他们的解剖学是这样的：一个高30像素，透明背景的帧，一个类似大小的矩形，一个15像素的舍入（在CONSTRAINTS面板中，我们在两个轴上都设置了Scale值），以及我们在中心所有轴上对齐的btn-txt组件（对于每个消防员，我们突然决定增大按钮的高度？）在单独的组件中，选择悬停时的按钮样式，并选择单独的按钮样式以进行按下。
第二种类型的按钮应适合预览卡的样式，并带有图标。 除了推功能外，这些按钮还将通过一个计数器报告，该计数器取自同一列（请原谅），例如，该按钮被按下了多少次。
我们使用60px高的矩形制作它们，宽度取决于内容。 我们将图标和btn-txt的组件嵌入并居中放置在所有轴上。 我们将计数器组件置于图标上，以使其左下角与图标的中心重合。 按钮将一个接一个地排列，因此我们在每侧添加一个2像素的灰色条以进行视觉分离。 然后不必要地将其关闭。 在这种情况下，在批次的预览组件中。
我们将返回到此级别的组件，但现在继续进行。
帽子
转到新列并开始收集标题。
我们以高度相同的60像素的帧为基础。 在底部，添加一条2像素的灰线。 取1440px的宽度，因为 我们将在此权限下收集所有桌面模板。 我们已经在遵循标准方案：与垂直中心对齐，20像素的水平压痕，徽标，菜单选项卡，搜索（它与第二栏中的输入相类似地进行了组合）。
标题的右侧应包含一个带有当前帐户信息的信息面板，甚至包括一个下拉列表。 我们返回上一列，并从图标和文本中收集这些信息（您已经知道如何使用）。
为了查看任何模板上的下拉列表，我们一次附加了两个组件（打开和关闭的下拉列表）。 通过在图层面板上戳眼睛将其关闭。 不要忘记取消选中“背景”面板上的“剪辑内容”。
接下来，我们通过裁剪不必要的内容来简化较小屏幕的标题。 我们以行之有效的方式行事。 我们克隆，分离，删除不必要的内容，添加汉堡图标，对其进行重命名，然后将其变成一个组件。
对于320像素，我们可以在图标之间稍微移动缩进。
现在是时候设置橡胶了。 为此，选择我们的“ Header-desktop”组件，然后转到LAYOUT GRID。 切换到扬声器。 在这种情况下，列数无关紧要，主要是网格应为20像素（对于不同的任务，请尝试不同的网格）。 接下来，我们配置标头的嵌套组件的行为。
关于模板的可设置性的更多详细信息，我们将在本文的第二部分中介绍。
汉堡
每次设计汉堡导航时，我们都开始发明拐杖，但这种情况下并非如此。 事实证明，除了关闭按钮外，我们拥有汉堡所需的一切。 我们将必要的组件组合在一起，然后将它们变成新的组件。
很多预览
转到目录的预览卡。 首先，很明显，您需要为移动显示器中的按钮创建单独的组件（如果您只是隐藏按钮文本，则图的方式不允许您将图标居中）。 我们使用方形按钮转到该列，并完成窄屏的状态。 添加一个三列网格。
对于卡片本身，我们首先创建带有基本信息的订单项组件和块。 我们将它们分组，以便进行简单的重建即可实现移动显示。
在这一点上，为了不给已经很庞大的文章充气，我们暂时停顿一下。 在第二部分中，我们将讨论如何将上述组件组合在一起并形成响应式页面模板。
我们相信这种方法仍然不理想，因此我们很乐意就该主题发表任何评论（特别是如果您知道如何更有效地使用该图）-您的任何经验都将有助于我们改善业务流程。 一轮