不清楚是不是所有人都知道这个方法,但是这应该是我这辈子最快的环形进度条的设计体验,只要使用弧形工具,就可以快速拖拽出美观而均匀合理的效果。
缩放工具在设计UI的时候也相当实用,只需要选择你要缩放的元素和内容,然后在键盘上单击「k」键,就可以快速拖动缩放,并且确保被缩放的元素是像素完美的。
在以往我总是不愿意使用缩放功能,因为总会因为种种原因导致部分缩放出问题并为之进行调整。在Figma中使用缩放功能则可以完全保证比例,无需返工。
当你按住空格键并且将某个对象拖出框架外的时候,能够让它依然处于这个容器内只是不可见,当然,你还可以关闭「Clipcontents」选项,那么你就能够让它在容器外也可见。出来这种方法之外,你还可以使用「cmd/ctrl+Y」在不可见的情况预览到它的外轮廓。
当你选择一组阵列中多个元素之后,通过单击角落的网格图标,就能对他们进行快速的整理,比如让元素之间的距离相等,还可以通过拖动快速地调整间距。
当你点击吸色工具「i」之后,就可以吸取特定的颜色,但是如果你按住i按键不动的时候,并且移动光标,就能够预览颜色而不是取色。
使用「cmd/ctrl+shift+k」的组合键,能够快速为占位符或者框架之类的元素添加一堆图片。
当你在进行选中多个元素的操作的时候,你可以用光标拉出一块区域,这个时候按住空格键就能拖动你的选中区块,这个时候就能带着这个区域来选中文件,移动过程中选中一大堆元素。
当你拉出一个图形之后,这个时候按住空格键,就能够顺便移动这个元素了。
除此之外,你还可以在拖动元素的时候按住空格键,防止元素在框架或者自动布局当中自动嵌套到其中!
ContentReel+Unsplash是两个必备的插件,使用ContentReel能够快速帮你生成各种占位符,而不是让你的UI界面中每个用户都是「无名氏」,当然,它能生成的占位符有很多类型,名字、头像、ID、文本段落等等全都有。Unspalsh则是著名的免费图库的插件,能够为你提供高质量的图库。
如果你的文本行高看起来参差不齐,而你也本身也暂时没打算设置某个特别的行高参数,那么你只需要在行高中输入auto或者删除其中的参数并且点击回车,就能够设置成为自动行高了!
使用这个Breakpoints插件,你可以像CSSFlexbox一样在你的设计文档当中控制样式和断点,可以轻松地将它们插入到自适应框架当中,并且在你拖动边缘的时候,让元素样式灵活自然地自适应。
设计师通常都会有这样的一种焦虑,就是不希望别人看到你的设计过程。当你在Figma中设计的时候,保持在线协作状态下,别人是可以实时看到你的设计过程和状态的,如果你想「隐身」,断开Wifi即可。
我知道这听起来很奇怪,但是作为一款强调协同的UI设计工具,只有当你断网脱机的时候,才不会在设计的时候,看到别人的鼠标光标在旁边瞎晃,同样这样才能让你不会被Youtube或者其他的信息来干扰你。
只要保证在关闭文档之前联网,就不会丢失你的设计进度,此外你还可以将文档保存成离线脱机格式(.fig),因为Figma一般不会保存本地副本。
这几乎是目前设计软件中的标配功能了。之前我会把图片拖到PS中用钢笔或者魔棒工具来删除背景,不过我后来发现在Figma当中使用这个RemoveBG插件就能帮你一键搞定问题。
为了防止Figma直接覆盖你创建的样式和组件,你可以在命名的时候加入一些前缀标识,将这些样式变为私人的样式。
在组件名称前添加「.」和「_」这样的符号,就能做到这一点,比如「_ComponentName」这样,在发布过程中,系统就会跳过这些样式和组件,并且在「Assets」面板和「库」当中,将这些样式和文件标注为「Privatetothisfile」,也就是专用于这个文档的样式和组件。
我通常会使用MaterialColorTool来获得可访问性良好的同色系配色,不过最近我发现ColorShades插件也可以做到这个事情,效果也同样不错。
令人沮丧的是,在Figma当中似乎无法为元素特定的一侧增加笔触,这个时候我会使用投影来实现这个效果,关闭模糊,然后按照下方的参数进行设置:
当然,你还可以调整参数让笔触出现在另外一边,如果你希望效果更明显一点,可以让参数大于1即可。
Round>>All是一个最近才出现的一个插件,当你在按照比例缩放(快捷键k)某些组件的时候,最后会发现它的实际尺寸是小数而非整数,这个时候你需要做的,就是使用「cmd/ctrl+A」全选所有画板,然后运行Round>>All这个插件,就能让所有的组件参数四舍五入,确保像素完美。
软件使用、安装、下载等任何问题,欢迎加入「素材集市」设计交流群,一起探讨学习。