教你用Mac共享,轻松打造自己团队的Sketch Libraries!

UI设计3年前 (2021)更新 流光
2.5K 0 0

前段时间发现蓝湖的同步盘从官网下线了,问了客服,说是维护中,具体开放日期不明(目前已正常)。当时我们的设计团队要用这个同步盘来维护 Sketch 的设计组件 Libraries,看来现在要换个思路来解决。

网上有 Dropbox 和 GitHub 解决方案,但是对于设计师来说还是难以理解,部署复杂,关键是 Dropbox 的速度在国内堪忧,严重影响效率。

同时有的公司为了项目的保密性,禁止把相关设计放到外网,更别说把设计最基础的组件放到网络上了。

所以我们的需求很明确:

  • 简单的操作
  • 稳定且快速的传输
  • 方便的同步共享
  • 如果只在内网使用就更好了

文章目录

  • Sketch Libraries 简单介绍
  • Mac 文件共享功能打开
  • 引入共享的 Libraries
  • 总结

鉴于有些设计师还没用过 Sketch 的 Libraries,在这里先简单介绍下。

Sketch Libraries 简单介绍

Libraries 是 Sketch 最近版本中新增的功能,一个 Library 实际上就是一个正常的 Sketch 文件,我们可以把一套做好的 Sketch 规范(包含symbols和text styles)放到共享网络中,其他 Sketch 项目只要通过 Libraries 引入,就可以调用里面的 symbols 和 text styles。如果 Libraries 中的样式改变,那么其余使用这个样式的组件都会收到更新提示,手动点击就会更新。

教你用Mac共享,轻松打造自己团队的Sketch Libraries!

为了保持界面的风格统一,Libraries 非常适合制作大型项目的 UI规范,尤其是多位设计师协作完成一套界面的时候。

如果要让其他设计师引入 Libraries,就需要一个服务器空间,蓝湖同步盘就像一个服务器空间,设计师把 Libraries 上传到同步盘后,加入项目的其他人就可以引入使用了。

解决方案

那么回到我们的问题上,如何找到既能简单方便的操作,又能稳定且快速传输的蓝湖同步盘替代方案呢?

我给出的方案就是利用 Mac 的共享功能,把自己的电脑当成一个本地服务器,其他设计师只需要进入我的电脑去引入 Libraries 就可以了,相当于本地化的局域网文件共享。

教你用Mac共享,轻松打造自己团队的Sketch Libraries!

其实 Mac 有非常强大的共享功能,我们这里需要使用的是其中的文件共享。由于是本地化的局域网解决方案,速度当然是很快了,关键是没有上传到互联网,不用担心安全性,放在公司内部妥妥的。接下来是实现方法。

Mac 文件共享功能打开

1. 打开文件共享功能

依次打开设置 – 共享,打开设置面板。左边列出了 Mac 可用的共享类型,我们需要使用文件共享功能。afp 和 smb 开头的地址就是其他小伙伴进入你的电脑需要用的。

教你用Mac共享,轻松打造自己团队的Sketch Libraries!

教你用Mac共享,轻松打造自己团队的Sketch Libraries!

接下来我们要确保文件共享是打开的,勾选上文件共享。然后点击右侧的选项,afp 一般是 Mac电脑使用,smb 一般 win电脑使用,当然 Mac 使用 smb 也是可以的,如果使用 afp 进不到对方电脑就选择 smb 开头。建议 smb 和 afp 共享都勾选。

教你用Mac共享,轻松打造自己团队的Sketch Libraries!

2. 选择需要共享的文件夹

共享文件夹,就是你想要你的电脑中哪些文件夹给其他小伙伴看,没有共享的文件夹其他人是看不到的,我们可以点击添加来选择,也可以删除某个已共享的文件夹。

右侧用户是权限设置,admin 是你自己,可以写可以读,说白了就是可以修改可以查看。其他的就设置成只读,就是只能查看不能修改。

教你用Mac共享,轻松打造自己团队的Sketch Libraries!

还有一种共享文件方法就是右键单击某个需要共享的文件夹 – 简介 – 勾选共享文件夹,之后该文件夹就会出现在共享列表中。

教你用Mac共享,轻松打造自己团队的Sketch Libraries!

3. 设置客人权限

共享文件夹设置好了,要给其他人设置进入权限。打开设置 – 用户与群组 – 客人用户,客人用户选项无法点击的,需要解锁左下方的小锁,输入电脑密码。接下来勾选允许客人用户连接到共享文件夹。设置完毕。

教你用Mac共享,轻松打造自己团队的Sketch Libraries!

教你用Mac共享,轻松打造自己团队的Sketch Libraries!

教你用Mac共享,轻松打造自己团队的Sketch Libraries!

4. 进入对方Mac

根据上面步骤设置后,就可以进入对方电脑了。打开 Finder,快捷键 cmd+k,输入对方 afp 或者 smb 开头地址,然后在弹窗中选择客人,接下来再选择你想进入的文件夹就可以了。

教你用Mac共享,轻松打造自己团队的Sketch Libraries!

教你用Mac共享,轻松打造自己团队的Sketch Libraries!

现在,我可以随时查看其他设计师共享的文件,其中 Sketch 源文件可以随便修改,就是没有权限保存。对方保存 Sketch 后,我的 Mac系统会提示文件发生变化,可以根据提示选择更新还是其他。

