产品设计

【Sketch】Symbols建立技巧

微信扫一扫,分享到朋友圈

【Sketch】Symbols建立技巧
0

1.如何创建基本组件

How to create basic components

步骤一:

首先需要创建一个新元件。选中要转化为元件的内容,点击顶部工具栏的 Create Symbol 按钮,就可以转化为元件。

步骤二:

转化为元件的内容,可以直接复制,或在顶部 Symbols 菜单中选择使用。

步骤三:

在组件上双击,或在 Symbols 页面找到对应元件,即可进行编辑。编辑完成后,文件内所有用到该元件的地方都会实时变化。

2.如何归类和命名

how to classify and name

1.命名规则

Symbols 分类规则 是用「/」符号来分类。

通用命名方法:分类名称/类型或模块/组件名称/组件状态。将不同类型的元件组织起来。

注意: symbol是以画板尺寸进行创建的,同一组的Symbol尺寸应保持一致,如果尺寸不一致,替换后样式会出现问题,所以在建立symbol的时候要注意保持画板的尺寸一致。

2.命名小技巧——overrides强调层级

可以利用:one::two::three:(Control+Command+空格可以调出emoji)在视觉上明确层级关系。

3.替换其他元件

在画板中选择一个元件,在右侧的面板中可以将它替换为其他元件。替换的菜单中默认展开了当前元件所在的分类,便于在一个分类下进行切换。当然也可以选择其他分类下的元件进行替换。

4.相关插件

Batch Create Symbols——批量创建Symbols

Rename it——快速批量重命名

Symbols Manager——对Symbols进行重命名或拖拽改变嵌套操作

Symbol Organizer——整理Symbols的位置及查重

3.如何与运用资源库

How to use sketch libraries

1.什么是资源库Libraries

资源库Libraries这个功能可以很好的运用在项目协作中,并且方便项目的规范管理。通过资源库Libraries,Sketch可以实现跨文档同步组件库Symbols,也就是说,只要更新了源文件中的Symbols,其他用了这个Symbols的文档也可以同步更新。

2.如何使用资源库

通过“Command + , ”可以直接呼出资源库管理,点击下方添加资源库的按钮,就可以选择含有组件库的Sketch文档进行导入。

注意: 必须导入带有组件库Symbols页面的Sketch的文档,才能在“插入”菜单中找到有链接标志的组件库。

3.编辑资源库

在新文件的画板里,双击资源库组件会出现一个弹出,如下图所示,点击“Unlink from Library”,则这个组件就会与资源库分离开,可作为本文件组件单独编辑使用,点击“Open in Original Document”,就会直接打开源文件,直接编辑源文件里面的组件库,同时也会同步到其他文件。

4.更新同步资源库

只要源文件里的Symbols有更新,其他文件的窗口右上角就会有组件库更新提示,点击提示就可以看到有更新的组件Old和New 对比,确认更新后,所有用到资源库组件的页面就会自动更新。

最后祝大家有个愉快的夏天~别忘了点个赞嗷

阅读原文...

微信扫一扫,分享到朋友圈

【Sketch】Symbols建立技巧
0
UI中国

梳理下常见的不冒泡事件

上一篇

你真的能写好一个单例么?

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

【Sketch】Symbols建立技巧

长按储存图像,分享给朋友