figma线上作图-从PS到Figma

Figma设计流程实用技巧

本文将带你近距离了解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)]

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

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

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

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

组件关键字(componentkeywords)

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

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

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

较早版本的链接

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

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

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

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

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

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

Figma的

整理功能(TidyUp)

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

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

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

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

Figma最近发布了它全新的插件功能,允许人们为他们的工作流程创建自定义的插件扩展。

插件对于整个Figma的生态系统来说意义非凡,并且可以提升工作流程,下面推荐几个常用的插件:

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

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

一直使用PS做UI。无意间接触了Figma,在查找资料对其有了初步了解之后,决定入坑。

首先,PS的知名度不用多说,它是很多人学习的第一个图像软件,功能强大,一专多能,不可否认,现在用PS做UI的仍不在少数。虽然有关图像图形的几乎任何功能都可以用PS实现,但在很多方面,它并没有达到极致。矢量图形是PS的弱项,它并不是一个forUI设计师的专门软件,在很多设计上,可以处处体会到它的笨拙。

Sketch的出现让设计师们可以优雅地工作,但它只能在macos运行,阻断了大批windows用户。

而Figma在界面设计上和Sketch极为相似,运行在浏览器上,是一个web应用,不存在跨平台问题。其次,Figma颠覆了PS的方式,在UI设计上,大大提高了效率。

UI的工作流程:绘制线框图_交流修改_绘制高保真界面_添加交互

以往完成上述工作需要跨越多个软件,而Figma则可以独自完成。

纸上草图,理清产品逻辑,打开软件。

在绘制之前,先创建一个frame,我们给它起名为UIlibrary。我们将把所有的可复用组件和设计规范放在这里。

我们在里面先绘制一些基本的文字样式(H1,H2,H3,H4,P,Small等)。此时我们可以直接使用默认样式,而不需要考虑设计。接下来绘制其它的组件,比如按钮、输入框、下拉菜单、导航条、卡片、标签、页脚等等。推荐顺序:先绘制具体页面,再提取出一些元素将其转换为组件,在移动到UIlibrary中。

如此,你的设计图中几乎所有的元素都变成了组件。组件不仅可以为你节省时间,还可以保持产品一致性,这对于UI/UX设计来说是很重要的。

当你绘制完线框图并创建一套组件库之后,我们可以给它添加一些交互动作,Figma内置很多交互效果可以帮我们做到。

你所需要做的就是在原型模式下,来连接需要交互的不同元素并设定他们之间的动作。需要注意的是,如果你连接了一个master组件,那么这将对其所有instance都起作用。

下一步就是分享你的原型链接给其他人,让他们直接在原型上给予反馈。接下来,根据反馈,修改你的线框图,直到最后确定下来。

细化你的线框图样式,将其转换为高保真设计图。在这一步,你可以直接在每个master组件上来应用品牌的色调和细节,得益于其组件唯一来源的特性,我们可以很快将线框图转换为高保真设计图。

打磨原型细节。你可以检查一下还有哪些元素可以作为组件,哪些组件可以优化一下,每个需要交互的元素是否都添加了链接,以及交互效果是否正确。

一切就绪,你就可以分享出一个链接给开发,并告诉他们如何查看标注,如何导出素材,他们遇到问题也可以直接在原型上评论。

References:

如何使用Figma来完成你的设计工作流

UI设计(或称界面设计)是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计师的日常工作是一个系统性的工作,所以使用到的软件各不相同。UI设计所需要的主流软件为以下:

一、UI设计视觉设计软件:PS、Sketch

Photoshop是一款强大的处理软件,因此它不只是修修照片、你用它还能完成UI设计。

二、思维导图软件:MindManager或XMind

MindManager或XMind都为思维导图软件,主要用来整理产品需求思路、产品架构、产品的交互逻辑等等。

三、快速原型设计工具:AxureRP

AxureRP是一个专业的快速原型设计工具

四、动效设计:AE软件

可以让工程师实际动态效果等。

以上就是ui设计所用的软件,大家也可以上相关官网查询有专业的课程学习