选择分类
  • 云瑞原创
  • Mockups
  • Ui Kits
  • 背景纹理
  • 图标
  • 平面图形
  • 探索
  • 笔刷
  • 图层样式
  • PPT模版
  • 影视素材
  • 教程
  • C4D资源
  • PS动作
  • 常用3D资源
  • 字体
  • 网站模板
  • LR预设
  • 设计学院

在Sketch中创建设计系统 4

组件 第2部分


格式的Sketch文件中只有2个文本/按钮组件,我们将在本教程系列的后面部分需要,我将向您展示如何将这些元素放在一起。让我快速向您展示如何在Sketch文件中创建2个文本/按钮组件。在组件页面上,我插入了在第一部分中创建的文本样式之一。

H5 /字体家庭#1 /中心/白色/ – 确定。然后我编辑文本以简单阅读按钮以便于参考。

然后选择文本图层,我将其转换为组件并将其标记为文本/按钮/大/中/白

我删除了原始副本,并且使用刚刚创建的新Symbol,我为其提供了背景颜色#000(用于明显的对比度和可视性目的)。

最后为了在以后更直观的查看,我只是将文本层重命名为内容。

想知道如何将这些Emojis输入到我的图层名称中?

那么这个下一个小技巧将会使你变得心应手!
编辑图层名称时,只需使用快捷键CTRL + CMD +空格键调出表情符号窗口! ?

回到那些按钮文字组件。
对于第二个也是最后一个符号,我再次放弃了以前创建的文本样式,这次我选择了……

H5 /字体家族#1 /左/白/ – 折。并按照上面详细描述的相同步骤进行操作,组件名称为…

图标

现在,在我自己的设计系统(Cabana)中,我创建了超过150个图标,因此当我需要某个项目的特定图标并且几乎涵盖了所有图标。使用Sketch文件格式,我们只需要大约20个图标,我将向您展示如何将这些图标组件中的一个放在一起,然后如何才能简单地复制以下步骤以获得更多图标 添加喜欢的到您自己的系统。随着我刚才提到并格式化的Cabana,我已经使用了8pt网格系统,并将其与我的图标符号一起使用。我们将专注于保存图标符号,我们将在稍后使用它作为我们的设计的徽标标记。

所以在我的组件页面上,我创建了一个矩形(R)24×24并删除了填充颜色。

这将作为所有我的图标前进的边界框,因此即使实际图标大小稍有差异,它们也会始终包含在24pt边界框内部,因为它涉及到对齐和粘贴到我项目中的8pt电网系统。选择此图层后,我创建了一个带有标签图标/保存的新组件。

然后我从组件页面中删除原始文件,并专注于我新创建的组件。

我把我的颜色/主要组件放在这个顶部,将其重新调整为相同的24×24,并将图层重命名为颜色…

接着使用永远不可思议的IconJar与美丽的Symbolicons Pro图标集相结合,我只需搜索相关图标,将大小设置为20左右,格式更改为SVG …

…我们将其拖到新创建的组件上…

请注意:该图标将被拖入文件夹内部,以便将Shape Layers移出文件夹,删除文件夹/组,然后重命名Shape Layer(即 Save)。

一旦你从一个文件夹/组中删除一个形状图层,你可能会看到图标尺寸不在网格上对齐,所以你可以简单地从工具栏中选择缩放并调整它,在我的情况下这是20×20。

然后我拖动图层列表中的颜色填充下面的图标,删除图标的填充颜色,并将其转换为蒙版,直到我有以下…

最后我选择了Bounding Box Layer并使用Resizing Constraints将其固定。

现在我有一个嵌入了填充颜色符号的图标符号,适用于简单颜色覆盖。使用我向你展示的相同过程,然后继续创建其他19个图标组件以在格式中使用。

 

翻译 Courier   选自 Medium
云瑞设计小程序
云瑞设计小程序

微信扫一扫
手机使用更方便!

云瑞设计订阅号
云瑞设计订阅号

关注我们的微信订阅号,不错过任何福利。