figma3d素材-什么软件设计围挡好用

本文将带你近距离了解Figma的用途,并提供给你20个实用技巧,让你更快更好的使用这个著名的协作交互设计工具进行工作。

本文中大多数

快捷键

都提供Windows和Mac两个版本,Windows上的 Ctrl 键对应Mac上的 Cmd 键, Alt 键在Windows和Mac上(Option/Alt)通用。

例如: Ctrl / Cmd + Alt + C 对应 Windows上的 Ctrl + Alt + C 以及Mac上的 Cmd + Alt / Option + C 。

我们做设计的时候无时无刻不在使用图片,如果我们能够更轻松、更直接地改变单个和多个图像,那将非常有用。

Figma可以导入多张图片(使用快捷键 Ctrl / Cmd + Shift + K ),并将其一一对应到你希望它们出现的图层(对象)上。这个功能非常方便,你可以看到导入的图像然后进行实时放置。

[图片上传失败...(image-2c49fe-1568608600577)]

很多时候,我们在准备导出设计(如icon或者一组图片)的时候,或是当我们对设计文件需要执行“深度整理”的时候,都需要重命名一组图层。

Figma可以让你批量重命名图层(以及frame),这个功能非常方便。你可以重命名整个图层的名字,也可以只是图层名字中的一部分。你也可以查找重命名一个图层的某个字符,添加不同的数字到图层以方便导出到独立的文件。你也可以通过在“Match”字段里面输入关键字后执行查找替换。

[图片上传失败...(image-17f202-1568608600577)]

在设计团队中使用Figma会让工作更加具有协作性。但是通常需要在同一个设计文件上进行工作,而且有时还是同时展开的。

为了知道哪个Frame正在工作中,以及哪个已经完成了,我们可以添加emoji表情符号(

Windows快捷键:

win + . 或者 win + ; ,

Mac快捷键:

Cmd + Ctrl + space )在frame名称的前面,这样,每一个人就可以知道当前frame的工作状态了。

[图片上传失败...(image-915a3d-1568608600577)]

Figma最伟大的功能之一就是可以在Frame中重组物件。特别是在使用icon,列表以及标签组的时候非常有用。

[图片上传失败...(image-acf8dd-1568608600577)]

本地样式(Local Styles)是Figma最棒的功能之一。它可以让你创建设计系统(design system)以方便你重复使用组件。如果你修改了母版样式,它将同时改变所有相关联的组件。非常强大,对不?但是,如果没有使用正确的方式进行命名和分组,那么你将丢失所有的样式。下面将分享几个组织样式的实用技巧。

你可以通过添加“/”在子分类来组织你的文本样式。例如,在“

Heading

”后面加上“

/

”,这样所有的标题文本都将在“

Heading

”这个分类下面了。这对于有很多不同尺寸字体的情况非常有用,可以让你更快定位到指定的文本。这个方法对于“文本”和“颜色”都适用。

[图片上传失败...(image-37e624-1568608600577)]

对在什么地方使用不同的组件及如何使用这些组件的样式添加快速说明是非常有用的,特别是当你与团队或者其他设计师共同协作的时候。你可以在编辑文本样式,颜色样式或其他组件的同时添加说明文字。

很多时候我们会遇到大量的组件,图标等。而通过使用下拉菜单切换实例并不是最好的做法。这里有个小技巧,就是你可以按住 Alt + Ctrl / Cmd 键从侧栏拖动组件到你想要替换的组件上。简单,快速!

[图片上传失败...(image-b5c7ad-1568608600577)]

当复制一个元素或拷贝一个元素样式的时候,可以快速拷贝元素属性( Ctrl / Cmd + Alt + C ),然后粘贴( Ctrl / Cmd + V )到一个新的元素上。对于具有多属性的图像或者样式元素,这个功能非常有用,例如:填充或者描边等。

[图片上传失败...(image-c23b37-1568608600577)]

另外一个有用的

快捷方式