教你用Mac共享,轻松打造自己团队的Sketch Libraries!

选择 Revert,文档就会自动更新到对方最新修改的状态,速度取决于文件大小,一般 Sketch 文件都是比较小的,几秒钟就更新了。

5. 固定电脑的ip地址

有时候会遇到这样的情况,刚开始进入其他同学的电脑很正常,但是过几天会发现进不去了,原因是对方 ip地址发生了改变。

由于一般默认在局域网中,ip 是自动获取的,可能会导致每次分配的 ip 地址不一样,在 Mac 中我们可以把 ip地址固定。

首先打开网络设置:

教你用Mac共享,轻松打造自己团队的Sketch Libraries!

打开网络右下角的高级:

教你用Mac共享,轻松打造自己团队的Sketch Libraries!

选择 TCP/IP,配置IPv4 中选择手动设定地址。IPv4地址一般默认使用路由器地址172.16.12.X,最后的 X 可以从1-255中填写一个。

教你用Mac共享,轻松打造自己团队的Sketch Libraries!

操作之后,电脑的 ip地址就会固定再也不会变动了。如果更改之后无法上网的,请联系公司的网络管理员。

以上是 Mac 共享的打开方法,接下来我们就开始引入 Libraries 了。

引入共享的 Libraries

这里我们要明确一个事情,UI规范是一个大家都可以调用的组件集合,为了设计的规范和统一,不能所有人都有编辑权限(权限可以通过共享中的设置来配置),因此 Libraries 需要一个人来维护更新,比如在团队中,A同学负责维护 UI规范,那么这个 Libraries 就会放在 A 的电脑。

如果我想引入 Libraries,就需要通过上面讲的 Mac 共享功能进入 A同学的电脑。

cmd+K – 输入A同学共享地址 – 选择客人- 找到规范Libraries的文件路径。

接下来我们再从 Sketch 中引入 Libraries。

打开 Sketch 的Libraries:Perferences – Libraries – Add Library。

教你用Mac共享,轻松打造自己团队的Sketch Libraries!

教你用Mac共享,轻松打造自己团队的Sketch Libraries!

点击 Add Library 后,我们需要在 Finder 弹窗中找到需要的 Library,然后引入到 Sketch 中。右侧就是我们刚才连接的A同学电脑共享地址。

教你用Mac共享,轻松打造自己团队的Sketch Libraries!

之后在 symbol 中就可以找到刚才引入的 Library 了,可以在其他项目中使用。Library 和普通的 symbol 相比,图标是不一样的。

教你用Mac共享,轻松打造自己团队的Sketch Libraries!

如果 Library 中的 symbol 样式发生变化,Sketch 文档就会在右上角收到紫色的更新通知,点击后在弹窗中就可以看到哪里发生了改变,之后进行更新。

教你用Mac共享,轻松打造自己团队的Sketch Libraries!

教你用Mac共享,轻松打造自己团队的Sketch Libraries!

总结

经过以上操作,我们就可以在不借助第三方工具的情况下,打造属于自己团队的 Sketch Libraries 共享解决方案。可以指定一位设计师为管理者,拥有修改权限,其他设计师有只读权限,确保 Libraries 修改的唯一性。

这个方案的优点是搭建流程比较简单、速度快、内网环境安全性高。不足点是需要管理者的电脑保持开机状态。不过我的电脑一般在公司中很少关机,Mac 本身的设计就是不建议频繁开关机,即开即用,用完盖上,唤醒很快,让工作更高效。

其实利用 Mac 的文件共享功能,设计师、产品、技术可以很方便地共享源文件、原型图、切图资源等,减少不必要的文件传输和无用的文件副本,而且传输速度也很快。

以前给产品发文件,如果发生了修改,需要第二遍、第三遍,现在利用共享,产品同学看到的一直会保持最新版本,不用再麻烦地传输文件。

希望这个方法能带给各位设计师工作上的启发和效率上的提高。

欢迎关注作者的微信公众号:「UI黑客」

教你用Mac共享,轻松打造自己团队的Sketch Libraries!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

本文将深入细节从多角度去解析组件化的概念,帮助我们理解、构建组件库。 设计组件化的概念本身是从程序的开发模式中演变而...
交互组件库
Figma作为一个线上协作设计平台,因其强大的组件功能,越来越受到设计团队的青睐。 为帮助用户对组件进行更加高效的管理,20...
Figma
最近团队尝试使用Figma构建一套适用团队的组件库与规范,发现Figma比Sketch的构建方式要更简单和更灵活,尤其是自动布局(Aut...
Figma
工作中大家都可能遇到过,设计完成后因为某些原因突然要批量修改某一个字段文字的大小,或者某个按钮的颜色。 领导一声令...
组件
今天给大家带来的是如何建立设计师个人的插画组件库,因内容过长并知识点过多,请泡杯枸杞观看。 关于个人插画组件库的 3 ...
插画组件库
如何定义组件库 UI 设计组件库(UI KIT),直译过来就是用户界面成套元件。我们日常工作中所构建的组件库,一般是把所有界面...
sketch
这是一篇 Sketch 进阶教程,让你学会利用 Symbol 建立一套设计规范组件库。 文章目录 写在前面 基础规范 图标规范 ...
交互组件库
今天,我们来讲解下组件的动态响应式,这是组件库搭建的重中之重,也是 Sketch 搭建组件库系列的终篇! 依旧,来一个大纲: ...
sketch