就是拷贝单一属性,也就是说你可以选择拷贝哪个属性。从右侧面板选择属性,然后使用快捷键 Ctrl / Cmd + C 复制,再用 Ctrl / Cmd + V 进行粘贴到另外一个对象上。

[图片上传失败...(image-bdb085-1568608600577)]

当你的设计文件非常复杂,或者你想清理你的设计系统,搜索相同的属性(例如一个特定的颜色),然后修改

颜色样式

中的颜色这个功能将会非常有用。特别是你正在处理设计系统并且需要更好的组织所有的组件的时候,这个功能异常实用。

[图片上传失败...(image-731ff4-1568608600577)]

缩放元素以及它们的属性(描边,对象上的效果等)是非常有用的。在这一点上,Figma要比Sketch使用起来更简单,因为你无需选择对象的尺寸。当你缩放对象的时候,对象的尺寸和它的属性都将按比例调整大小。通过按住 Shift 键,你可以在放大或缩小物体的同时保持比例。

提示:

如果你只想改变对象的尺寸而不修改它的属性(描边,效果等),使用“Select”工具选择对象,然后使用属性面板进行尺寸修改。如果你使用缩放工具并且调整对象的尺寸,那么对象的尺寸和属性都会发生变化。

[图片上传失败...(image-d8cc74-1568608600577)]

当为不同的

屏幕分辨率

进行设计的时候,你希望调整的是屏幕frame的尺寸而不调整其内部frame所有元素的尺寸。为了实现这个,当你执行调整尺寸操作的时候需要按住 Ctrl / Cmd 键。奇迹出现啦!

[图片上传失败...(image-1146b9-1568608600577)]

使用Figma,你可以快速创建图表/弧形。无需在圆弧上剪裁路径来创建自定义的图形。看看下图如何创建一个加载圆弧,并且所有的数值都可以通过右侧的属性面板进行精确的控制。

Figma中改变群组元素边距的功能很实用。它让你在屏幕上布置一组元素变得垂手可得。该功能不仅适用于多个元素,同时也适用于单个元素。

当你开始着手大量组件的时候,在你的库中查找指定的组件有时会变的非常困难。而

组件关键字(component keywords)

功能让搜索变得容易起来。你可以对任何组件添加关键字,即使和组件的名字不同也可以,这些关键字让你查找组件更加容易。看下图的示例:

能够回到文件的之前版本这一功能非常让人欣喜。

无论出于什么原因(你犯了一个错误,或者客户需要你切换回较早的版本等。),能够返回较早的版本这一功能都非常有用。不仅如此,Figma还允许你拷贝

较早版本的链接

,这样你就不必删除文件的近期版本了。非常聪明!

[图片上传失败...(image-f59769-1568608600577)]

通常需要使用UI套件库来开始新的项目。例如,当设计一些线框模型的时候会使用 Wireframy 套件。你只要激活该库就可以使用了。另外,Bootstrap Grid 和 Figma Redlines 也是会经常用到的套件。你可以在这里找到很多 免费的资源 供你使用。

[图片上传失败...(image-6bd3d2-1568608600577)]

Figma刚刚增加了将GIF文件添加到原型的功能,从而增加了在原型中添加用户交互动画的可能性。以下是Aris Acoba的预览:

[图片上传失败...(image-dc3953-1568608600577)]

Figma的

整理功能(Tidy Up)

非常实用,特别是当你需要快速重排网格中的元素或者将元素对齐的时候。结合第4条和第14条提到的实用技巧,该功能变得非常强大。此外,另一个执行整理的方式就是鼠标悬浮在所选元素的右下角,然后点击蓝色的图标。

[图片上传失败...(image-e269d5-1568608600577)]

Figma的查看功能也非常实用,虽然它比较难找到在哪里。在窗口右上角的设置(Settings)的下拉菜单中,你可以看到工作区域的设置。不仅可以显示标尺(Rulers),网格(Grid),启用/停用与网格对齐(Snap to Pixel Grid),而且当你需要专注不想被其他设计师干扰的时候,还可以隐藏其他参与者的光标。

[图片上传失败...(image-777ec-1568608600577)]

Figma最近发布了它全新的 插件功能 ,允许人们为他们的

工作流程

创建自定义的插件扩展。

插件对于整个Figma的

生态系统

来说意义非凡,并且可以提升工作流程 ,下面推荐几个常用的插件:

[图片上传失败...(image-81ad97-1568608600577)]

[图片上传失败...(image-9ae8da-1568608600577)]

选择一款好用的软件设计围挡工具非常重要,因为它可以帮助设计师更好地展示和沟通自己的设计想法。以下是几款常见的好用的软件设计围挡工具:

1. Sketch:这是一款Mac上非常流行的软件设计工具,也是很多设计师首选的围挡工具。它的功能非常强大,可以非常方便地绘制向量图或位图图像,并且可以轻松导入或导出设计文件。

2. Adobe XD:Adobe XD是一款专门为用户体验和界面设计而设计的软件,它包含了非常实用的界面和交互设计工具,并支持设计文件的共享、围挡和协作。

3. Figma:Figma是一款网页设计和围挡工具,具有非常强的协作和共享功能,设计师可以在同一文件中共同工作,实时查看和编辑设计文件。

4. InVision Studio:InVision Studio是一款全新的软件设计围挡工具,它的功能非常强大,包括强大的界面设计工具、原型设计工具和动画效果等,同时还有非常实用的协作和围挡功能。

以上是几款常用的软件设计围挡工具,设计师可以根据自己的需要和习惯选择合适的工具使用,以更好地展示和沟通自己的设计想法。

Time Machine 可以帮助设计师一键将设计稿自动复制一份,收纳到在一个 Page 里,并按日期与时间排列。这款插件已经是笔者目前最高频使用的插件,因为日常的工作流中设计方案的探索、推导、收敛到最后的落地,会产生数量很多的废稿。以往笔者都要手动创建一个名为「Archive」的 Page,然后将废稿手动丢进去。现在只需要 ⌘ + / 然后输入「tim」再一个回车一气呵成。

Clean document 可以帮助设计师自动「打扫」选中的设计文件,清理隐藏的图层,解除只有单个图层的组,重命名图层,还可以根据元素的位置对图层重新排序。

Autoflow 可以让设计师直接选中两个元素后自动画上流程线,省去了画流程图过程中标注箭头的繁琐工作。

方法:在按住⇧Shift的同时,选择2个对象,一个接一个。

Iconify 内有 50 个图标库,包含超过 40,000 个图标。如果要找图标直接搜索,然后「add icon 」即可。用 iconify 来处理搭建原型阶段的图标需求再好不过,也省去了打开 iconfont 网页找图标的麻烦.

Gifs 可以让设计师直接搜索并插入来自 GIPHY 的动图。不过这款插件在平时的工作中用的还是很少的,但是用 Figma 做 PPT 就非常适合配合这款插件食用。

Vectary 3D 可以将 3D 元素插入 Figma 中,更有趣的在于你能将设计稿置入预设的可交互的 3D mockup 后,导出图片到 Figma 中。从此包装设计稿不用烦恼找不到适合的 mockup 了,自己动手丰衣足食。

另外值得一提的是 Vectary 3D 这款插件背后的产品,是一款与其同名的基于浏览器的在线 3D 设计工具 链接 。

A11y 即 Accessibility,随着无障碍设计得到越来越多关注,这类插件也终于开始出现,让我们可以更有效的优化产品设计,让更多用户享受更友好的体验。

A11y 系列由 Microsoft 出品,包含两款插件:Color Contrast Checker、Focus Orderer。

即:色彩对比检查器。用来检查设计稿内文本对比度是否遵守 WCAG(Web Content Accessibility Guidelines)标准,以保证用户可以无障碍阅读文本内容。Color Contrast Checker 的使用非常方便,唤起插件,选中需要检测的界面,点击 「Check」即可。